Мега меню с помощью CSS и jQuery

Исходники по просьбе автора урока не предоставляются. Но их легко можно сделать самому.

ШАГ 1. Фундамент – HTML

Для начала создаем неупорядоченный список. Поскольку мы будем использовать спрайты, каждая ссылка в элементе списка должна содержать уникальный класс.

<ul id="topnav">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="products">Products</a></li>
<li><a href="#" class="sale">Sale</a></li>
<li><a href="#" class="community">Community</a></li>
<li><a href="#" class="store">Store Locator</a></li>
</ul>

ШАГ 2. Украшаем фундамент – CSS

Поскольку наше меню будет позиционировано абсолютно, элементы списка должны иметь относительное позиционирование. Текста не должно быть на странице, поэтому мы ему придадим свойство text-indent -9999px. Далее мы заменим каждую ссылку изображением, указав путь к изображению в таблице стилей.

ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative; /*--Important--*/
}
ul#topnav li a {
float: left;
text-indent: -9999px; /*--Push text off of page--*/
height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; }
/*--Hover State--*/
ul#topnav a.home {
background: url(nav_home.png) no-repeat;
width: 78px;
}
ul#topnav a.products {
background: url(nav_products.png) no-repeat;
width: 117px;
}
ul#topnav a.sale {
background: url(nav_sale.png) no-repeat;
width: 124px;
}
ul#topnav a.community {
background: url(nav_community.png) no-repeat;
width: 124px;
}
ul#topnav a.store {
background: url(nav_store.png) no-repeat;
width: 141px;
}

ШАГ 3. Создаем мега подменю – HTML

Добавьте класс “sub” сразу после главной навигационной ссылки и поместите туда еще один неупорядоченный список.

<ul id="topnav">
<li><a href="#" class="home">Home</a></li>
<li>
<a href="#" class="products">Products</a>
<div class="sub">
<ul>
<li><h2><a href="#">Desktop</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Laptop</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Accessories</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Accessories</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
</div>
</li>
<li><a href="#" class="sale">Sale</a></li>
<li><a href="#" class="community">Community</a></li>
<li><a href="#" class="store">Store Locator</a></li>
</ul>

ШАГ 4. Украшение мега подменю – CSS

Для того, чтобы подменю прикреплялось к нижнему левому углу элемента родителя, задайте абсолютное позиционирование контейнеру .sub с координатами top 44px и left 0px.

ul#topnav li .sub {
position: absolute; /*--Important--*/
top: 44px; left: 0;
background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/
padding: 20px 20px 20px;
float: left;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
display: none; /*--Hidden for those with js turned off--*/
}
ul#topnav li .row { /*--If needed to break out into rows--*/
clear: both;
float: left;
width: 100%;
margin-bottom: 10px;
}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
}
ul#topnav .sub ul li {
width: 100%; /*--Override parent list item--*/
color: #fff;
}
ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/
padding: 0; margin: 0;
font-size: 1.3em;
font-weight: normal;
}
ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/
padding: 5px 0;
background-image: none;
color: #e8e000;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0; /*--Override text-indent from parent list item--*/
height: auto; /*--Override height from parent list item--*/
background: url(navlist_arrow.png) no-repeat 5px 12px;
padding: 7px 5px 7px 15px;
display: block;
text-decoration: none;
color: #fff;
}
ul#topnav .sub ul li a:hover {
color: #ddd;
background-position: 5px 12px ;/*--Override background position--*/
}

ШАГ 5. Настройка jQuery

Для начала укажите путь к фреймворку:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Также нам понадобиться плагин Hover Intent jQuery. Сохраните файл в ту же папку и также подключите его к документу.

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>

ШАГ 6. Запуск кода при загрузке страницы

После подключения необходимых скриптов, создайте новый тег <script> и начните строку используя событие $(document).ready.

$(document).ready(function() {
//Code goes here
});

ШАГ 7. Настройка эффектов – jQuery

При наведении мышки на один из элементов меню:

1. Найти .sub и затемнить его
2. Проверить на существование .row
3. Если .row существует, найти самый широкий ряд и создать .sub контейнер такой же ширины
4. Если  .row не существует, задать ширину контейнера .sub

Когда мышка будет убрана:

1. Найти .sub и затемнить
2. Спрятать .sub

Для всего этого нам понадобиться следующий код

