Делаем навигацию для мобильных устройств
Делаем навигацию для мобильных устройств.
При мобильном разрешении экрана навигация трансформируется в выпадающий список.
Как реализовать:
1. Подключаем (в шапку сайта) jQuery и код иконки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ /* Подготавливаем иконку меню */ $('#nav-wrap').prepend('<div id="menu-icon">Меню</div>'); /* Включаем навигацию */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); }); </script> |
2. Теперь код навигации html
|
1 2 3 4 5 6 7 8 9 10 |
<nav id="nav-wrap"> <div id="menu-icon">Меню</div> <ul id="nav"> <li><a href="#">Кнопка</a></li> <li><a href="#">Кнопка</a></li> </ul> </nav> |
3. И последнее: оформление 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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
/************************************************************************************ NAV *************************************************************************************/ #nav-wrap { margin-top: 20px; } /* menu icon */ #menu-icon { display: none; /* hide menu icon initially */ } #nav, #nav li { margin: 0; padding: 0; } #nav li { list-style: none; float: left; margin-right: 5px; } /* nav link */ #nav a { padding: 4px 15px; display: block; color: #000; background: #ecebeb; } #nav a:hover { background: #f8f8f8; } /* nav dropdown */ #nav ul { background: #fff; padding: 2px; position: absolute; border: solid 1px #ccc; display: none; /* hide dropdown */ width: 200px; } #nav ul li { float: none; margin: 0; padding: 0; } #nav li:hover > ul { display: block; /* show dropdown on hover */ } /************************************************************************************ MOBILE *************************************************************************************/ @media screen and (max-width: 600px) { /* nav-wrap */ #nav-wrap { position: relative; } /* menu icon */ #menu-icon { color: #000; width: 42px; height: 30px; background: #ecebeb url(images/menu-icon.png) no-repeat 10px center; padding: 8px 10px 0 42px; cursor: pointer; border: solid 1px #666; display: block; /* show menu icon */ } #menu-icon:hover { background-color: #f8f8f8; } #menu-icon.active { background-color: #bbb; } /* main nav */ #nav { clear: both; position: absolute; top: 38px; width: 160px; z-index: 10000; padding: 5px; background: #f8f8f8; border: solid 1px #999; display: none; /* visibility will be toggled with jquery */ } #nav li { clear: both; float: none; margin: 5px 0 5px 10px; } #nav a, #nav ul a { font: inherit; background: none; display: inline; padding: 0; color: #666; border: none; } #nav a:hover, #nav ul a:hover { background: none; color: #000; } /* dropdown */ #nav ul { width: auto; position: static; display: block; border: none; background: inherit; } #nav ul li { margin: 3px 0 3px 15px; } } @media screen and (min-width: 600px) { /* ensure #nav is visible on desktop version */ #nav { display: block !important; } } |
