Простая навигация для мобильных устройств
Простая навигация для мобильных устройств основанная на jQuery и CSS3
Преобразуется на мобильных разрешениях экрана.
Как использовать:
1. Создаём навигацию
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav class="nav"> <a class="toggle-nav" href="#">☰</a> <div class="nav-mobile"> <ul class="left"> <li><a href="#">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Most Popular</a></li> </ul> <ul class="right"> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </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 |
a { color: #fff; text-decoration: none; } ul { list-style: none; } .nav { display: block; background: #0275d8; min-height: 50px; } .nav .left { float: left; margin-left: 1em; } .nav .left li { border-bottom: 1px solid #ED5565; font-size: 14px; float: left; } .nav .left li a { display: block; padding: 10px 15px; line-height: 30px; } .nav .left li a:hover { background: #ED5565; } .nav .right { float: right; margin-right: 1em; } .nav .right li { border-bottom: 1px solid #ED5565; font-size: 14px; float: left; } .nav .right li a { display: block; padding: 10px 15px; line-height: 30px; } .nav .right li a:hover { background: #ED5565; } .toggle-nav { display: none; } .nav-mobile style { display: block; } |
3. Стили выпадающего меню для мобильных устройств.
|
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 |
@media only screen and (max-width: 768px) { .nav { border-bottom: 1px solid rgba(0,0,0,0.1); } .toggle-nav { display: block; padding: 10px; position: absolute; right: 10px; line-height: 30px; } .toggle-nav:after { content: 'Menu'; } .nav-mobile { display: none; } .style-mobile { background: #DA4453; top : 51px; position : absolute; width : 100%; } .style-mobile li { display: block; width: 100%; } .nav .right { display: block; float: none; margin: 0em; } .nav .left { display: block; float: none; margin: 0em; } |
4. Подключаем библиотеку jQuery
|
1 |
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script> |
5. Подключаем меню (В шапку сайта)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function(){ // Returns width of browser viewport var browser = $(window).width(); // Returns width of HTML document var document = $(document).width(); var nav = $('.nav .toggle-nav'); nav.click(function(e){ $('.nav .nav-mobile').addClass('style-mobile').slideToggle('slow'); e.preventDefault(); }); }); |
