CSS Codes
CSS Layouts

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<link href="ddfullscreenmenu.css" rel="stylesheet" type="text/css">

<script src="ddfullscreenmenu.js">

/***********************************************
* Multi-Level Full Screen Menu (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>

<body>

<div id="navtoggler" onClick="ddfullscreenmenu.togglemenu()"></div>

<nav id="ddfullscreenmenu">

<div id="closex">Close</div>

<div id="ulwrapper">
<!-- Define your UL (nested) menu below -->
<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>

<p>
<a href="#" onClick="ddfullscreenmenu.togglemenu('open')">Arbitrary Open Menu link</a><br />
<a href="#" onClick="ddfullscreenmenu.togglemenu('close')">Arbitrary Close Menu link</a><br />
<a href="#" onClick="ddfullscreenmenu.togglemenu()">Arbitrary Toggle Menu link</a>
</p>

</body>
</html>