Приветствую уважаемые посетители! Меня зовут Нужный Кирилл. Я вам сейчас покажу как можно сделать красивое меню. Данной статьёй я начинаю серию публикаций на данном сайте, и потому хочу для знакомства показать вам как быстро и легко можно создавать красивые панели меню для любого сайта.

Для начала создадим две папки images и JS. В папке images поместим наши 3 картинки которые мы будем использовать для меню (их можно скачать прямо отсюда, вызвав контекстное меню на следующих картинках):

И соответственно в JS будет JavaScript - код нашей менюшки и библиотеки jQuery.

Для начала нам нужно создать html разметку нашей менюшки. А также подключить JS и CSS:

Как обычно для создания меню будем использовать ненумерованные списки.

1.


2.

JQuery Navigation Bar


3.


Page #1
Page #2
Page #3
Page #4
Page #5
Page #6
Page #7
Page #8


4.

Ну что, теперь нам надо разобраться с внешним видом меню - с этим у нас справится CSS с вот таким содержанием:

/* Указываем внутренние и внешние отступы в 0px */

*{
padding:0;
margin:0;
}

/* Задаём различные параметры 
для ключевого тега body */

body {
background-image: url(images/bg.png); 
background-repeat: repeat-x;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5f5f5f;
}

/* Собственно говоря, это и есть наши стили 
для контейнера где всё и будет протекать */

#content_wrap {
margin: auto;
width: 850px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}

/* Мелкие стили исключительно 
для тегов h1 */

h1 {
color: #FF0000;
text-align: center;
margin-top: 25px;
}

/* Шапка */

#header {
float: left;
height: 94px;
width: 850px;
}

/* Ну а тут и стили для 
самого блока с меню */

#navigation {
float: left;
height: 62px;
width: 850px;
}

/* В стилях ненумерованного списка 
желательно указать внутренние и внешние отступы по 0 */

.nav_links ul {
margin: 0px;
padding: 0px;
}

/* Стили для тегов li (маленьких 
контейнеров) где лежат наши ссылки */

.nav_links li {
list-style:none;
display:block;
font-size: 14px;
float: left;
}

/* Ну и собственно стили для ссылок */

.nav_links a {
text-decoration: none;
color: #990000;
display: block;
height: 40px;
padding-top: 22px;
padding-right: 27px;
padding-left: 26px;
}

/*Состояние cсылки при наведении мыши*/

/* И кстати так просто мы 
это изменение не оставим =) */

.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/hover.png);
background-repeat: no-repeat;
}

/*Небольшая мелочь - класс для тега li*/

/* для отображения боковой полоски 
чтобы было видно что это прямоугольники*/ 

.withdiv {
background-image: url(images/divider.png);
background-repeat: no-repeat;
}

Теперь рассмотрим JS код, он простенький:

$(function() {
//Прозрачность (Opacity) набора кнопки к 100 %
$(".nav_links a").css("opacity","1.0");

//При наведении мыши 
$(".nav_links a").hover(function () {

//Набор Opacity к 30 %
$(this).stop().animate({
opacity: 0.3
}, "slow");
},
function () {

//набор Opacity к 100 %
$(this).stop().animate({
opacity: 1.0
}, "slow");
});
});

Вот таким нехитрым кодом мы за 5 минут создали очень красивое и динамичное навигационное меню. Ещё раз пример jQuery-меню.