Submit your widget
HomeMenu & Navigationsimple slide navigation with JQuery plugin

simple slide navigation with JQuery plugin

Created 10 years ago   Views 9778   downloads 1615    Author komposta
simple slide navigation with JQuery plugin
View DemoDownload
14
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