Introduction

First of all, let me say thanks you for choosing my product! Feel free to ask any question you might have regarding OKLE.

OKLE is responsive vertical menu that comes in 3 layouts and 14 pre-defined color variations per layout. With very simple markup to follow, and it's minimalistic but modern design you can enrich your website giving it fresh new look that will stand out.

  • Examples folder: Contains the main files of the OKLE, and example of how to create OKLE menu in it's various layouts.
    • HTML files: Contain example implementations of the OKLE menu. By viewing the source of these files you can see the code implementations together with basic instructions.
    • assets folder: Contains all of the assets files used by the OKLE such as the okle.js, the CSS files, and the skins files.
  • Skins folder: Contains the available color skins.
  • Source folder: Contains only the main okle.js and okle.css files.
    • js folder: Contains the main javascript files: okle.js, okle.min.js
    • css folder: Contains the main css file.
  • Readme.txt file: Contains quick instructions and general information for faster and easier access.

OKLE is fully compatible with Chrome, Safari, Firefox, IE9+ and iOS latest versions.

Dependencies

CSS

You need to include main OKLE stylesheet and Biryani font:


<link rel="stylesheet" type="text/css" href="css/okle.css" />
<link href='https://fonts.googleapis.com/css?family=Biryani:400,700' rel='stylesheet' type='text/css'>
        
If you want to include icons you will need to load one more style:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />

Javascript dependecies are following:
  • jQuery library - version 1.9.1 or above
  • And main plugin javascript

javascript


<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/okle.min.js"></script> 
        

To apply additional theme, include it after the plugin main stylesheet

    <!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="css/okle.css" />
    <!-- Selected theme stylesheet -->
<link rel="stylesheet" type="text/css" href="css/skins/chosen-skin.css" />
        

HTML Markup

Basic Guidliness

OKLE menu consists of three parts:

  • Header - .ok-header container
  • Main Menu part - ordinary code <ul> list
  • Footer - .ok-footer container

Let's start from basics - first create a main nav container and inner <div class="scroller"< container
<nav id="okle">

      <div class="ok-scroller">

       </div>  <!-- .ok-scroller -->

</nav> <!-- #okle -->

Now, you will be adding the three above mentioned containers:
<nav id="okle">

      <div class="ok-scroller">

          <!-- Menu Header -->

          <!-- Main Menu -->

          <!-- Menu Footer -->

       </div>  <!-- .ok-scroller -->
       
</nav> <!-- #okle -->

So, now when you know it's anatomy, just populate this sections with your content, following OKLE menu simple markup:
<nav id="okle">

  <div class="ok-scroller">

    <!-- Menu Header -->
    <div class="ok-header">
      <h3>Big Menu Heading</h3>
    </div> <!-- .ok-header -->

    <!-- Main Menu -->
    <ul>
      <li><a href="">Menu Element</a></li>
      <li><a href="">Another Element</a></li>
      <--- more menu elements --->
    </ul>

    <!-- Menu Footer -->
    <div class="ok-footer">
      <ul>
         <li><a href=""><i class="fa fa-facebook"></i></a></li>
         <li><a href=""><i class="fa fa-twitter"></i></a></li>
         <li><a href=""><i class="fa fa-google-plus"></i></a></li>
      </ul>
    </div> <!-- .ok-footer-->

  </div>  <!-- .ok-scroller -->

</nav> <!-- #okle -->
  

Dropdowns

To add dropdown (submenu) to any menu element, you need to do 2 things:

  1. Add has-sub class to the <li> element that will be holding submenu
  2. Add new child ul (unordered list) to that menu element.

Example:

<ul>
  <li><a href="">Home</a></li>  <!-- standard menu element -->

  <!-- menu element with submenu -->
  <li class="has-sub">  <!-- add has-sub class to li element -->
    <a><Portfolio</a> <!-- empty menu element link <a> -->
    <!-- child menu/submenu -->
    <ul>
      <li><a href="">Nature</a></li>
      <li><a href="">Arhitecture</a></li>
      <li><a href="">People</a></li>
      <li><a href="">Places</a></li>
    </ul>
    <!-- child menu/submenu end -->
  </li>
  <!-- menu element with submenu end -->

</ul>  

You can add as many dropdowns/submenus as you like, just follow above markup. Parent <li> must have has-sub class, and then insert new child <ul>.

Bordered Elements

If you want to use lined (elements with bottom border) layout for menu elements like in default layout, you do not need to add anything, as borders are added by default.
But if you want to exclude those bottom borders like in other two layouts Blogger and Portfolio you need to add no-brd class to main OKLE nav container:
<nav id="okle" class="no-brd">


Menu Width

To change width of the menu add following line of CSS:

    #okle{
      max-width: 300px;
    }

Change the max-width property to the desired width.


Left | Right Position

OKLE vertical menu is positioned to the left side of the screen, so to place it to the left, don't add anything. But if you want to place it to the right side you need to add ok-right class to the main OKLE nav container:
<nav id="okle" class="ok-right">

Responsivnes

mobile layout

