Главная страница » CSS » Создаем красивое меню при помощи CSS

Создаем красивое меню при помощи CSS

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

ul#navigation {

<pre> position: fixed;

margin: 0px;

padding:0px;

top: 0px;

right: 0px;

list-style: none;

z-index:999999;

width:721px;

}

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

ul#navigation li {

width: 103px;

display:inline;

float:left;

}

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

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

ul#navigation li a {

display: block;

float: left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color: #E7F2F9;

background-repeat: no-repeat;

background-position: 50% 10px;

border: 1px solid #BDDCEF;

text-decoration: none;

text-align: center;

padding-top: 80px;

}

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

ul#navigation li a {

display: block;

float:center;

margin-top: -2px; width: 100px; height: 25px;

background-color:#d8e96d;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #c2d832;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

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

ul#navigation .home a{

}

ul#navigation .about a {

}

ul#navigation .search a {

}

ul#navigation .podcasts a {

}

ul#navigation .rssfeed a {

}

ul#navigation .photos a {

}

ul#navigation .contact a {

}

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

ul#navigation li a:hover{

background-color:#CAE3F2;

}

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

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

text-shadow: 0 -1px 1px #fff;

}

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

<li><a href="">Главная</a></li>

<li><a href="">Поиск</a></li>

<li><a href="">Новости</a></li>

<li><a href="">Музыка</a></li>

<li><a href="">Контакты</a></li>

</ul>

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

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

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

На главную