Создание мега меню на 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
Просмотров: 55825
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 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"> не работает класс, на странице отображается чисто белым цветом, ничего не видно, а без класса отображается всё - весь маркированный список... Но не само меню=(
^ Наверх ^