OKLE is fully responsive and it will transofrm to mobile version on smaller screens and devices.

In mobile version it will consist of two parts:

  1. Top Menu
  2. Side Menu

In the top menu will be ordered all important menu items (those you selected previously). Rest of menu items will stay in side menu that can be opened by clicking on the 3 circled icon in the right corner of the top menu.

mobile layout

In order to select which menu elements will go to the top bar on smaller screens, all you need to do is assign them a okle-mob class.

<ul>

  <li class="okle-mob"> <!-- Add okle-mob class -->
    <a href=""><i class="fa fa-home"></i>Home</a>
  </li>

  <li class="okle-mob"> <!-- Add okle-mob class -->
    <a href=""><i class="fa fa-user"></i>About</a>
  </li>

  <li>
    <a href=""><i class="fa fa-edit"></i>Blog</a>
  </li>

  <li class="okle-mob"> <!-- Add okle-mob class -->
    <a href=""><i class="fa fa-envelope"></i>Contact</a>
  </li>

</ul>

Icons

OKLE comes with Font Awesome web font. You can use any other third-party web font you like, just include it in head. For full list of classes for included font, check the credits section for the link.

To include icon you need to create empty <i> element and assign it font-awesome class. For example:

<li>
    <a href="link.html"><i class="fa fa-edit"></i>Blog</a> <!-- icon is inserted inside <a> element in the menu -->
</li>

Layouts

OKLE comes with 3 layouts:

  • Default

    layout 1

    This is default layout you do not need to apply anything. Just for refference I will be including it here again:

    <nav id="okle">
    
      <div class="ok-scroller">
    
        <!-- Menu Header -->
        <div class="ok-header">
          <h3>Big Menu Heading</h3>
        </div> <!-- .ok-header -->
    
        <!-- Main Menu -->
        <ul>
          <li><a href="">Menu Element</a></li>
          <li><a href="">Another Element</a></li>
          <--- more menu elements --->
        </ul>
    
        <!-- Menu Footer -->
        <div class="ok-footer">
          <ul>
             <li><a href=""><i class="fa fa-facebook"></i></a></li>
             <li><a href=""><i class="fa fa-twitter"></i></a></li>
             <li><a href=""><i class="fa fa-google-plus"></i></a></li>
          </ul>
        </div> <!-- .ok-footer-->
    
      </div>  <!-- .ok-scroller -->
    
    </nav> <!-- #okle -->
      

  • Blogger

    layout 2

    To apply this layout you need to modify a little the markup for menu .ok-header by adding ok-blogger class and including .ok-avatar and .ok-user-meta containers

    <nav id="okle" class="no-brd">
    
      <div class="ok-scroller">
    
        <div class="ok-header ok-blogger">
    
           <!-- Blogger layout containers -->
          <div class="ok-avatar">
            <img src="path-to-your-image" /> <!-- Optimal image size - 92x92px -->
          </div>  <!-- .ok-avatar -->
    
          <div class="ok-user-meta">
            <h3 class="name">Your Name</h3>
            <h4>A location, if you want</h4>
          </div> <!-- .ok-user-meta -->
    
        </div> <!-- .ok-header.ok-blogger -->
        <!-- Blogger layout containers End -->
    
        <ul>
          <li><a href="">Menu Element</a></li>
          <li><a href="">Another element</a></li>
        </ul>
    
        <div class="ok-footer">
          <ul>
            <li><a href="">Sign In</a></li>
            <li><a href="">Register</a></li>
          </ul>
        </div> <!-- .ok-footer -->
    
      </div>  <!-- .ok-scroller -->
    
    </nav> <!-- #okle -->
  • Portfolio

    layout 3

    Portfolio layout is created by adding has-img class to the header. Then add background image CSS property to the .has-img header, like it's done in demo.css file.

    <nav id="okle" class="no-brd">
    
      <div class="ok-scroller">
    
        <div class="ok-header has-img"> <!-- add has-img class to the ok-header -->
          <h3>Big Menu Heading</h3>
        </div>
        
        <ul>
          <li>
            <a href=""><i class="fa fa-home"></i>Home</a>
          </li>
          <li>
            <a href=""><i class="fa fa-user"></i>About</a>
          </li>
          <li>
        </ul>
    
        <div class="ok-footer">
          <ul>
            <li><a href=""><i class="fa fa-facebook"></i></a></li>
            <li><a href=""><i class="fa fa-twitter"></i></a></li>
            <li><a href=""><i class="fa fa-google-plus"></i></a></li>
          </ul>
        </div> <!-- .ok-footer -->
    
      </div>  <!-- .ok-scroller -->
    
    </nav>  <!-- #okle -->


Skins

To change skin, just include it in the head of the page after the main okle.css stylesheet.
Example:

<link rel="stylesheet" type="text/css" href="path/to/blue.css">


Default Layout Skins Preview

default layout skins

Blogger Layout Skins Preview

blogger layout skins

Portfolio Layout Skins Preview

portfolio layout skins

For default layout, you do not need to add anything, just leave it as it is.

Credits

List of the resources used with OKLE