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

66

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

Перш ніж почати опис структури меню, мабуть не зайвим буде поглянути на нього в дії:

ДемоСкачать

Відразу хочу сказати, що найкраще таке меню виглядає в браузерах С?гоме і 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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
<script type="text/javascript" src="js/jquery.spasticNav.js">
<script type="text/javascript">
$('#nav').spasticNav();

$(‘#nav’).spasticNav();

Зверніть увагу, як ми встановили ідентифікатор «selected» на головну сторінку. Це стандартний для більшості сайтів спосіб, що дозволяє визначити стиль для основного розділу меню.
Далі, ми повинні підключити до роботи(активувати) плагін jQuery. Для цього нам знадобитися невеликий скрипт:

<script type="text/javascript">
$('#nav').spasticNav();
</script>

$(‘#nav’).spasticNav();

Для виконання всього сценарію ми створили новий файл і назвали його jquery.spasticNav.js підключивши надалі до документа html.

Крок 2 CSS

Не заглиблюючись у всі подробиці налаштувань jQuery плагін, в исходниках він присутній у всій красі, з деякими коментарями, тихо-мирно перейдемо до формування стилів нашого меню за допомогою CSS. Для оформлення меню попередньо був створений файл style.css і підключений до нашого документу, в розділі між тегами :

<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%;
}

#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 та поділіться посиланням на запис в своїх соціальних мережах: