Вертикальное прокручивающееся меню
В данном уроке мы создадим вертикальное меню, которое прокручивается движениями курсора мыши. При наведении на пункт меню выводится текстовая подсказка.
Создаем разметку
Нужно создать необходимую структуру HTML. Естественное желание использовать для меню неупорядоченный список в качестве контейнера, придется оставить - в Internet Explorer при введении расстояния между пунктами списка проявляется ошибка. Поэтому будет использоваться элемент div. Также необходимо задействовать атрибут title у каждой ссылки, в котором размещается текст всплывающей подсказки. Internet Explorer игнорирует атрибут title, поэтому будет также использовать текст в img alt .
<div class="sc_menu_wrapper"> <div class="sc_menu"> <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a> <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a> <a title="jQuery" href="/"><img src="/images/3.jpg" alt="jQuery"/></a> <a title="CSS" href="/"><img src="/images/4.jpg" alt="CSS"/></a> <a title="Вертикаль" href="/"><img src="/images/5.jpg" alt="Вертикаль"/></a> <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a> <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a> <a title="jQuery" href="/"><img src="/images/3.jpg" alt="jQuery"/></a> <a title="Навигация" href="/"><img src="/images/4.jpg" alt="Навигация" /></a> <a title="JavaScript" href="/"><img src="/images/5.jpg" alt="JavaScript"/></a> <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a> <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a> <a title="JavaScript" href="/"><img src="/images/3.jpg" alt="Javascript"/></a> </div> </div>
Добавляем базовые стили CSS
div.sc_menu_wrapper { position: relative; height: 500px; /* Делаем больше, чем фотография, так как нужно место для полоски прокрутки. */ width: 160px; margin-top: 30px; overflow: auto; } div.sc_menu { padding: 15px 0; } .sc_menu a { display: block; margin-bottom: 5px; width: 130px; border: 2px rgb(79, 79, 79) solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; /* Когда нет изображений */ color: #fff; background: rgb(79, 79, 79); } .sc_menu a:hover { border-color: rgb(130, 130, 130); border-style: dotted; } .sc_menu img { display: block; border: none; }
Свойство overflow используется для добавления полоски прокрутки к внешнему контейнеру div. Также нам нужно свойство position для позиционирования наших подсказок. Свойства -webkit-border-radius и -moz-border-radius используются для формирования скругленных углов для Firefox, Safari и Chrome.
jQuery
Сначала нужно присоединить jQuery к нашему документу. Будем использовать библиотеку с сайта Google API, так как часто она уже имеется в кэше браузера, что сократит время загрузки страницы.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
$() - это короткая запись для $(document).ready(), самой используемой функции jQuery. Она позволяет привязывать выполнение скрипта к завершению загрузки DOM документа. Функция makeScrollable содержит весь код, который делает наше меню прокручиваемым.
function makeScrollable(wrapper, scrollable){ } $(function(){ makeScrollable("div.sc_menu_wrapper", "div.sc_menu"); });
Теперь добавим код, который будет выводить индикатор во время загрузки изображений. Функция enable будет запускаться, когда все изображения загружены.
function makeScrollable(wrapper, scrollable){ // Получаем элементы jQuery var wrapper = $(wrapper), scrollable = $(scrollable); // Скрываем изображения, пока они не загружены scrollable.hide(); var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper); // Запускаем функцию, которая проверяет загрузку всех изображений var interval = setInterval(function(){ var images = scrollable.find('img'); var completed = 0; // Подсчитываем количество загруженных изображений images.each(function(){ if (this.complete) completed++; }); if (completed == images.length){ clearInterval(interval); // Таймаут добавлен для устранения проблем с Chrome setTimeout(function(){ loading.hide(); // Удаляем полоску прокрутки wrapper.css({overflow: 'hidden'}); scrollable.slideDown('slow', function(){ enable(); }); }, 1000); } }, 100);
Также зададим стиль для индикатора загрузки:
.sc_menu_wrapper .loading { position: absolute; top: 50px; left: 10px; margin: 0 auto; padding: 10px; width: 100px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-align: center; color: #fff; border: 1px solid rgb(79, 79, 79); background: #1F1D1D; }
Делаем меню прокручиваемым
Мы будем использовать событие mousemove для функции, которая запускается при перемещении курсора мыши по меню.
Атрибут события pageY содержит координату по вертикали курсора мыши относительно всего документа. Но нам нужна координата относительно внешнего контейнера div. Поэтому мы вычитаем wrapperOffset.top.
Меню должно перемещаться быстрее, чем курсор мыши. Поэтому мы используем пропорцию (scrollableHeight - wrapperHeight) / wrapperHeight.
А вот код функции enable:
function enable(){ // Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши var inactiveMargin = 99; // Кэшируем параметры для повышения производительности var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Используем наружную высоту для включения отступов var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; //Когда пользователь перемещает курсор мыши по меню wrapper.mousemove(function(e){ var wrapperOffset = wrapper.offset(); // Прокручиваем меню var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin; if (top < 0){ top = 0; } wrapper.scrollTop(top); }); }
Задаем стили для подсказок
Код CSS для стилей подсказок:
/* Стили для подсказок */ .sc_menu_tooltip { display: block; position: absolute; padding: 6px; font-size: 12px; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid rgb(79, 79, 79); background: rgb(0, 0, 0); /* Делаем фон немного прозрачным для браузеров, которые поддерживают rgba */ background: rgba(0, 0, 0, 0.5); }
И вносим код в тело функции enable, который будет перемещать подсказку и менять в ней текст. Использование события jQuery hover ухудшает производительность. Поэтому используется другой подход. Код снабжен достаточно подробными комментариями и разобраться в нем будет просто.
function enable(){ // Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши var inactiveMargin = 99; // Кэшируем параметры для повышения производительности var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Используем наружную высоту для включения отступов var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; // Не будем кэшировать wrapperOffset, так как она поменяется при изменении окна просмотра // Можно использовать событие onresize, но овчинка не стоит выделки // var wrapperOffset = wrapper.offset(); // Создаем невидимую подсказку var tooltip = $('<div class="sc_menu_tooltip"></div>') .css('opacity', 0) .appendTo(wrapper); // Сохраняем заголовки меню scrollable.find('a').each(function(){ $(this).data('tooltipText', this.title); }); // Удаляем подсказки по умолчанию scrollable.find('a').removeAttr('title'); // Удаляем подсказки по умолчанию в IE scrollable.find('img').removeAttr('alt'); var lastTarget; //Когда пользователь перемещает курсор мыши по меню wrapper.mousemove(function(e){ // Сохраняем цель lastTarget = e.target; var wrapperOffset = wrapper.offset(); var tooltipLeft = e.pageX - wrapperOffset.left; // Не даем подсказке выходить за рамки меню. // Так как свойство overflow имеет значение hidden, мы не сможем их увидеть. tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40; // Перемещаем подсказку под курсор мыши, когда мы находимся в верхней части меню if (e.pageY - wrapperOffset.top < wrapperHeight/2){ tooltipTop += 80; } tooltip.css({top: tooltipTop, left: tooltipLeft}); // Прокручиваем меню var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin; if (top < 0){ top = 0; } wrapper.scrollTop(top); }); // Устанавливаем интервал, который помогает решить проблему производительности в IE var interval = setInterval(function(){ if (!lastTarget) return; var currentText = tooltip.text(); if (lastTarget.nodeName == 'IMG'){ // Данные привязываются к ссылке, а не к изображению var newText = $(lastTarget).parent().data('tooltipText'); // Выводим подсказку с новым текстом if (currentText != newText) { tooltip .stop(true) .css('opacity', 0) .text(newText) .animate({opacity: 1}, 1000); } } }, 200); // Скрываем подсказку, когда курсор мыши покидает меню wrapper.mouseleave(function(){ lastTarget = false; tooltip.stop(true).css('opacity', 0).text(''); }); /* //Использование события hover приводит к проблемам с производительностью scrollable.find('a').hover(function(){ tooltip .stop() .css('opacity', 0) .text($(this).data('tooltipText')) .animate({opacity: 1}, 1000); }, function(){ tooltip .stop() .animate({opacity: 0}, 300); }); */ }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/v7KNjdFU_d0/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
"Если технология меняется почти каждый день, нет смысла нанимать человека потому, что он обладает специфическим набором профессиональных навыков - все равно эти навыки скоро устареют. Вам нужно стараться принимать на работу людей, которые обладают широкими универсальными способностями к решению проблем, каким бы трудным это ни оказалось." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.