Submit your widget

simple slide navigation with JQuery plugin

Created 5 years ago   Views 37653   downloads 5270    Author komposta
simple slide navigation with JQuery plugin
View DemoDownload 85.6 KB
76
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