Веб-дизайнеру
Веб-разработчику
Дополнительно
Плавающая панель навигации страниц сайта
Скачать
Демо
Сегодня мы создадим CSS3 меню навигации по сайту. Чем-то оно похоже на горизонтальное выпадающее меню на CSS3, которые мы создавали в другой статье. Но только в данном случае, это будет плавающая панель, с раздвижные выпадающим меню и фиксированным положением в нижней части экрана. Кроме того, мы будем использовать функции JQuery, чтобы создать некоторые красивые эффекты. Ещё пример выдвигающегося меню, и с красивыми эффектами, читайте в статье “Выдвигающееся меню навигации на JQuery”. Вообще, плавающей панели стоит уделить важное внимание, так как в ней можно разместить все, что угодно, не только навигацию, но и рекламу, ссылки на статьи и так далее.
Конечный результат Вы можете увидеть, пройдя по ссылке демо (расположена выше). Итак, приступим!
Структура HTML
Это наша html конструкция. Пункты меню будут созданы с помощью списков ul.
|
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 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Плавающая панель навигации страниц сайта | Vladmaxi.net</title> <link rel="stylesheet" href="/web-developer/jquery/css/layout.css" type="text/css" media="screen"> <link rel="stylesheet" href="/web-developer/jquery/css/menu.css" type="text/css" media="screen"> <!--[if lt IE 9]> <script src="/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="/web-developer/jquery/js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="/web-developer/jquery/js/script.js"></script> </head> <body> <div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a> <ul id="nav"> <li><a href="#"><img src="images/t1.png" /> Главная</a></li> <li> <ul id="1"> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 1</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 2</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 3</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 4</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 5</a></li> </ul> <a href="#" class="sub" tabindex="1"><img src="images/t2.png" />Видео</a> </li> <li> <ul id="2"> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 6</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 7</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 8</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 9</a></li> <li><a href="#"><img src="/web-developer/jquery/images/empty.gif" />Ссылка 10</a></li> </ul> <a href="#" class="sub" tabindex="1"><img src="images/t3.png" />Заметки</a> </li> <li><a href="#"><img src="images/t4.png" />RSS</a></li> </ul> </div> <footer></footer> </body> </html> |
Здесь мы подключаем необходимые скрипты, стили и прописываем всю структуру страницы. Навигация по сайту, каждый пункт меню, включает в себя также иконки, которые мы прописали.
Стили CSS
Сейчас мы имеем не очень красивое меню, поэтому естественно зададим стили.
|
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
.menuContent { background-color:#FFF; background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd); background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd)); border:1px solid #C7C7C7; bottom: 70px; left: 300px; padding: 0 15px 5px; position: fixed; width:520px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; } .menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top , #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; } .menuContent a.slider img { padding-bottom: 3px; } #nav { list-style: none; } #nav li { display: inline-block; margin: 10px; } #nav li a { border: 1px solid #ccc; color:#858585; display: block; padding: 5px 10px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; } #nav li a:hover, #nav li a.active { background-color:#ddd; } #nav li ul { display:none; } #nav li ul li { margin: 5px 0; display: block; } #nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; } #nav ul li a img { background: url("../images/bb.png") no-repeat; border-width:0px; height:16px; line-height:22px; margin-right:5px; vertical-align:middle; width:16px; } |
Это демонстрационный стили. Вы можете изменить их, и доработать в зависимости от Вашего сайта и цели использования этой плавающей панели.
JavaScript
На данном этапе наша панель не имеет никакой анимации, поэтому с помощью jQuery “оживим” ей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(function(){ $('.slider').click(function () { $('#nav').slideToggle(300); var img = $(this).find('img'); if ($(img).attr('id') == 'bot') { $(img).attr('src', 'images/arrow_top.png'); $(img).attr('id', 'top'); } else { $(img).attr('src', 'images/arrow_bottom.png'); $(img).attr('id', 'bot'); } }); $('.sub').click(function () { var cur = $(this).prev(); $('#nav li ul').each(function() { if ($(this)[0] != $(cur)[0]) $(this).slideUp(300); }); $(cur).slideToggle(300); }); }); |
Что мы сделали? Создали эффект плавно выезжающих ссылок меню, а также самой панели.
На этом все. Мы создали простое, но практичное раздвижное меню.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