//On Hover Over
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
(function($) {
//Function to calculate total width of all ul's
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() { //for each ul...
rowWidth = $(this).width(); //Add each ul's width together
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...

var biggestRow = 0;

$(this).find(".row").each(function() { //for each row...
$(this).calcSubWidth(); //Call function to calculate width of all ul's
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});

$(this).find(".sub").css({'width' :biggestRow}); //Set width
$(this).find(".row:last").css({'margin':'0'}); //Kill last row's margin

} else { //If row does not exist...

$(this).calcSubWidth(); //Call function to calculate width of all ul's
$(this).find(".sub").css({'width' : rowWidth}); //Set Width

}
}
//On Hover Out
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
$(this).hide(); //after fading, hide it
});
}

ШАГ 8. Пользовательские конфигурации

Ниже код возможных настроек конфигурации

//Set custom configurations
var config = {
sensitivity: 2, // значение = чувствительность (должно быть больше 1)
interval: 100, // значение = интервал задержки при открытии
over: megaHoverOver, // функция возврата (обязательно)
timeout: 500, // значение = интервал задержки при открытии при закрытии
out: megaHoverOut // function = функция возврата (обязательно)
};

$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations

ЗАКЛЮЧЕНИЕ

У нас получилось очень красивое и функциональное мега меню!! Кроме этого, его очень легко подстроить под свои нужды!

Немного примеров мегаменю:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sohtanaka.com
Перевел: Максим Шкурупий
Урок создан: 5 Ноября 2009
Просмотров: 65389
Правила перепечатки


