Создаем красивое меню при помощи CSS
Меню сайта всегда что то оригинальное, и помогает осуществить навигацию пользователям по сайту, видел много интересных меню на сайтах, но всегда хочется чего то новенького и стильного, по этому хочу рассказать как сделать простое меню при помощи различных эффектов, которое отлично дополнит ваш сайт, и сделает его более уникальным, это будет полезно для начинающих мастеров так и для более опытных. Идея заключается в том, что меню частично скрыто, а при наведении курсора мышки оно плавно выскальзывает..
1.CSS, для начала нам надо определить свойства для нашего списка:
1 2 3 4 5 6 7 8 9 10 |
ul#navigation { <pre> position: fixed; margin: 0px; padding:0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } |
Мы позиционируем список в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому мы фиксируем позиционирование. Все отступы и границы мы выставляем на 0.
Теперь давайте взглянем на свойства элементов списка:
1 2 3 4 5 |
ul#navigation li { width: 103px; display:inline; float:left; } |
Если Вы хотите, чтобы список показывался горизонтально, необходимо установить значение display наinline. После этого элементы списка будут отображаться рядом друг с другом, а не под.
Теперь посмотрим на свойства ссылок в элементах списка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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) и прозрачность:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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); } |
Теперь добавим до нашего меню красивые иконки
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
ul#navigation .home a{ background-image: url(../images/home.png); } ul#navigation .about a { background-image: url(../images/id_card.png); } ul#navigation .search a { background-image: url(../images/search.png); } ul#navigation .podcasts a { background-image: url(../images/ipod.png); } ul#navigation .rssfeed a { background-image: url(../images/rss.png); } ul#navigation .photos a { background-image: url(../images/camera.png); } ul#navigation .contact a { background-image: url(../images/mail.png); } |
При наведении мышки мы хотим, чтобы фоновый цвет менялся:
1 2 3 |
ul#navigation li a:hover{ background-color:#CAE3F2; } |
Еще добавим немного стиля нашим текстовым блокам:
1 2 3 4 5 6 7 8 9 10 11 |
ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; } |
2. HTML, в следующем шаге нам понадобиться неупорядоченный список с ссылками и текстом внутри элементов списка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul id="navigation"> <li><a href=""><span>Главная</span></a></li> <li><a href=""><span>О нас</span></a></li> <li><a href=""><span>Поиск</span></a></li> <li><a href=""><span>Фото</span></a></li> <li><a href=""><span>Новости</span></a></li> <li><a href=""><span>Музыка</span></a></li> <li><a href=""><span>Контакты</span></a></li> </ul> |
3. jQuery последним, но не менее важным этапом, это оживление нашего меню при помощи jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(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 миллисекунд. На этом наше мню готово, иконки для меню выбираем на свое усмотрение)
Читайте также:
Опубликовал Cooper 16.07.2011 в 06:48, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |