Мега меню с помощью 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
Просмотров: 65898
Правила перепечатки


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

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 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
^ Наверх ^