Description: To compensate for the limited screen space offered on mobile devices, this mobile-first navigation menu creates a slide in menu that takes up the entire screen when expanded. Its content can be defined either as an inline <nav> element, or inside an external file and fetched via Ajax. Swiping/ mouse dragging is supported inside the content to scroll it upwards/downwards should the content exceed the height of the screen's viewport.

All of the menu's style is defined inside the external stylesheet, including the transition time.

Demo (Toggle menu using button below).

---

Directions

Step 1: Add the below code to the HEAD section of your page:

Select All
<link href="fullscreenmenu.css" type="text/css" rel="stylesheet" /> <link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="fullscreenmenu.js"> /*********************************************** * Full screen mobile 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> <script type="text/javascript"> jQuery(function(){ // on DOM load menu1 = new fullscreenmenu({ // initialize menu source: 'menucontent.htm' }) }) </script>

This script uses the following external files. Download them below (right click, and select "Save As"):

• fullscreenmenu.css
• fullscreenmenu.js
• menucontent.htm (external menu file)

IMPORTANT: Your page should carry the META tag <meta name="viewport" content="width=device-width"> in the HEAD section of your page to ensure the best mobile experience with this menu. This META tag instructs mobile browsers not to zoom out when rendering the webpage by default, which can lead to the menu appearing too small to start.

Step 2: Add the below sample HTML button code anywhere on your page to toggle the menu:

<a class="animateddrawer" href="#" onClick="menu1.togglemenu(); return false">
<span></span>
</a>

That's it for installation! See below for customization details.

More Information

Full Screen Menu is initialized by calling new fullscreenmenu() in the HEAD section of your page after the DOM has loaded, It accepts a single option called "source" that sets the source of the menu contents (whether defined inline on the page, or the path to an external file):

jQuery(function(){ // on DOM load
 menu1 = new fullscreenmenu({ // initialize menu
  source: 'menucontent.htm'
 })
})

The variable "menu1" should be an arbitrary but unique variable name of your choosing to uniquely identify this instance of Full Screen Menu. This following describes the lone option is more detail, plus the togglemenu() method:

Option	Description
source: "string" Required	The source of the menu's entire markup. This markup can either be defined inline on the page (for SEO purposes for example), or inside an external file (for ease of maintenance). Either way, the markup should look like the following: <nav class="fullscreenmenu" id=?> <div class="navcontent"> <ul class="mainul"> <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li> <li><a href="http://www.cssdrive.com/">CSS Drive</a></li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li> </ul> </div> </nav> The menu should carry a CSS class of "fullscreenmenu", and if it's defined inline on the page, an unique ID attribute value as well. Then to point the source option to the menu, set it to one of the following depending on where the menu is defined: source: "#menuidvalue" // if menu defined inline on the page source: "path/menu.htm" // if menu defined inside external file located at "path/menu.htm" Notice how in the first setting, when specifying the ID of the inline menu,  you should prefix the value with "#" to let the script know that this is a ID value string instead of a path string.
Method
pushmenuinstance.togglemenu([state])	Toggles the state of a Full Screen Menu. Call this method on top of the variable you used when initializing the menu, for example: jQuery(function(){ // on DOM load  menu1 = new fullscreenmenu({ // initialize menu   source: 'menucontent.htm'  }) }) The user defined variable in red above allows you to reference the menu outside the initialization code. Then to utilize the togglemenu() method, you'd call menu1.togglemenu(). The state parameter when left undefined toggles the menu state, while a value of "open" or "close" does as the value suggests.  The following three links control the state of the menu: <button onClick="menu1.togglemenu();">Toggle Menu 1</button> <button onClick="menu1.togglemenu('open');">Open Menu 1</button> <button onClick="menu1.togglemenu('close');">Close Menu 1</button> Demo: Toggle Menu 1 Open Menu 1 Close Menu 1

Customizing the  fancy animated drawer button

The code that you add to your page by default comes with an animated drawer button to toggle the state of the demo menu.  The button's markup is as follows:

<a class="animateddrawer" href="#" onClick="menu1.togglemenu(); return false">
<span></span>
</a>

Notice inside the onClick event handler how it calls menu1.togglemenu(), where "menu1" should be the variable name assigned to this instance of Full Screen Menu inside the initialization code. The button markup should also carry a class of "animateddrawer", which does two things:

• Styles the button as an animated drawer icon inside fullscreenmenu.css (see bottom half of style sheet).

• Script adds a CSS class of "open" to buttons carrying this class when the menu is open, and removes the "open" class when the menu is closed.

If you study fullscreenmenu.css, you'll see that the button by default is positioned relative (so it can be placed anywhere on the page), though when the menu is open, that changes to a position of "fixed" and at the upper right corner of the page (so it's always in view inside the menu). If you wish the button to be positioned in the upper right corner by default, change the default position from "relative" to "absolute" or "fixed". with explicit "top" and "left" properties to boot.