5 последних уроков рубрики "Для сайта"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Ноября 2009 19:29
    delphi
    очень интересно, а как обстаят дела с индексацией такого меню Поисковыми ситемами ?! Подозреваю что туггго
  • 5 Ноября 2009 20:44
    Виктор
    delphi Чего туго то? Ссылки все в формате HTML, что и нужно поисковикам, и что используется на миллионах сайтов. Чего тут может быть туго?
  • 5 Ноября 2009 21:07
    НеБот
    Молодцы, классная менюха. Насчёт индексации - всё чики-пуки.
  • 6 Ноября 2009 05:37
    wOrker
    Задержка затухания великовата, следующий выпадающий список накладывается на предыдущий, а вообщем менюшка класная =)
  • 6 Ноября 2009 18:01
    neverfan
    А исходнички!??! :'(
  • 7 Ноября 2009 00:32
    МаксимШкурупий
    Исходники по просьбе автора урока не предоставляются. Но их легко можно сделать самому.
  • 23 Ноября 2009 01:17
    Alexxhub
    большая просьба выложите пожалуйста сам пакет jQuery 1.3.1 т.к. работаю на локальном компе, уже сам замучался искать его, а так урок классный
  • 23 Ноября 2009 09:50
    Сергей_Патин
    Можете на официальном сайте скачать http://jquery.com/ Или в других уроках по jQuery в исходниках.
  • 26 Ноября 2009 15:48
    gerg
    Очень хороший и полезный урок! но у меня ничего не работает всё по инструкции сделал может кто-нибудь исходник скинет?! george_george6@mail.ru
  • 26 Ноября 2009 16:07
    Сергей_Патин
    Правой кнопкой в демо щелкните и нажмите "Показать исходный код" - вот вам и исходник.
  • 30 Ноября 2009 03:47
    Koto
    Люди добрые помогите пожалуйста: текст контента - который ниже меню, при открытом саб меню - остаётся поверх меню. Как сделать так что бы текст оставался под пеню? Заранее благодарен.
  • 4 Декабря 2009 16:02
    Patriott
    to Koto z-index не помогает? <div class="demo" style="position: relative; z-index: 1"> чем выше значение z-index, тем выще приоритет у блока.
    • 4 Августа 2011 11:02
      Xamle
      Спасибо!!! очень сильно помог!
    • 4 Августа 2011 11:26
      Xamle
      блин в IE даже в 8 версии не работает, может есть какой нибудь другой способ помогите пожалуйста.
  • 5 Декабря 2009 17:39
    Леша
    люди плизз скиньте исходники потому что не получается у меня сделать правильно это меню balu2385@mail.ru спасибо заранее
  • 6 Декабря 2009 12:52
    Леша
    Здравствуйте, скажите плиз это все в одну страницу надо вставлять или что-то в ccs надо, скажите плизз
  • 9 Декабря 2009 14:08
    Жека
    Раньше считал немного бесполезной такую менюшку, - большая громоздкая. Прошло чуток больше года, мой сайт разросся и понял что без такой вот полезной и удобной штуки не обойтись уже. Пасиб за урок.
  • 14 Декабря 2009 16:01
    chief
    Не пашет =( Если у кого работает - скиньте плиз исходник на chief.dimon@list.ru С уважением, Дмитрий М.
  • 27 Декабря 2009 09:51
    Леша
    Не работает, скиньте мне тоже плиззз исходники!!! Balu2385@mail.ru Спасибо!!!
  • 12 Января 2010 19:04
    Сергей
    кому нужны исходники здесь . ( Блог о wordpress кстати ) http://wordpress.realms.biz/logo/mega menu.rar
  • 12 Января 2010 19:07
    Сергей
    Прошу прошения, нижняя ссылка не работает. качайте с этой http://wordpress.realms.biz/logo/mega_menu.zip
  • 15 Февраля 2010 04:11
    disslike
    не выходит( ссылка с предыдущего комента не открывается отправьте плиз исходник disslike@xakep.ru
  • 24 Февраля 2010 08:24
    Mignon
    плиззз скиньте исходник на мейл mignon@ngs.ru ... так давно искал такую менюшку... буду очень благодарен !:)
  • 12 Марта 2010 21:34
    nikprim
    Киньте исходник на мыло wow-pro-support@mail.ru
  • 21 Апреля 2010 23:53
    cucciola
    Пожалуйста, скиньте исходник, я чайник в этом деле, а данное меню мне нужно по зарез! :( sve77@mail.ru
  • 14 Мая 2010 13:51
    Deprime
    Афтар как то не особо следит за коментами в темах. Исходников нету, и самое главное - пример тугореолизуем без них. Ссылки на плагин для jQ тоже нет. Кроме того в примере юзают спрайты - а как же тогда без соурсов то быть =(
  • 1 Августа 2010 20:29
    sergei
    скиньте меню такое пожалуйста на адрес sereghaa@mail.ru. Если есть оба варианта, как горизонтальное, так и вертикальное
  • 13 Сентября 2010 11:01
    Евгений
    Чтобы получить исходники сделайте следующее: 1. Зайдите в демо через оперу 2. Меню - фаил - сохранить как - html Фаил с изображениеями. Указываете в какую папку и все. Все картинки скрипты и css будут у вас в этой папке.
    • 15 Ноября 2011 00:57
      berez
      спасибо тезка!) выручил))
  • 14 Марта 2011 10:22
    CronuS
    Менюха просто супер! И такое поле для импровизации! Спасибо. =))
    • 29 Августа 2011 01:54
      epifantsev
      Подскажите, кто силет в JQuery, почему при обновлении страницы меню каждый раз раскрывается. И очень часто даже если оно закрыто, то на странице активны (невидимые) пункты этого меню. Мышкой по экрану водишь и видишь, как меняются ссылки.
  • 15 Ноября 2011 00:55
    berez
    ниче не получается..... исходники нужны)
  • 24 Мая 2012 16:20
    mckmck
    кто может скинуть исходники на mck2000@yandex.ru
  • 20 Декабря 2012 16:01
    Cenhan
    Люди помогите пожалуйста разобраться! Меню сделал по инструкции, всё работает только sub меню почему то выдвигается в одну колонку, не могу понять в каком коде нужно изменить чтоб каждый подпункт был в разной колонке.
  • 12 Февраля 2013 12:05
    Nicolas313
    Меню правда классное кто может, у кого еще сохранились исходники, киньте пожалуйста nicolas313@yandex.ru Спасибо.. заранее
  • 19 Февраля 2013 17:52
    SSVs
    Классная менюшка... Исходников нет. А жаль!
  • 5 Июня 2013 13:57
    ya_polyak
    Где исходник?? скинте пожалуйста очень нужен!!! Пытался повторить нечего не вышло. egor.kish@bk.ru
  • 11 Июня 2013 10:00
    polydnica
    Ребята, киньте и мне исходнички плз. polydnica@yandex.ru
  • 4 Августа 2013 16:44
    demo71
    Подскажите плиз. Как выравнять это меню по центру страницы.
  • 24 Февраля 2014 20:45
    den_az
    $("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default в этой строчке слово (default) должно относиться к комментариям, а не к следующей строчке кода, при копировании с сайта слово может перенестись на следующую строку, у кого не выходит настроить, попробуйте глянуть на данную строку и исправить, надеюсь, вам поможет. $("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations
^ Наверх ^