Меню навигации в стиле Lava-Lamp
Продолжая серию статей о различных видах меню для сайта, сегодня хочу обратить внимание всех страждущих, на отличное горизонтальное меню навигации, выполненное в стиле Lava-Lamp. Что это за стиль такой, расписывать не буду, кому вдруг станет интересно, могут почитать о нем у достопочтенных буржуинов: lava-lamp style.
Мы же с Вами рассмотрим сам способ создания такого меню, как говориться, разложим все по полочкам.
Прежде чем начать описание структуры меню, пожалуй не лишним будет взглянуть на него в действии:
Сразу хочу сказать, что лучше всего такое меню смотрится в браузерах Сhrome и Firefox.
Для построения меню мы будем использовать всю мощь библиотеки JavaScript jQuery . Оформим внешний вид меню с помощью CSS.
Шаг 1 HTML
Прежде всего нам необходимо в нашем документе создать неупорядоченный список и подключить файлы JQuery находящиеся на стороннем сервере Google. А также файл jquery.spasticNav.js, предварительно загрузив его в папку с javascript.
<ul id="nav"> <li id="selected"><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> |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.spasticNav.js"></script> <script type="text/javascript"> $('#nav').spasticNav(); </script> |
Обратите внимание, как мы установили идентификатор «selected» на главную страницу. Это стандартный для большинства сайтов способ, что позволяет определить стиль для основного раздела меню.
Далее, мы должны подключить к работе(активировать) плагин jQuery. Для этого нам понадобиться небольшой скрипт:
<script type="text/javascript"> $('#nav').spasticNav(); </script> |
Для выполнения всего сценария мы создали новый файл и назвали его jquery.spasticNav.js подключив в последствии к документу html.
Шаг 2 CSS
Не углубляясь во все подробности настроек jQuery плагина, в исходниках он присутствует во всей красе, с некоторыми комментариями, тихо-мирно перейдем к формированию стилей нашего меню с помощью CSS. Для оформления меню предварительно был создан файл style.css и подключен к нашему документу, в разделе между тегами <head></head>:
<link href="css/style.css" rel="stylesheet" type="text/css"/> |
Каких-то особых настроек не требуется, разве что понадобиться изменить размеры и цветовую гамму самого меню. Для этого можете поэкспериментировать с отдельными значениями свойств в таблице стилей:
#blob { background: #0b2b61; border-right: 1px solid #0059ec; border-left: 1px solid #0059ec; position: absolute; z-index: 1; top: 0; background: -moz-linear-gradient(top, #0b2b61, #1153c0); background: -ms-linear-gradient(top, #0b2b61, #1153c0); background: -o-linear-gradient(top, #0b2b61, #1153c0); background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0)); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 2px 3px 10px #011331; -moz-box-shadow: 2px 3px 10px #011331; -webkit-box-shadow: 2px 3px 10px #011331; } #nav { position: relative; background: #292929; display: inline-block; margin: 0; padding: 0; } #nav li { float: left; list-style: none; border-right: 1px solid #4a4a4a; border-left: 1px solid black; margin: 0; padding: 0; } #nav li a { color: #e3e3e3; z-index: 2; position: relative; cursor: pointer; float: left; font-size: 18px; font-family: helvetica, arial, sans-serif; text-decoration: none; padding: 15px 45px; width: 100%; } |
Размер меню меняется в зависимости от установок размеров шрифта в параметре font-size: 30px; и значения свойства padding: 30px 45px;, устанавливающего величину поля вокруг элемента. Никто не мешает вам экспериментировать и с параметрами цветовой палитры.
Вот и все наше замечательное меню навигации готово. В статье показан лишь небольшой пример создания функционального и красивого меню для сайта. Тихо смею надеяться, что эта статья поможет Вам в разработке своего сайта.
Источник: net.tutsplus.com
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Как сделать это меню вертикальным? оч нужно
в ишаке(IE) края не закруляются((((( печально .htc тоже не спасает
Все в IE закругляется. Спасибо за проделанную работу! =)