Мобильная навигация — Responsive Navigation

Responsive Navigation — адаптивная навигация для мобильных разрешений экрана.

Как реализовать:

1. Разметка html

	<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 &amp; 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 &amp; 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 &amp; Papper</a></li>
							<li><a href="#">Shrimp &amp; 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

<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)

	<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>

Готово!