FF2+ IE8+ Opr9+

eFluid Responsive Top Menu

Author: Dynamic Drive

Description: Inspired by the drop down menu seen at the top of pages throughout Dynamic Drive,  eFluid menu is a responsive top menu that adapts to different devices and screen sizes elegantly, using CSS  media queries only to trigger the different break points. Go from a fully equip top menu bar on large screen devices, a two line menu on smaller screens, to a mobile optimized "hamburger" menu on mobile devices. The menu supports a single level of drop down menus, including arbitrary HTML, multicolumn sub menus.

The contents of the menu are centered and stretches to a maximum width of 1024px. The menu works best when embedded inside a fluid container that spans the entire width of the window. eFluid Menu works on all modern browsers and mobile devices, including IE8+.

Demo: Look above you (the menu replaces the default DD navigational bar)! Resize the window to trigger the various break points for the menu.

Directions Developer's View

Visit eFluid Menu's Github page to download the menu as a zip file, or follow the instructions below:

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

Select All

This script uses the following external files, which should be saved by default into the /assets sub directory from the menu page itself. Download them below (right click, and select "Save As"):

  • efluidmenu.js
  • efluidmenu.css
  • (down arrow image). Set path to it inside the .js file
  • (search submit image). Set path to it inside .css file.

Step 2: Then, add the below sample markup to your page. In general the menu should be added inside a fluid container that spans the entire width of the window (versus one with a fixed width) in order for the responsive behaviour of the menu to properly kick in:

Select All

That sets up the demo menu you see at the top of the page. Read on for details on set up and customization options.

Menu setup

The markup for a eFluid menu consists of a DIV container with an arbitrary but unique ID attribute, with a mobile menu toggler component and the main UL menu component with its first LI housing your site's logo (#sitelogo):

<div id="smoothmenu1" class="efluidmenu">

<a class="dd-animateddrawer" href="#">
<span></span>
</a>

<ul>
<li id="sitelogo"><a href="http://www.google.com/"><img border="0" src="ddlogov2.png"></a></li>
<li><a href="http://www.google.com">Item 1</a></li>
<li><a href="http://www.google.com">Folder 0</a>
	<ul>
	<li><a href="http://www.google.com">Sub Item 0.1</a></li>
	<li><a href="http://www.google.com">Sub Item 0.2</a></li>
	<li><a href="http://www.google.com">Sub Item 0.3</a></li>
	</ul>
</li>
<li><a href="http://www.google.com">Folder 1</a>
	<ul class="multicolumn">
	<li><a href="http://www.google.com">Sub Item 1.1</a></li>
	<li><a href="http://www.google.com">Sub Item 1.2</a></li>
	<li><a href="http://www.google.com">Sub Item 1.3</a></li>
	<li><a href="http://www.google.com">Sub Item 1.4</a></li>
	</ul>
</li>
<li><a href="http://www.google.com">Item 3</a></li>
<li><a href="http://www.google.com/style/">Item 4</a></li>
<li id="search">
	<form id="topform" method="get" action="http://www.google.com/search/search.php">
	<input type="text" name="zoom_query" id="zoom_query" size="20" class="zoom_searchbox topsearchbox" placeholder="search">
	<input id="query_submit" type="image" src="magnify.gif" />
	</form>
</li>
</ul>

</div>

The menu is initialized inside efluidmenu.js, at the very end with a call to:

jQuery(function($){ // on DOM lad
	efluidmenu({
		menuid: 'fluidmenu1' // initialize menu with ID 'fluidmenu1'
	})
})

The mobile menu toggler component

The "hamburger" mobile menu toggler is defined as a link with CSS class "dd-animateddrawer". This toggler is hidden on the page and only revealed at the "mobile menu" breaking point, which by default is when the browser window is 450px or less wide. Near the bottom of efluidmenu.css is where all the CSS media queries breaking points are defined.

The site logo component

The site logo of the menu is contained inside first LI element of the menu UL, with an ID of "#sitelogo". The default width of the logo is set at 55px, and shrinks to 40px once the browser window is 1100px or less.  See inside efluidmenu.css for more info.

The main UL component

Finally, there is the UL element, which has a maximum width of 1024px (configurable inside efluidmenu.css) and is centered inside the main menu DIV. At the moment eFluid menu can only support one level deep of nested menus. That being said, a drop down menu can consists of multiple columns. Details on the two different ways to implement multi-column sub menus here.

Configurable variables inside efluidmenu.js

At the top of efluidmenu.js are 3 variables you may want to customize:

var downarrow = 'assets/down.gif' // path to down arrow image
var fxduration = 300 // transition effect duration in milliseconds
var showhidedelay = [100,100] // show and hide sub menu delay in milliseconds

Configuring the "responsive" aspect of the menu

eFluidmenu is set up with 3 breaking points using CSS media queries by default. This can be seen at the bottom of efluidmenu.css:

  • When the device/browser width is 1100px or below, the "#sitelogo" element shrinks from 55px to 40px.

  • When the device/browser width is 930px or below, the "#search" element is hidden.

  • When the device/browser width is 450px or below, the menu switches to the mobile menu version, with the main UL element hidden by default and toggle-able using the now visible "hamburger" menu link.

You'll most likely want to configure some or all aspects of the settings above depending on how many menu headers you have.

Two ways to add a multi-column sub menu

eFluidmenu currently only supports one level deep of sub menus, though it makes up for this short coming by supporting multi-column sub menus. You can turn a regular UL nested menu into multiple columns, or specify an arbitrary DIV on the page as the sub menu, allowing for much more flexibility in what's shown inside the sub menu. See the page Two ways to add a multi-column sub menu for details on both methods of adding a multi-column sub menu.

Table Of Contents

This script consists of an index page plus a supplementary page: