Многоуровневое адаптивное меню
Реализация горизонтального меню преобразующегося в мобильную навигацию на мобильных разрешениях экрана.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder"></i>Menu</a> <nav> <ul class="menu"> <li><a href="#"><i class="icon-home"></i>HOME</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> </ul> </li> <li><a href="#"><i class="icon-user"></i>ABOUT</a></li> <li><a href="#"><i class="icon-camera"></i>PORTFOLIO</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Level 3 Menu</a> <ul> <li><a href="#">Sub-Menu 4</a></li> <li><a href="#">Sub-Menu 5</a></li> <li><a href="#">Sub-Menu 6</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="icon-bullhorn"></i>BLOG</a></li> <li><a href="#"><i class="icon-envelope-alt"></i>CONTACT</a></li> </ul> </nav> |
2. Добавляем стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
.menu{display:block;} .menu li{display: inline-block; position: relative; z-index:100;} .menu li a {font-weight:600; text-decoration:none; padding:11px; display:block; color:#ffffff; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .menu li a:hover, .menu li:hover > a{color:#ffffff; background:#9CA3DA;} /* hide the second level menu */ .menu ul {display: none; margin: 0; padding: 0; width: 150px; position: absolute; top: 43px; left: 0px; background: #ffffff; } /* display second level menu on hover */ .menu li:hover > ul{ display: block;} .menu ul li {display:block; float: none; background:none; margin:0; padding:0; } .menu ul li a {font-size:12px; font-weight:normal; display:block; color:#797979; border-left:3px solid #ffffff; background:#ffffff;} .menu ul li a:hover, .menu ul li:hover > a{ background:#f0f0f0; border-left:3px solid #9CA3DA; color:#797979; } /* change level 3 menu positions */ .menu ul ul {left: 149px; top: 0px; } .mobile-menu{display:none; width:100%; padding:11px; background:#3E4156; color:#ffffff; text-transform:uppercase; font-weight:600; } .mobile-menu:hover{background:#3E4156; color:#ffffff; text-decoration:none; } @media (max-width: 767px) { .menu{display:none;} .mobile-menu{display:block; margin-top:100px;} nav{margin:0; background:none;} .menu li{display:block; margin:0;} .menu li a {background:#ffffff; color:#797979; border-top:1px solid #e0e0e0; border-left:3px solid #ffffff;} .menu li a:hover, .menu li:hover > a{ background:#f0f0f0; color:#797979; border-left:3px solid #9CA3DA;} /*level 2 and 3 - make same width as all items*/ .menu ul {display:block; position:relative; top:0; left:0; width:100%;} .menu ul ul {left:0;} }/*end media queries*/ |
3. И последнее, подключаем javascript, Awesome и jQuery — подключаем в шапку сайта
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var touch = $('#touch-menu'); var menu = $('.menu'); $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 767 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); </script> |
Готово!
