Menu +

Getting started

1. Basic HTML template

If you want to be compatible with Internet Explorer 7 or 8, you need to use a template as follows. 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Document Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="menu.css" rel="stylesheet">
  </head>
  <body>

  </body>
</html>

2. Default Menu

Example

<ul class="nav-bar">
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
</ul>

Options

Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add class .right to <li> element.

<ul class="nav-bar">
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li class="right"><a href="#">Right Item</a>
</ul>

Active Elements

Add class .active to <li> element.

<ul class="nav-bar">
 <li><a href="index.html">Home</a></li>
 <li class="active"><a href="about.html">About</a></li>
 <li class="right"><a href="#">Right Item</a>
</ul>

Sub menus

<ul class="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li>
    <a href="#" tabindex="-1" class="arrow">Pages</a>
    <ul>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Right Item</a></li>
</ul>

Sub menus on dropdowns

Default Options

<ul class="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li>
    <a href="#" tabindex="-1" class="arrow">Pages</a>
    <ul>
      <li><a href="#">Gallery</a></li>
      <li>
        <a href="#" tabindex="-1" class="arrow">Portfolio</a>
        <ul>
          <li><a href="#">Portfolio 1 column</a></li>
          <li><a href="#">Portfolio 2 column</a></li>
          <li><a href="#">Portfolio 3 column</a></li>
          <li><a href="#">Portfolio 4 column</a></li>
        </ul>
      </li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Right Item</a></li>
</ul>

Left submenu

Add class .to-left to <li> element.

<ul class="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li>
    <a href="#" tabindex="-1" class="arrow">Pages</a>
    <ul>
      <li><a href="#">Gallery</a></li>
      <li class="to-left">
        <a href="#" tabindex="-1" class="arrow">Portfolio</a>
        <ul>
          <li><a href="#">Portfolio 1 column</a></li>
          <li><a href="#">Portfolio 2 column</a></li>
          <li><a href="#">Portfolio 3 column</a></li>
          <li><a href="#">Portfolio 4 column</a></li>
        </ul>
      </li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Right Item</a></li>
</ul>

Full Menus on dropdown

Add <div> element with .full-menu class.

Add sub tags <div> with .grid-1 or .grid-2 or .grid-3 or .grid-4 or .grid-5 or .grid-6 class.

  • Home
  • Full Menu
    Latest Posts
    Paragraph

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

  • Right Item
<ul class="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li>
    <a href="#" tabindex="-1" class="arrow">Full Menu</a>
    <div class="full-menu">
      <div class="grid-1">
        <h5>Latest Posts</h5>
        <ul>
          <li><a href="#">Post 1</a></li>
          <li><a href="#">Post 2</a></li>
          <li><a href="#">Post 3</a></li>
          <li><a href="#">Post 4</a></li>
          <li><a href="#">Post 5</a></li>
        </ul>
      </div>
      <div class="grid-2">
        <h5>Paragraph</h5>
        <p>Lorem ipsum dolor sit ...</p>
      </div>
    </div>
  </li>
  <li class="right"><a href="#">Right Item</a></li>
</ul>

Full width Menus on dropdown

Add <div> element with .full-menu .full-width class.

  • Home
  • Full Menu
    Latest Posts
    Paragraph

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

    Image
  • Right Item
<ul class="nav-bar">
  <li><a href="index.html">Home</a></li>
  <li>
    <a href="#" tabindex="-1" class="arrow">Full Menu</a>
    <div class="full-menu full-width">
      <div class="grid-1">
        <h5>Latest Posts</h5>
        <ul>
          <li><a href="#">Post 1</a></li>
          <li><a href="#">Post 2</a></li>
          <li><a href="#">Post 3</a></li>
          <li><a href="#">Post 4</a></li>
          <li><a href="#">Post 5</a></li>
        </ul>
      </div>
      <div class="grid-5">
        <h5>Paragraph</h5>
        <p>Lorem ipsum dolor sit ...</p>
      </div>
    </div>
  </li>
  <li class="right"><a href="#">Right Item</a></li>
</ul>

3. Vertical Menu

Example

Add class .vertical to menu. 

<ul class="nav-bar vertical">
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
</ul>

4. Color Options

Examples

Add class .style-n to menu. The number n is a value from 1 to 14.

<ul class="nav-bar style-1">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-2">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-3">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-4">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-5">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-6">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-7">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-8">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-9">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-10">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-11">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-12">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-13">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<ul class="nav-bar style-14">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>

5. Responsive Menu

Add <a> element with .collapse-link class of the menu before

Examples

Menu + 
<a href="#" class="collapse-link" tabindex="-1">Menu <span>+</span></a>
<ul class="nav-bar style-1">
  <li class="active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>

6. Create Custom Color With LESS

Open the file menu.less in the less folder. Add the following code to the end of this file. 

.createNavColor (style-name, background-color, hover-color);

After that, compile menu.less file. For example, the console 

lessc menu.less > menu.css