Создание трехуровневого адаптивного выпадающего меню

Создание трехуровневого адаптивного выпадающего меню

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

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

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

В данном адаптивном выпадающем навигационном меню используется такой плагин: jquery-v1.7.1.js

HTML разметка

 <div class="container">
 <div class="navbar navbar-static-top">
 <div class="navigation">
 <nav>
 <ul class="nav topnav bold">
 <li class="dropdown active">
 <a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Home <i class="icon-angle-down"></i></a>
 <ul class="dropdown-menu bold">
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Homepage 2</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Homepage 3</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Homepage 4</a></li>
 </ul>
 </li>
 <li class="dropdown">
 <a href="#">Features <i class="icon-angle-down"></i></a>
 <ul style="display: none;" class="dropdown-menu bold">
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Typography</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Components</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Icons</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Icon variations</a></li>
 <li class="dropdown"><a href="#">4 Sliders <i class="icon-angle-right"></i></a>
 <ul style="display: none;" class="dropdown-menu sub-menu-level1 bold">
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Lush slider</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Layer slider</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html"> Flexslider</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Flexslider</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li class="dropdown">
 <a href="#">Pages <i class="icon-angle-down"></i></a>
 <ul class="dropdown-menu bold">
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">About us</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Pricing boxes</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">404</a></li>
 </ul>
 </li>
 <li class="dropdown">
 <a href="#">Portfolio <i class="icon-angle-down"></i></a>
 <ul style="display: none;" class="dropdown-menu bold">
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Portfolio 2 columns</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Portfolio 3 columns</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Portfolio 4 columns</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Portfolio detail</a></li>
 </ul>
 </li>
 <li class="dropdown">
 <a href="#">Blog <i class="icon-angle-down"></i></a>
 <ul class="dropdown-menu bold">
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Blog left sidebar</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Blog right sidebar</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Post left sidebar</a></li>
 <li><a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Post right sidebar</a></li>
 </ul>
 </li>
 <li>
 <a href="http://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3.html">Contact </a>
 </li>
 </ul>
 </nav>
 </div>
 <!-- end navigation -->
 </div>
  </div>
  </div>
 </div>
</header>

CSS

.bold {
 font-weight:;
}
 
/* --- header -- */
header{
 background: url(../img/header-pattern-.png) repeat;
 margin:0;
 padding:0 0 20px;
 position:relative;
 z-index:0;
}
 
/* --- menu --- */
 
header .navigation {
 float:right;
}
 
header ul.nav li {
 border:none;
 margin:0;
}
 
header ul.nav li a { 
 border:none;
 font-weight:;
}
header ul.nav li ul {
 z-index:0;
 margin-top:20px;
}
header ul.nav li ul li ul {
 margin:1px 0 0 1px;
}
header ul.nav li a i { 
 color:#fff;
}
.container,
.navbar-static-top .container{
  width: px;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}
 
.container:after {
  clear: both;
}
 
.dropdown {
  position: relative;
}
.nav {
  margin-bottom: 20px;
  margin-left: 0;
  list-style: none;
}
 
.nav > li > a {
  display: block;
}
 
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
 
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
  cursor: pointer;
}
 
.navbar .nav a:hover {
 background:none;
}
 
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
 font-weight:;
}
 
.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus {
 background:none;
 outline:0;
 font-weight:;
}
 
.navbar .nav li .dropdown-menu {
 z-index:0;
}
.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}
.navbar .nav > li {
  float: left;
}
.navbar .nav > li > a {
  float: none;
  padding: 10px 15px 10px;
  color: #;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #;
  text-decoration: none;
  background-color: transparent;
}
 
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.);
 -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.);
 box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.);
}
 
.navbar .nav > li > .dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
 
.navbar .nav > li > .dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}
 
.dropdown-menu {
  *border-right-width: 0;
  *border-bottom-width: 0;
  -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 
}
.dropdown-menu .dropdown i {
 position:absolute;
 right:0;
 margin-top:3px;
 padding-left:20px;
}
 
.dropdown-submenu > .dropdown-menu {
  -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}
 
.navbar .nav {
  border-right:none;
  border-left:none;
}
 
.navbar .nav > li > a {
  float: none;
  font-size:13px;
  margin-left:10px;
  margin-right:0;
  text-decoration: none;
  text-shadow: none;
  border-right:none;
  border-left:none;
  color: #fff;
  border:2px solid transparent;
  padding:4px 10px 4px 10px;
 
  background-image: none;
 background: none;
}
 
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: #dddddd;
 background-color: none;
  background-image: none;
  background-repeat: repeat-x;
  filter: none;
  text-decoration: none;
  -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
  border:2px solid #f2f;
  padding:4px 10px 4px 10px;
 background: #;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 -moz-box-shadow: inset 0 0 1px #;
 -webkit-box-shadow: inset 0 0 1px #;
 box-shadow: inset 0 0 1px #; 
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #fff;
  border:2px solid #f2f;
  padding:4px 10px 4px 10px;
 
  background-image: none;
 background: #;
  filter: none; 
  text-decoration: none;
  -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 -moz-box-shadow: inset 0 0 1px #;
 -webkit-box-shadow: inset 0 0 1px #;
 box-shadow: inset 0 0 1px #;
}
 
