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

 

1.CSS, для начала нам надо определить свойства для нашего списка:

Мы позиционируем список в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому мы фиксируем позиционирование. Все отступы и границы мы выставляем на 0.
Теперь давайте взглянем на свойства элементов списка:

Если Вы хотите, чтобы список показывался горизонтально, необходимо установить значение display наinline. После этого элементы списка будут отображаться рядом друг с другом, а не под.

Теперь посмотрим на свойства ссылок в элементах списка:

Давайте теперь добавим круглые углы (не будут работать в Internet Explorer) и прозрачность:

Теперь добавим до нашего меню красивые иконки

При наведении мышки мы хотим, чтобы фоновый цвет менялся:

Еще добавим немного стиля нашим текстовым блокам:

2. HTML, в следующем шаге нам понадобиться неупорядоченный список с ссылками и текстом внутри элементов списка:

3. jQuery последним, но не менее важным этапом, это оживление нашего меню при помощи jQuery:

Скрипт устанавливает marginTop на -80 пикселей. Эффект для первого элемента должен продолжаться 300+150 миллисекунд и каждый следующий элемент должен исчезать с задержкой 150 миллисекунд. На этом наше мню готово, иконки для меню выбираем на свое усмотрение)

На главную