HorizontalMenu Example

example.html

<nav id="myMenu" class="menuHorizontal">
    <ul>
        <li class="currentActive">
            <a href="#">Menu</a>
        </li>
        <li>
            <a href="#">Leo Balter</a>
        </li>
        <li>
            <a href="#">File</a>
        </li>
        <li>
            <a href="#">Window</a>
        </li>
        <li>
            <a href="#">Version Control</a>
        </li>
        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">Git</a>
        </li>
        <li>
            <a href="#">FrontEnd</a>
        </li>
    </ul>

    <div class="menuBar"></div>
</nav>

script.js

// menu usage:

jQuery('#myMenu').horizontalMenu();

// or

var myMenu = new HorizontalMenu('#myMenu');
myMenu.init();

style.css

.menuHorizontal {
  position: relative;
  background: #404040;
  zoom: 1;
}
.menuHorizontal:before, .menuHorizontal:after {
  display: table;
  content: "";
}
.menuHorizontal:after {
  clear: both;
}
.menuHorizontal ul {
  position: relative;
  list-style: none outside;
  z-index: 3;
}
.menuHorizontal ul li {
  list-style: none outside;
  float: left;
  margin: 10px;
}
.menuHorizontal ul li a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  line-height: 20px;
  padding: 0 6px;
}
.menuHorizontal .menuBar {
  position: absolute;
  z-index: 1;
  background: #0064cd;
  top: 6px;
  height: 20px;
  padding: 4px 6px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}