.navbar .nav  > a i[class^="icon-"]{
 color:#fdfdfd;
}
ul.nav li.dropdown a {
 z-index:0;
 display:block;
}
 
ul.nav li.dropdown ul li ul.dropdown-menu {
 margin-left:0px;
  -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}
 
ul.nav li.dropdown ul li i {
 margin-right:20px;
}
 
 select.selectmenu {
 display:none;
}
.dropdown-menu {
  position: absolute;
  top: %;
  left: 0;
  z-index: 0;
  display: none;
  float: left;
  min-width: px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
 background: #;
  border: none;
  border: none;
  -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
border:2px solid #f2f;
border-top:none;
  -webkit-background-clip: none;
 -moz-background-clip: none;
 background-clip: none;
  -webkit-border-radius: 0 0 6px 6px;
 -moz-border-radius: 0 0 6px 6px;
 border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
 margin:0;
 padding:0;
}
 
.dropdown-menu li  a {
  color: #ddd;
  font-size:12px;
  padding:10px 15px 10px 15px;
  margin:0;
  text-shadow:none;
  border-bottom:1px solid #;
  text-decoration:none;
}
 
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: #ffffff;
  text-decoration: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: none;
  filter:none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {left:%;position:absolute;top:0;visibility:hidden;margin-top: 0;}
.dropdown-menu li:hover .sub-menu-level1 {visibility:visible;}
.dropdown-menu li li:hover .sub-menu-level2 {visibility:visible;}

Адаптивный стиль CSS

@media (min-width: 1200px) {
  .container,
  .navbar-static-top .container{
 width: 1170px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
 
  .container,
  .navbar-static-top .container{
 width: 724px;
  }
 nav ul li {
 display:none;
 }
 select.selectmenu  { 
 display: block;
 width:100%;
 margin-top:0;
 color:#111;
 margin-right:20px;
 line-height:30px;
 font-size:13px;
 
 }
 
 select.selectmenu .bold {
 font-weight:bold;
 }
 
}
@media (max-width: 768px) {
  .navbar-static-top {
 margin-right: -20px;
 margin-left: -20px;
  }
  .container {
 width: auto;
  }
 nav ul li {
 display:none;
 }
 
 header .navigation {
 margin:0 auto;
 text-align:center;
 width:90%;
 float:none;
 }
 select.selectmenu  { 
 display: block;
 width:100%;
 float:left;
 margin-bottom:20px;
 color:#111;
 margin-right:20px;
 line-height:30px;
 font-size:13px;
 
 }
 
 select.selectmenu .bold {
 font-weight:bold;
 }
 
}
@media (max-width: 480px) {
 
 .headnav {
 text-align:center;
 float:none;
 margin:10px 0 0 0;
 }
}

Функция JavaScript

jQuery(document).ready(function($) {
"use strict";
 
 //add some elements with animate effect
 $(".box").hover(
 function () {
 $(this).find('span.badge').addClass("animated fadeInLeft");
 $(this).find('.ico').addClass("animated fadeIn");
 },
 function () {
 $(this).find('span.badge').removeClass("animated fadeInLeft");
 $(this).find('.ico').removeClass("animated fadeIn");
 }
 );
 
 (function() {
 
 var $menu = $('.navigation nav'),
 optionsList = '<option value="" selected>Go to..</option>';
 
 $menu.find('li').each(function() {
 var $this = $(this),
 $anchor = $this.children('a'),
 depth = $this.parents('ul').length - 1,
 indent  = '';
 
 if( depth ) {
 while( depth > 0 ) {
 indent += ' - ';
 depth--;
 }
 
 }
 $(".nav li").parent().addClass("bold");
 
 optionsList += '<option value="' + $anchor.attr('href') + '">' + indent + ' ' + $anchor.text() + '</option>';
 }).end()
 .after('<select class="selectmenu">' + optionsList + '</select>');
 
 $('select.selectmenu').on('change', function() {
 window.location = $(this).val();
 });
 
 })();
 
 //Navi hover
 $('ul.nav li.dropdown').hover(function () {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
 }, function () {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
 });
 
});

Ну вот! С помощью jQuery CSS3 у нас получилось трехуровневое адаптивное выпадающее навигационное меню. Перейдите по ссылке на демо-пример, и не стесняйтесь бесплатно скачать этот пример для собственного применения в будущем. Надеюсь, вам понравился и оказался полезным этот учебник!

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Автор: Graham

Источник: http://www.freshdesignweb.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree