Dynamic Drive DHTML Scripts- Flex Level Drop Down Menu

FF2+ IE10+ Chrome

Multi-Level Full Screen Menu

Author: Dynamic Drive

Description: This Full Screen Menu whilst being mobile friendly also ensures you'll never run out of real estate to display all of your menu links, by supporting multiple levels of menus. Click on a menu header to bring up its sub menu, while breadcrumbs are automatically generated to move back up the levels. The menu itself consist simply of a nested UL element for ease of definition. Vanilla JavaScript and CSS3 powered, the menu is both lightweight and baggage free for the next generation of web sites!

Arbitrary Open Menu link
Arbitrary Close Menu link
Arbitrary Toggle Menu link

Directions

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:

Select All
<nav id="ddfullscreenmenu"> <div id="closex">Close</div> <div id="ulwrapper">  <ul id="fullscreenmenu-ul"> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Folder 1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Item 3</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2.1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.2</a></li> <li><a href="http://www.dynamicdrive.com">Folder 3.1.1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> </div> </nav> <script> // initialize menu. Call this after menu markup: ddfullscreenmenu.init() </script>

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!

More Information

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 class "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 ddfullscreenmenu.init():

<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:

ddfullscreenmenu.togglemenu('open'|'close')

With no parameter passed the function will toggle the visibility of the menu, while 'open' and 'close' explicitly sets the desired menu visibility. Here are arbitrary links that call ddfullscreenmenu.togglemenu():

<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>