Responsive Naviagtion Menu with jQuery - HorizontalNav

File Size: 43.8 KB
Views Total: 3540
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Naviagtion Menu with jQuery - HorizontalNav

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="//" type="text/javascript"></script>
<script src="jquery.horizontalNav.js"></script>
<script src=""></script>

2. Call the plugin

$(document).ready(function() {
    // Call horizontalNav on the navigations wrapping element

3. Markup

<nav class="horizontal-nav full-width horizontalNav-notprocessed">
        <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>

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:


  • Fixed demo


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