Description: Sticky Horizontal Menu is a top UL menu that seamlessly transitions to being fixed in position when it's scrolled out of view, so it remains visible to the user at all times. The "sticky" menu pattern has become very popular, and Sticky Horizontal Menu exemplifies that in a lightweight, cross browser and device manner. On small screen devices (configurable setting), the menu transforms into a user activated full screen menu instead of the default sticky top menu.

The script has no jQuery dependency for maximum portability, and works on desktop (IE8+ and all other modern browsers) and mobile devices (Android and iOS) alike. Cool!

Demo: Look above you.

---

Directions

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

Select All
<link rel="stylesheet" href="stickymenu.css" /> <link rel="stylesheet" href="stickymenumobile.css" /> <script src="stickymenu.js"> /*********************************************** * Sticky Horizontal 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>

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

• stickymenu.js
• stickymenu.css
• stickymenumobile.css (style for menu on mobile devices)

Step 2: Then, add the below sample sticky menu to the BODY of your page, usually near the top to act as a top menu:

Select All
<button id="stickymobiletoggler"></button> <div id="stickymenuwrapper"> <div id="stickymenudiv"> <ul> <li><a href="http://www.dynamicdrive.com/"><img src="../ddincludes/favicon.gif" /></a></li> <li><a href="http://www.dynamicdrive.com">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.javascriptkit.com">JavaScript</a></li> <li><a href="http://www.cmsroundup.com">CMS Roundup</a></li> </ul> </div> </div>

More Information

The markup for Sticky Menu consists of two outer DIV containers with a UL inside. All markup changes to the menu should be made to the UL itself. Whenever the user scrolls past the menu, a class of "sticky" is added to the BODY element itself, which causes the menu to become fixed in position so it remains in view. The style for both of the menu's states are defined inside stickymenu.css, which you can customize.

Mobile Menu configuration

Sticky Menu comes with an alternate, mobile optimized version that covers the whole page when shown:

By default this version is presented to users on small screen devices (700px or less), as defined inside stickymenumobile.css:

@media (max-device-width: 700px){ 
 "
 "
}

You can modify the above setting in a variety of ways, such as replacing the first line above with:

• @media (max-width: 700px){ Activate mobile menu whenever the browser width is 700px or less, mobile AND desktop browsers alike

• @media (max-device-width: 70px){ Change max width to a unrealistically low value, essentially disabling the mobile menu from appearing (so all users see the default sticky menu

NOTE: Your page should carry the META tag <meta name="viewport" content="width=device-width, initial-scale=1"> 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 would inactivate the responsive aspects of the menu.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post