Створення трирівневого адаптивного випадаючого меню

2

Від автора: Чудове трирівневе адаптивне випадаюче навігаційне меню, виконане з допомогою jQuery CSS3, де підменю з’являється вище або нижче основного меню з покажчиком. У своєму попередньому підручнику я демонструю, як створити випадаюче адаптивне меню за допомогою CSS3 і jQuery.

Створення трирівневого адаптивного випадаючого менюСтворення трирівневого адаптивного випадаючого меню

Це – просте адаптивне випадаюче меню, яке стане показувати підменю в три рівня з покажчиком, застосовуваним з відкритим шрифтом – це зображення, шрифти, ідеальні при проведенні миші над елементом. Підменю буде з’являтися вище або нижче основного меню, в залежності від того, де більше вільного місця. Застосований до меню ефект стане реагувати на події проведення мишею або клацання. Приклади медиазапросов продемонструють адаптацію дизайну до розміру екрану настільного комп’ютера або смартфона.

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

HTML-розмітка

  • Home

    • Homepage 2
    • Homepage 3
    • Homepage 4
  • Features

    • Typography
    • Components
    • Icons
    • Icon variations
    • 4 Sliders
      • Lush slider
      • Layer slider
      • Flexslider
      • Flexslider
  • Pages

    • About us
    • Pricing boxes
    • 404
  • Portfolio

    • Portfolio 2 columns
    • Portfolio 3 columns
    • Portfolio 4 columns
    • Portfolio detail
  • Blog

    • Blog left sidebar
    • Blog right sidebar
    • Post left sidebar
    • Post right sidebar
  • Contact

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 ul li {
z-index:0;
margin-top:20px;
}
header ul.nav li ul ul li {
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: 1200 px) {
.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 = ‘Go to..’;
$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 += «+ indent + » + $anchor.text() + «;
}).end()
.after(» + optionsList + «);
$(‘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 у нас вийшло трирівневе адаптивне випадаюче навігаційне меню. Перейдіть за посиланням на демо-приклад, і не соромтеся безкоштовно скачати цей приклад для власного застосування в майбутньому. Сподіваюся, вам сподобався і виявився корисним цей підручник!