Submit your widget
HomeMenu & Navigationsimple slide navigation with JQuery plugin

simple slide navigation with JQuery plugin

Created 11 years ago   Views 11183   downloads 1807    Author komposta
simple slide navigation with JQuery plugin
View DemoDownload
19
Share |

This is a  simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded sub-menus between sessions by using cookies and optionally act as an accordion menu.

Getting Started

 

Download the plugin, unzip it and copy the files to your application directory and load them inside your HTML.

<head>
    <!-- Load JQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- Load jquery.cookie plugin (optional) -->
    <script type="text/javascript" src="/navgoco/src/jquery.cookie.js"></script>
    <!-- Load jquery.navgoco plugin js and css files -->
    <script type="text/javascript" src="/navgoco/src/jquery.navgoco.js"></script>
    <link rel="stylesheet" href="/navgoco/src/jquery.navgoco.css" type="text/css" media="screen" />
</head>

Sample menu html and activation code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.nav').navgoco();
    });
</script>
<ul class="nav">
    <li><a href="#">1. Menu</a>
        <ul>
            <li><a href="#">1.1 Submenu</a></li>
            <li><a href="#">1.2 Submenu</a></li>
            <li><a href="#">1.3 Submenu</a></li>
        </ul>
    </li>
<!-- etc... -->
</ul>

You can also extend the default options:

<script type="text/javascript">
    $(document).ready(function() {
        $('.nav').navgoco({
              caret: '<span class="caret"></span>',
              accordion: false,
              openClass: 'open',
              save: true,
              cookie: {
                  name: 'navgoco',
                  expires: false,
                  path: '/'
              },
              slide: {
                  duration: 400,
                  easing: 'swing'
              }
          });
    });
</script>

Read more:https://github.com/tefra/navgoco

You might also like