Responsive Slide Down Menu with jQuery and CSS3
File Size: | 3.44 KB |
---|---|
Views Total: | 6759 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A jQuery & CSS3 based responsive, mobile-friendly menu that slides out from the top of the web page when you click the menu tab. Also comes with a full page overlay covering the main content to focus your users on the menu items.
How to use it:
1. Create a navigation menu using Html unordered list.
<nav id="menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav>
2. Create a button to toggle the navigation menu.
<div id="btn"><span></span></div>
3. Wrap the navigation menu and the toggle button into a container. The whole thing would be like this:
<div class="slide_container"> <nav id="menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> <div id="btn"><span></span></div> </div>
3. The CSS to make the menu sticky at the top of the web page.
.slide_container { width: 100%; position: absolute; top: 0; z-index: 999; }
4. The CSS to style the navigation menu and the toggle button.
#menu { padding: 50px 0; border-bottom: solid 10px #ff725d; background: #fff; display: none; } #menu ul { overflow: hidden; margin: 0 auto; padding: 0; max-width: 800px; width: 100%; } #menu li { float: left; padding: 0; width: 20%; list-style: none; } #menu li a { display: block; margin: 0 5%; padding: 20px 0; border: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; } #menu li a:hover { border: solid 1px #12a1c6; color: #12a1c6; } #menu li a:active { border: solid 1px #0e7b97; color: #0e7b97; } #btn { margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: #ff725d; cursor: pointer; } #btn span { position: relative; top: 12px; left: 50%; display: block; margin-left: -25px; width: 50px; height: 5px; border-radius: 5px; background: #fff; box-shadow: inset 1px 1px 2px #ddd; }
5. The CSS to create the fullpage overlay.
.layer { position: fixed; top: 0; width: 100%; height: 100%; background-color: #ff725d; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; opacity: 0.5; }
6. Make the navigation menu responsive using CSS3 media queries.
@media screen and (max-width: 480px) { #menu { padding: 5%; } #menu li { width: 100%; } #menu li a { border-top: none; } #menu li a:hover { margin-top: -1px; } #menu li:first-child a { border-top: solid 1px #333; } #menu li:first-child a:hover { margin-top: 0; border-top: solid 1px #12a1c6; } }
7. Include the necessary jQuery library at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
8. Enable the slide down menu with a little javascript.
$(function() { var openBtn = $('#btn'), slideMenu = $('#menu'), layer = $('<div />').addClass('layer'); openBtn.on("click", function() { if (slideMenu.is(':hidden')) { slideMenu.slideDown(300); } else { slideMenu.slideUp(300); layer.remove(); } }); });
This awesome jQuery plugin is developed by mp_graphic. For more Advanced Usages, please check the demo page or visit the official website.