Необычное меню на jQuery

Необычное меню на jQuery

Сегодня речь пойдет о создании меню как на главной странице этого сайта. Даже не совсем меню, хотя его можно использовать и как меню.

Итак, начнем создавать наше меню.

1. Для начала подключаем jQuery. Для этого между тегами head пишем:

<script type="text/javascript" src="jquery. tools. min. js"></script>

<script>

$(function() {

$("#menu").tabs("div. description", {event:'mouseover'});

});

</script>

Обратите внимание на эту строчку: $("#menu").tabs("div. description", {event:'mouseover'});

Если вы будете использовать свои стили - не забудьте указать здесь идентификатор блока где будут находится элементы меню (#menu) и блок для вывода информации (div. description)

2. Создаем html-каркас меню:

Блок с вкладками:

<div id="menu">

<li><a href="#">Пункт 1</a></li>

<li><a href="#">Пункт 2</a></li>

<li><a href="#">Пункт 3</a></li>

<li><a href="#">Пункт 4</a></li>

</div>

Блок с информацией:

<div id="panes">

<div class="description" id="1">

<p>Текст в 1 вкладке</p>

</div>

<div class="description" id="2">

<p>Текст в 2 вкладке</p>

</div>

<div class="description" id="3">

<p>Текст в 3 вкладке</p>

</div>

<div class="description" id="4">

<p>Текст в 4 вкладке</p>

</div>

</div>

Для каждой вкладки соответствует свой див с id, в порядке возрастания. Т. е. если добавить 5-ю вкладку - нужно будет создать для нее див с классом description и id=5

3. Подключаем стили:

#menu li { color: #003; display: inline; margin: 5px; padding: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999;

}

#menu li a { color: #003; text-decoration: none;

} div. description { display:none; margin-top:17px;

}

Стили можно использовать свои, что бы наше меню вписывалось в дизайн сайта.


Карта сайта


Информационный сайт Webavtocat.ru