Cut & Paste Amazon Side Bar Menu
|
Description: This menu models itself after the side bar menu found on Amazon.com to provide a flexible, content-rich fold out menu. It supports infinite number of sub menus. In addition, the menu is responsive in smaller screen and mobile devices, by stacking the sub levels when revealed on top of its parent to conserve space. A robust menu this is, and across multiple platforms!
Examples:
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
Download the following external files and upload to same directory as where your webpage resides:
Step 2: Add the below sample HTML markup to your <BODY>:
Setup Information
The markup for a Amazon Menu consists of a <NAV>
main element followed by a nested UL inside it:
<nav id="mysidebarmenu" class="amazonmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 0</a>
<div>
Nested Content...
"
"
"
</div>
</li>
"
"
</nav>
Each sub menu is defined as a child element of the corresponding LI parent. If your sub menu consists of arbitrary contents other than simply a UL element, use a <DIV> element as the sub menu wrapper, as shown above (in red). On the other hand, if your sub menu is merely another UL element, as expected, just use a UL as the wrapper:
<nav id="mysidebarmenu" class="amazonmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Item 0.1</a></li>
<li><a href="#">Item 0.1</a></li>
<li><a href="#">Item 0.2</a></li>
"
</ul>
</li>
"
"
</nav>
To initialize the menu, call the function amazonmenu.init()
when the DOM has loaded, like so:
<script>
jQuery(function(){
amazonmenu.init({
menuid: 'mysidebarmenu'
})
})
</script>
with the menuid option being the ID of your <NAV>
element.
Inside amazonmenu.js, there are a few variables near the top you can configure to modify the menu's behaviour. They are:
defaults: {
animateduration: 100,
showhidedelay: [100, 100],
hidemenuonclick: true
},
The showhidedelay setting controls the delay in milliseconds
whenever the mouse rolls over or out of a sub menu before it should open or
close, respectively.
Styling the menu
The style of the menu is defined entirely inside amazonmenu.css. Refer to the comments for an understanding of the important rules and properties. At the end of the file you'll see the rules for the responsive/mobile portion of the menu:
@media screen and (max-width: 480px){ /* When screen size is 480px */
"
"
}
By default the rules inside the above media query are triggered when the browser window is 480px or less. You may want to edit this value plus the rules inside it accordingly.
A note on mobile and responsive design- the "viewport" meta tag
The code you copied inside Step 1 contains the meta tag:
<meta name="viewport" content="width=device-width">
This tag is necessary in order for the defined CSS media query
mentioned above to work property. For more info on this tag, see "The
viewport meta tag- the key to preparing a
page for mobile devices optimization".