Мобильная навигация — Responsive Navigation
Responsive Navigation — адаптивная навигация для мобильных разрешений экрана.
Как реализовать:
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 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 135 136 137 |
<nav> <a data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <ul id="menu" class="overthrow"> <li><a href="#" tabindex="1" accesskey="h">Home</a></li> <li class="breakfast active"><a href="#" tabindex="2">Breakfast</a> <ul> <li class="bread"><a href="#" tabindex="3">Bread</a> <ul> <li class="french"><a href="#">French</a></li> <li class="english"><a href="#">White</a></li> <li class="brown"><a href="#">Brown</a></li> </ul> </li> <li class="eggs"><a href="#">Eggs</a> <ul> <li><a href="#">Eggs Benedict</a></li> <li><a href="#">Deviled Eggs</a></li> <li><a href="#">Scotch Eggs</a></li> <li><a href="#">Scrambled Eggs</a></li> </ul> </li> <li class="bacon"><a href="#">Bacon</a> <ul> <li><a href="#">Canadian</a></li> <li><a href="#">Southern</a></li> <li><a href="#">Crisp</a></li> </ul> </li> <li class="jam"><a href="#">Preserves</a> <ul> <li><a href="#">Raspberry</a></li> <li><a href="#">Gooseberry</a></li> <li><a href="#">Strawberry</a></li> <li><a href="#">Blackberry</a></li> </ul> </li> <li class="coffee"><a href="#">Coffee</a> <ul> <li><a href="#">Cappuccino</a></li> <li><a href="#">Latte</a></li> <li><a href="#">Espresso</a></li> <li><a href="#">Macchiato</a></li> </ul> </li> </ul> </li> <li class="brunch"><a href="#">Brunch</a> <ul> <li><a href="#">Scones & Muffins</a> <ul> <li><a href="#">Chocolate Muffin</a> <ul> <li><a href="#">Double Chocolate</a></li> <li><a href="#">Triple Chocolate</a></li> <li><a href="#">Chocolate Chip</a></li> <li><a href="#">Chocolate Cookie Crunch</a></li> </ul> </li> <li><a href="#">Cranberry Muffin</a></li> <li><a href="#">Date & Nut Muffin</a></li> <li><a href="#">Raisin Spice Muffin</a></li> </ul> </li> <li><a href="#">Waffles</a> <ul> <li><a href="#">Chocolate syrup</a></li> <li><a href="#">Pumpkin-Ginger</a></li> </ul> </li> <li class="bacon"><a href="#">Bacon</a> <ul> <li><a href="#">Canadian</a></li> <li><a href="#">Southern</a></li> <li><a href="#">Crisp</a></li> </ul> </li> <li class="jam"><a href="#">Pancakes</a></li> </ul> </li> <li class="lunch"><a href="#">Lunch</a> <ul> <li class="bread"><a href="#">Chicken</a> <ul> <li class="french"><a href="#">Roast</a></li> <li class="english"><a href="#">Broast</a></li> <li class="brown"><a href="#">Grilled</a></li> </ul> </li> <li class="eggs"><a href="#">Beef</a> <ul> <li><a href="#">Roasted with Peppers</a></li> <li><a href="#">T-bone Steak</a></li> <li><a href="#">Sirloin Steak</a></li> <li><a href="#">Prime Rib</a></li> </ul> </li> <li class="bacon"><a href="#">Lamb</a> <ul> <li><a href="#">Roasted with Potato</a></li> <li><a href="#">Stewed with Guiness</a></li> <li><a href="#">Stir Fry with Mushrooms</a></li> </ul> </li> <li class="salad"><a href="#">Salad</a> <ul> <li><a href="#">Caesar Salad</a></li> <li><a href="#">Avocado & Papper</a></li> <li><a href="#">Shrimp & Couscous</a></li> </ul> </li> </ul> </li> <li class="tea"><a href="#">Tea</a> <ul> <li><a href="#">English</a></li> <li><a href="#">Earl Grey</a></li> <li><a href="#">Green Tea</a></li> <li><a href="#">Camomile</a></li> </ul> </li> <li class="dinner"><a href="#">Dinner</a> <ul> <li class="bread"><a href="#">Chicken</a></li> <li class="eggs"><a href="#">Beef</a</li> <li class="bacon"><a href="#">Lamb</a></li> <li class="jam"><a href="#">Duck</a></li> <li class="coffee"><a href="#">Turkey</a></li> </ul> </li> </ul> </nav> |
2. Добавим стили CSS
|
1 2 3 4 5 6 7 |
<link rel="stylesheet" href="css/mobile-nav.css" media="screen and (min-width: 320px) and (max-width: 1024px)"> <link rel="stylesheet" href="css/smartphone.css" media="screen and (min-width:320px) and (max-width:480px)"> <link rel="stylesheet" href="css/tablet.css" media="screen and (min-width: 481px) and (max-width: 767px)"> <link rel="stylesheet" href="css/ipad.css" media="screen and (min-width: 768px) and (max-width: 1024px)"> <link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 1025px)"> |
3. Подключаем javascript и jQuery (Внизу страницы перед тегом body)
|
1 2 3 4 5 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\\/script>')</script> <script src="js/plugins.js"></script> <script src="js/helper.js"></script> <script src="js/script.js"></script> |
Готово!
