Как создать вертикальное меню сайта с помощью jQuery, и правильно разместить его на сайте, этот урок будет полезен не только для новичков, но и опытных дизайнеров. Недавно на сайте увидел вертикальное меню, с плавной прокруткой при наведении мыши на начало или конец меню. Также при наведении на пункт меню выводится текстовая подсказка. По этому в данном уроке речь пойдет именно о создании такого меню и внедрение его в верстку сайта, в ходе данного урока можно скачать уже готовую версию примера..

Для начала нам нужно создать структуру HTML. Вводим в верстку атрибут title у каждой ссылки, в котором размещается текст всплывающей подсказки. IE игнорирует атрибутtitle, поэтому будет также использовать текст в img alt .

Далее мы создаем стили CSS, выглядят они следующим образом:

При рассмотрении нашего кода замечаем, что свойство overflow используется для добавления полоски прокрутки к внешнему контейнеру div. Также нам нужно свойство position для позиционирования наших подсказок. Свойства -webkit-border-radius и -moz-border-radius используются для формирования скругленных углов для Firefox, Safari.

Следующий этап, это подключение jQuery, здесь мы пойдем на маленькую хитрость, чтобы сократить время загрузки меню мы будем использовать библиотеки Google API, так как часто она уже имеется в кэше браузера, что сократит время загрузки страницы:

И так, смотрим, что функция $() — это короткая запись для $(document).ready(), самой используемой функции jQuery. Она позволяет привязывать выполнение скрипта к завершению загрузки DOM документа:

При медленном интернет подключении стилизируем наше меню индикатором загрузки изображений:

Задаем следующий стиль CSS для индикатора загрузки:

И вот самый интересный момент при создании , это оживление меню при наведении курсора мыши, мы будем использовать событие mousemove для функции, которая запускается при перемещении курсора мыши по меню. Также меню должно перемещаться быстрее, чем курсор мыши. Поэтому мы используем пропорцию(scrollableHeight — wrapperHeight) / wrapperHeight.

При наведении курсора на картинку в меню, высвечиваются подсказки, которые имеют следующий стиль:

И вносим код в тело функции enable, который будет перемещать подсказку и менять в ней текст:

Вот и все, наше простенькое меню готово, надеюсь у Вас все получится.

На главную