Создание мега меню на CSS и jQuery

Данный урок расскажет Вам как создать красивое мега меню для Вашего сайта.

Мега меню (меню, с большими выпадающими подменю) становятся все более популярными среди вебмастеров. С помощью таких меню можно существенно повысить юзабилити Вашего сайта, так как можно сделать ссылку практически на каждую страницу. Вот несколько рекомендаций при планировки мега меню:

1. Лучшие меню содержат простые логические группы информации - пользователь легко может соориентироваться.

2. Постарайтесь делать такие меню простыми - избегайте сложных интерактивных эффектов.

3. Подменю в мега меню должно появляться не сразу, а примерно после 0.5 секунд наведеия мышкой. Таким образом не возникнет ситуации, когда пользователь при переходе с одного подменю на другое увидит их одновременно.

4. После того, как пользователь отвел мышку меню не должно сразу исчезать, только через некоторое время. Это пригодится в случае если пользователь случайно отвел мышку

Давайте приступим к созданию такого меню. Ничего сложного в этом нет.

Первым шагом у нас будет подключение в шапке документа всех необходимых файлов, а именно таблицы стилей, плагина jQuery, фреймворка jQuery и еще одной функции.

Обратите внимание на путь к файлам - важно при переносе файлов менять также пути к ним.

 <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<script src="js/jquery-1.js" type="text/javascript" charset="utf-8">
</script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
var megaConfig = {
interval: 500,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
$("li.mega").hoverIntent(megaConfig)

});
</script>

Вторым шагом является структура самого меню в HTML:

<ul id="menu">
<li>
<h2>
<a href="#">Home</a>
</h2>
<div>
Latest news, special deals, and more...
</div>
</li>
<li class="mega">
<h2>
<a href="#">Stuff for him</a>
</h2>
<div>
<h3>
Menswear
</h3>
<p>
<a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a>
</p>
<h3>
Gifts
</h3>
<p>
<a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
</p>
<h3>
Clearance!
</h3>
<p>
40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a>
</p><a href="#" class="more">More stuff for him...</a>
</div>
</li>
<li class="mega">
<h2>
<a href="#">Stuff for her</a>
</h2>
<div>
<h3>
Ladieswear
</h3>
<p>
<a href="#">Tops</a>, <a href="#">Pants</a>, <a href="#">Skirts</a>, <a href="#">T-shirts</a>, <a href="#">More...</a>
</p>
<h3>
Gifts
</h3>
<p>
<a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
</p>
<h3>
Shop Now for Mother's Day!
</h3>
<p>
Earlybird Mother's Day specials. <a href="#">Shop early, save on shipping!</a>
</p><a href="#" class="more">More stuff for her...</a>
</div>
</li>
<li class="mega">
<a href="#">Stuff for kids</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</li>
<li class="mega">
<a href="#">Stuff for pets</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</li>
</ul>

Ничего сложного в ней нет. Главное соблюдать иерархию заголков (<h2> <h3>). Также не стоит забывать о том, что все меню построено в виде неупорядоченого списка.

Открыв таблицу стилей и поэкспериментировав немного можно существенно изменить внешний вид меню и подстроить под любые нужды.

Спасибо за Ваше внимание! До новых встреч!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sitepoint.com
Перевел: Максим Шкурупий
Урок создан: 8 Июля 2009
Просмотров: 56161
Правила перепечатки


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

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

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

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

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

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

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

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

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

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

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 8 Июля 2009 19:22
    Sonic
    В Опере ссылки в выпадающем меню отображаются как подчеркнутый обычный текст. Я думал задержка это косяк а оказывается это фича. По ощущениям кажется что зависает меню. Может и не стоит делать задержку?
  • 9 Июля 2009 00:17
    Dmitro
    и мне кажеться, что задержка сдесь не умесна.... Ну а вооБщем не плоХо! пасИба за урок (=
  • 9 Июля 2009 06:38
    positive
    согласен, я, когда смотрел демо, уже начал думать, что меню не работает))) Задержку надо убрать.
  • 9 Июля 2009 11:30
    МаксимШкурупий
    Задержку легко убрать. interval: 500, timeout: 500 - искать здесь :)
  • 15 Июля 2009 19:06
    МихаилГорюнов
    fadeIn() fadeOut() slideDown() slideUp() к вашим услугам, а можно сделать ещё жоще. Последние уроки - пустые!
  • 16 Августа 2009 01:27
    СерП
    Максим, где Вы научились так хорошо верстать и вообще разбираться в верстке? Может подскажете ресурсы, на которых Вы черпаете знания?)) Я не новичёк, но все же))
  • 16 Августа 2009 01:28
    СерП
    ой не новичОк)))))) ошибка)
  • 23 Сентября 2009 13:18
    Sewi
    мне кажется что при наведении на меню мышкой и выпада самого меню проходит большая задержка=)
  • 6 Марта 2011 11:06
    KILLERS1994
    Подскажите пожалуйста, у меня для <ul id="menu"> не работает класс, на странице отображается чисто белым цветом, ничего не видно, а без класса отображается всё - весь маркированный список... Но не само меню=(
^ Наверх ^