jQuery Plugin For Minimal Sidebar Navigation - Xeo Menu

jQuery Plugin For Minimal Sidebar Navigation - Xeo Menu
File Size: 269 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Xeo Menu is a minimalist jQuery plugin for creating an animated sidebar navigation that slides out from the edge of your page when mouse hover.

How to use it:

1. Load the required jQuery xeo menu's CSS in the head section of the page.

<link href="css/jquery.xeo.css" rel="stylesheet">

2. Load the latest jQuery library and jQuery xeo menu's javascript at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.xeo.js"></script>

3. Create a navigation menu with Html unordered list.

<ul class="xeo-menu">
    <li><a href="#">Menu Items One</a></li>
    <li><a href="#">Menu Items Two</a></li>
    <li><a href="#">Menu Items Three</a></li>
    <li><a href="#">Menu Items Four</a></li>
    <li><a href="#">Menu Items Five</a></li>
    <li><a href="#">Menu Items SIz</a></li>
</ul>

4. Initialize the navigation with one JS call.

<script type="text/javascript">
    jQuery(function ($) {
        $("ul.xeo-menu").xeomenu();
    })
</script>

This awesome jQuery plugin is developed by ajumell. For more Advanced Usages, please check the demo page or visit the official website.