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

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

От автора: Великолепное трехуровневое адаптивное выпадающее навигационное меню, выполненное с помощью 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 у нас получилось трехуровневое адаптивное выпадающее навигационное меню. Перейдите по ссылке на демо-пример, и не стесняйтесь бесплатно скачать этот пример для собственного применения в будущем. Надеюсь, вам понравился и оказался полезным этот учебник!

Автор: Graham

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

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

Практика 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