Ok, so I finally got some time to clear up this post and post some usage instructions as well. Here we go.
Introduction
Author : John Pereira
Version : 1.1
View Demo Download
A while back I needed to find a sliding toggle menu using jQuery that would slide out from the left part of the screen. This seemed like an easy enough requirement, but even though I searched for it I couldn’t find anything satisfactory. Truth be told, I probably never got past the first few pages of Google but then again, who does?
All the toggle menus that I found used the Interface plugin or some other plugin to generate the effect I was looking for. Since we don’t use the Interface plugin anywhere else I didn’t feel like using it just to get the menu working.
Since the functionality I was looking for was rudimentary enough I built it using only jQuery. This jQuery sliding toggle menu doesn’t have any external dependencies because it’s very simple and just a toggle menu with an additional sliding function.
Usage
Menu Structure
To use this menu you will have to organize your menu in the following way.
<ul id="menu">
<li>
<div id="someSubMenu" class="header">Menu Title</div>
<ul>
<li>Something</li>
<li>Something else</li>
</ul>
</li>
<li>
<div id="anotherSubMenu" class="header">Menu Title</div>
<ul>
<li>Another thing</li>
<li>And then some more</li>
</ul>
</li>
</ul>
Setting it up
Include the jQuery file and the menu-script.js file (in that order) into your website.
Once you have structure set up as shown above (and styled the way you like), you will have to create at least one element (div, span, img, button or anything else you prefer) with an onclick action. You will have to set it to the sliding menu’s toggle function like so,
onclick="toggleMenu();".
This will toggle the menu every time the user clicks on the element.
That’s it :]
Activating the Sub-Menus Independently
If you have given your header elements an id it’s simple as pie to get this feature working. Simply call the following function on the onclick method of an element.
openMenuSelection('someSubMenu ')
where ‘someSubMenu’ is the id of the header you want expanded.
Additional Notes
The menu list can be either a <ul> or <ol> as long as you give it the id of ‘menu’. I’ve used <div>s to give the header but you can use anything you want as long as you mark the header (see below about using alternative names for headers).
In case some of the naming conventions used here conflict with any other part of your site, you can simply give them different names and update the script file. You can set the following options in the menu-script.js file.
_menuID– You can set the menu id to something else as long as you replace the default value assigned here. Default value is ‘menu’_headerClass– You can set the sub menu header class to a new value as long as you replace the default value assign here. Default value is ‘header’._hideSpeed– This is the speed at which the menu shows and hides itself. Default is 500 ms. Set it to 1 for fastest response (0 will just set it to default, which is 500ms)
