Responsive Naviagtion Menu with jQuery - HorizontalNav
File Size: | 43.8 KB |
---|---|
Views Total: | 3531 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
HorizontalNav is a jQuery Menu plugin for creating Responsive Horizontal menus on your webpage.
Basic Usage:
1. Include necessary elements in your head section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> <script src="jquery.horizontalNav.js"></script> <script src="http://sebnitu.com/BaseDemo/bootstrap.js"></script>
2. Call the plugin
$(document).ready(function() { // Call horizontalNav on the navigations wrapping element $('.full-width').horizontalNav({}); });
3. Markup
<nav class="horizontal-nav full-width horizontalNav-notprocessed"> <ul> <li><a href="#">Navigation Item</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
4. CSS
// There is no required CSS for this plugin to work properly // but here is what is being used to style this demo .horizontal-nav { background: #efefef; border-radius: 6px; } .horizontal-nav ul { background: #128F9A; float: left; text-align: center; border-radius: 6px; border: 1px solid #0e7079; } .horizontal-nav ul li { float: left; border-left: 1px solid #0e7079; } .horizontal-nav ul li:first-child { border-left: 0 none; } .horizontal-nav ul li a { display: block; padding: 10px 20px; color: #fff; border-top: 1px solid rgba(255,255,255, 0.25); border-left: 1px solid rgba(255,255,255, 0.25); } .horizontal-nav ul li:first-child a { border-left: 0 none; } .horizontal-nav ul li a:hover { background: #12808a; } .horizontal-nav ul li:first-child a { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .horizontal-nav ul li:last-child a { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
Change log:
2015-11-01
- Fixed demo
2014-01-02
- Updated license, changed 4 space tabs to 2 and added a minified version of the JS
This awesome jQuery plugin is developed by sebnitu. For more Advanced Usages, please check the demo page or visit the official website.