Multi-Level Full Screen Menu
Step 1: This script references two external files. Download them below (right click, and select "Save As"):
Step 2: Insert the following code into the <head> section of your page:
Step 3: Add the below menu code to the very beginning or end of the BODY section of your page, outside any element other than the BODY tag:
Step 4: Finally, add the below sample menu toggler anwhere on your page to show the menu when clicked on:
<div id="navtoggler" onClick="ddfullscreenmenu.togglemenu()"></div>
Well, that's it for installation!
As mentioned, the menu links are simply defined as a single nested UL element inside the NAV container:
<nav id="ddfullscreenmenu"> <div id="closex">Close</div> <div id="ulwrapper"> UL ELEMENT CLASS="fullscreenmenu-ul" </div> </nav>
The code in red should be replaced with an ordinary UL element with CSS
fullscreenmenu-ul", with support
for nested ULs for multiple levels of menus. The script will automatically
transform each sub UL into its own menu level, add a "back breadcrumb"
link to the top of the menu, and finally, add a CSS arrow to the parent header LI. The size and color of the arrows can be
customized inside ddfullscreenmenu.css.
To initialize Multi-Level Full Screen Menu, following the menu markup, call
<script> // initialize menu. Call this after menu markup: ddfullscreenmenu.init() </script>
Showing and Hiding the menu
To open, close, or toggle the visibility of the full screen menu anywhere on your page, simply call the function:
With no parameter passed the function will toggle the visibility of the menu,
open' and '
close' explicitly sets the desired
menu visibility. Here are arbitrary links that call
<a href="#" onClick="ddfullscreenmenu.togglemenu('open'); return false">Arbitrary Open Menu link</a><br /> <a href="#" onClick="ddfullscreenmenu.togglemenu('close'); return false">Arbitrary Close Menu link</a><br /> <a href="#" onClick="ddfullscreenmenu.togglemenu(); return false">Arbitrary Toggle Menu link</a>