Многоуровневое меню для сайта

Сегодня мы создадим очередное привлекательное меню для сайта, сделанное в основном с помощью CSS и немного JavaScript. Основную нагрузку возьмет на себя таблица стилей CSS. Принцип данного меню заключается в том, что при выборе определенного пункта меню появляются соответствующие подпункты к этому разделу, и появятся они вместо главного меню, тем самым экономя место на сайте. Чтобы вернуться к главным пунктам меню достаточно всего-лишь навести курсор мыши на указатель возврата и вы вновь увидите главные пункты, чтобы окончательно вернуться к корневой уровень меню достаточно выбрать первый пункт меню в режиме возврата.

Для начала скачайте исходный файл к данному меню.

Шаг 1. HTML

Теперь займемся HTML страницей с данным меню. Сначала подключим необходимые плагины и таблицы стилей CSS для работы меню, подключим их между тегами :

<link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel='stylesheet' type='text/css' href='css/elusive-webfont.css'> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="../file/js/fusion.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="../file/js/modernizr.js"></script>
Во-вторых разметим нашу страницу под меню, разметка достаточно проста и не должна создать трудности для вас: <!-- Контейнер для меню --> <div class="main"> <!-- Пункты меню --> <nav class="navigation"> <!-- Первый пункт меню, который мы будем использовать, чтобы вернуться к корневой уровень меню --> <a href="#" class="active home"> <span class="icon"><i class="icon-home"></i></span> <span class="content">Home</span> </a> <!-- Второй пункт меню с подпунктами --> <a href="#app_nav" class="green"> <span class="icon"><i class="icon-website"></i></span> <span class="content">Apps</span> </a> <!-- Указатель возврата к главному меню --> <div class="hide second_level" id="app_nav"> <a href="#" class="back"> <i class="icon-chevron-left"></i> </a> <!-- Подпункты второго пункта меню --> <div class="content"> <a href="#"> <span class="content">Popular Apps</span> </a> <a href="#"> <span class="content">Most Viewed Apps</span> </a> ... </div> ... </nav> </div>

Шаг 2. CSS

Поскольку основную анимацию выполняет JS, то таблицу стилей мы рассматривать не будем, вы сможете найти ее в исходном файле.

Шаг 3. JavaScript

Теперь настало время для JavaScript. Инициализируем необходимый плагин с помощью следующего скрипта:

<script> $(window).load(function () { $(".navigation > a").click(function() { if (!$(this).hasClass("active")) { $(".navigation").unbind('mouseleave'); $(".navigation .second_level").removeClass("animated fadeInDown").hide(); var el = $(this); el.addClass("hover"); $(".navigation > a.active").fadeOut("fast", function() { var prev = $(this) prev.removeClass('active'); container_pos = $(".navigation").offset() button_pos = el.offset() el.animate({ top: container_pos.top - button_pos.top }, 500, function() { el.addClass("active").removeClass("hover").css("top", 0); if (el.attr("href").length > 1 && el.attr("href") != "#") { $(".navigation > a:not(.active)").removeClass("fadeInLeft animated").hide(); $(el.attr("href")).addClass("fadeInDown animated").show(); } else { prev.addClass("fadeInLeft animated").fadeIn("fast"); } }); }); } }); $(".navigation .back").hover( function () { var el = $(this) $(".navigation .second_level").removeClass("animated fadeInDown").hide(); $(".navigation > a:not(.active)").addClass("fadeInLeft animated").show() $(".navigation").hover(function() {}, function() { $(this).unbind('mouseleave'); $(".navigation > a:visible:not(.active)").hide().removeClass("fadeInLeft animated"); el.closest(".second_level").addClass("animated fadeInDown").show(); }); }); }); </script>
На этом все, более подробно данное меню можно разобрать в прилагаемом исходнике.

демо
скачать
источник