Главная » Уроки » Меню навигации в стиле Lava-Lamp

Меню навигации в стиле Lava-Lamp

Продолжая серию статей о различных видах для сайта, сегодня хочу обратить внимание всех страждущих, на отличное горизонтальное навигации, выполненное в стиле Lava-Lamp. Что это за стиль такой, расписывать не буду, кому вдруг станет интересно, могут почитать о нем у достопочтенных буржуинов: lava-lamp style.
Мы же с Вами рассмотрим сам способ создания такого меню, как говориться, разложим все по полочкам.
 
Lava-Lamp меню
 
Прежде чем начать описание структуры меню, пожалуй не лишним будет взглянуть на него в действии:

Сразу хочу сказать, что лучше всего такое меню смотрится в браузерах Сhrome и Firefox.

Для построения меню мы будем использовать всю мощь библиотеки JavaScript jQuery . Оформим внешний вид меню с помощью .
 

Шаг 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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

3 комментария
  1. Как сделать это меню вертикальным? оч нужно

    Ответить
  2. bert:

    в ишаке(IE) края не закруляются((((( печально .htc тоже не спасает

    Ответить
  3. Максим:

    Все в IE закругляется. Спасибо за проделанную работу! =)

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru