Здравствуйте, дорогие друзья! Сегодня мы будем делать очередное выпадающее меню на jQuery с помощью, но на этот раз оно будет выполнено с помощью особого плагина Superfish. Для начала, посмотрите демонстрацию и скачайте исходники файлов, которые мы будем использовать в ходе данного урока:
Шаг 1. HTML-конструкция меню.
Для начала, создадим html-каркас, который будет служить основой для нашего будущего меню. Ниже я привожу пример такого каркаса:
HTML:
<ul class="sf-menu">
<li class="current">
<a href="#a">Профиль</a>
<ul>
<li>
<a href="#">Мои сообщения</a>
<ul>
<li><a href="#">Входящие</a></li>
<li><a href="#">Отправленные</a></li>
<li><a href="#">Черновик</a></li>
</ul>
</li>
<li class="current">
<a href="#ab">Мои друзья</a>
<ul>
<li class="current">
<a href="#">OleGG!</a></li>
<li> <a href="#aba">D(o_0)B</a>
</li>
</ul>
</li>
<li>
<a href="#aa">Выйти</a>
</li>
</ul>
</li>
<li>
<a href="#">Блог</a>
</li>
<li>
<a href="#">Услуги</a>
<ul>
<li>
<a href="#">Верстка</a>
<ul>
<li> <a href="#">Заказать!</a>
</li>
</ul>
</li>
<li>
<a href="#">Оформление</a>
<ul>
<li>
<a href="#">Заказать!</a>
</li>
</ul>
</li>
<li>
<a href="#">SEO</a>
<ul>
<li> <a href="#">Заказать!</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">О нас</a>
</li>
</ul>
Шаг 2. Дизайн меню
Отлично! Теперь те стили, которые мы привязывали к объектам списков, мы пропишем между тегами <head> и </head> Ниже я разместил примерный код стилей вместе с комментариями к нему, которые будут применяться в стилизации этого меню:
CSS:
<style type="text/css">
/*** НЕОБХОДИМЫЕ СТИЛИ ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em;
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em;
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em;
top: 0;
}
/*** СКИН ДЕМО ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited {
color: #13a;
}
.sf-menu li {
background: #BDD2FF;
}
.sf-menu li li {
background: #AABDE6;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
/*** СТРЕЛКИ **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px;
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* ТОЛЬКО ДЛЯ IE6 */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('images/arrows-ffffff.png') no-repeat -10px -100px;
}
a > .sf-sub-indicator {
top: .8em;
background-position: 0 -100px;
}
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px;
}
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0;
}
/*** ТЕНИ ДЛЯ ВСЕХ БРАУЗЕРОВ, КРОМЕ IE6 ***/
.sf-shadow ul {
background: url('images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
</style>
Шаг 3. Прикрутка фреймворка jQuery
Теперь главное не забыть привязать основной фреймворк jQuery, поскольку, если мы вставим его позже, наше меню будет некорректно отображаться. Выглядеть будет это следующим образом:
<script type="text/javascript" src="js/jquery.js"></script>
Шаг 4. Вставка необходимых JavaScript'ов
Далее мы заставим наше меню плавно выдвигаться и придадим некоторые эффекты выпадающим элементам меню. Чтобы не размещать здесь длинные javascript-коды, я вынес отдельно файл hoverIntent.js, который будет отвечать за плавное появление пунктов меню, и superfish.js, отвечающий за работу самого плагина Superfish! Эти файлы я выложил в исходниках урока. Они находятся в папке – JS. Скачивайте и пользуйтесь! Теперь нам нужно привязать данные файлы к нашему документу, где будет находиться меню. Делаем это, вставляя следующий код между тегами <head> и </head>:
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
Шаг 5. jQuery-доработки
Наконец, завершающий и важнейший для работы меню этап. Для правильного отображения мы должны между тегами <head> и </head> прописать следующий небольшой javascript-код:
<script type="text/javascript">
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
Заключение.
Ура, мы сделали это! У меня на этом все. Надеюсь, Вам урок понравился, жду Ваших комментариев! До новых встреч, друзья! С уважением Ваш jQuery-проводник – М. К. Wink