FF2+ IE8+ Opr8+

Responsive Hybrid Menu

Author: Dynamic Drive

Description: With mobile browsers now sharing the limelight with their desktop counterparts as the window to the web, having a intuitively responsive menu for your site is paramount. Well, Responsive Hybrid Menu attempts to be that menu. It's a responsive, 2 level navigation menu with multiple stages of adaptation depending on the user's screen size. The menu changes from a regular top menu bar with text anchors, to icons based, and finally to a left side bar menu as the user's screen size decreases. Adapt or die they say!

Demo: Look above! Resize your browser window to see the different states of the menu.

Directions Developer's View

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

Select All

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

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 would inactivate the responsive aspects of the menu.

Step 2: Wrap your entire <BODY> contents with a  <div id="wrapper"> tag first like so:

<BODY>
  <div id="wrapper">

   Your page contents here
   Your page contents here
   Your page contents here
   Your page contents here

 </div>
</BODY>

This step is necessary so that the script can shift the entire page horizontally whenever the side bar menu (in mobile mode) is revealed.

Step 3: Moving on, insert the markup for the menu immediately after the opening <BODY> tag and outside <div id="wrapper">:

Select All

And last but not least, insert the script portion of the script at the very end of your document, immediately before the closing <BODY> tag and outside <div id="wrapper"> once again:

Select All

In order words, what you should have at the end is the following structure:

 <!-- Menu CSS references here -->

<BODY>

  <!-- Menu markup here -->

  <div id="wrapper">

   Your page contents here
   Your page contents here
   Your page contents here
   Your page contents here

 </div>

 <!-- Menu script references here -->

</BODY>

And there you have it. Continue reading for more details on customizing the menu.

More Information

The first code block inside Step 3 above illustrates the markup for your hybrid menu, which consists of two <NAV> elements, the later containing a UL element which you should customize to modify the menu contents:

<nav id="mobile-menu"></nav>
 <nav id="menu">
  <ul class="main-menu">
   <li class="mobile-menu-item"><i class="fa fa-bars"></i></li>
   <li class="logo">
    <a href="http://www.dynamicdrive.com" title="Dynamic Drive">
     <img src="http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/ddlogo.png" alt="logo">
    </a>
   </li>
   <li class="parent">
    <a href="#"><i class="fa fa-html5"></i><span>Menu Item 1</span></a>
     <ul class="sub-menu">
      <li><a href="#">Submenu Item 1</a></li>
      <li><a href="#">Submenu Item 2</a></li>
      <li><a href="#">Submenu Item 3</a></li>
      <li><a href="#">Submenu Item 4</a></li>
      </ul>
      </li>
"
"

The code in blue highlights this UL element- it should contain at most one nested level, as at the moment Hybrid Menu is only a two-tier drop down menu.

Styling the Menu

All visual aspects of Responsive Hybrid Menu is controlled via CSS, inside hybridmenu.css, from . Simply refer to the comments inside the .css file to modify the desired aspect of the menu. To alter the responsive "points" when the menu changes  states, scroll to the bottom of the .css file and customize the CSS media queries portion of the code:

@media screen and (max-width: 1175px) { /* Stage 1: Hide menu text */

 #hybridmenu ul li a span {
   display: none;
 }

 #hybridmenu ul li i {
  display: inline-block;
 }

}

"
"

For a great introduction to CSS Media Queries, take a look at the tutorial "Introduction to CSS Media Queries".