В этом уроке я расскажу как можно сделать весьма легко и приятное на взгляд меню навигации для вашего сайта при помощи Photoshop, СSS и что бы это все оживить — jQuary. Для начала вам нужно сделать желаемые кнопки в photoshop или воспользоваться прилагаемыми к уроку образцами. И так приступим..

Для начала давайте просмотрим как все выглядит, или скачаем готовый образец:

 

Создаем новый файл HTML и называем его index.html.  Набираем (или копируем) представлен HTML код:

Внутри нашего index.html создаем отделение с id меню, это будет контейнером наших кнопок. Внутри отделения меню мы составляем неопределенный список. Дайте каждой кнопке ее собственный класс.

CSS

Сейчас мы стилизуем свое меню с CSS? внутри главных эффектов включаем stylesheet или вставляют эффекты для стилизующего блока.  Для начала снова установите дополнение и край, так что вы не получаете никаких проблем с default краями, которых вы не хотите иметь. Затем мы собираемся стилизовать наш контейнер меню.

И так мы хотим 1px пространства между кнопками. Overflow: hidden скроет каждый объект, который находиться  за пределами меню отделения. Position:relative — в данном случае это  затруднение IE, IE не признает избыток между кнопками.

Теперь присваиваем кнопкам желаемый фон:

jQuery

Мы не хотим, чтобы код, который обработан перед целым сайтом, был загружен, это бы замедлило бы момент загрузки, и  так мы проверяем, если документ готов.

Затем мы делаем скольжение function:

Активная функция оживит связь с высшим набором к -35px, к высшему значению 0px, и после того, оно вернется  обратно к -35px, 300 определяет время в миллисекундах, вы можете также изменить это в медленном, нормальном, или быстро. И потому что избыток отделения меню устанавливается к скрытому, вы только видите 35px кнопки.

Но если возникли проблемы при скольжении меню,а то есть при частом его проворачивании и не возвращении обратно, то можно попробовать следующее значение:

Надеюсь мой урок был вам полезен)

На главную