CSS Codes
CSS Layouts
FF2+ IE8+ Opr8+

Compact Drop Down Menus

Author: Dynamic Drive

Description: This is a multi-level drop down menu that's also a space saver, by stacking the sub menus on top of one another when revealed.  The markup for each drop down menu is simply plain HTML, transformed by the script afterwards into the result you see on the page. CSS3 transforms are used for the transition effect between sub menu changes, though the menu is functional in legacy browsers as well, including IE8+. With the advent of a myriad of screen sizes, especially smaller screens, a compact drop down menu may just be what the doctor ordered!

Demos:

Demo 2

Demo 3

Directions Developer's View

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

Select All

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

It also uses a trio of JS libraries, which by default are referenced from CDNs and hence do not need to be downloaded- jQuery, jQuery Easing, and Modernizr.

Step 2: Then, add the below sample markup to your page:

Select All

That sets up the 3 demos you see above. Read on for details on set up and customization options.

Menu setup

Lets look at the markup of each compact menu first. A typical one in its entirety looks like the following:

<div class="container" style="width: 200px;">
 <div id="menu1">
 <div class="compactanchor">
 <a href="#">Anchor Text</a>
 </div>

 <ul>
 <li>
 <a href="#">Explore DD</a>

 <ul>
 <li><a href="http://www.dynamicdrive.com/">Home</a></li>
 <li><a href="http://www.dynamicdrive.com/new.htm">New Scripts</a></li>
 <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
 <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
 <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
 </ul>
 </li>

 <li><a href="#">Link Text</a></li>

 <li>
<a href="#">Link Text</a>

 <ul>
 <li><a href="#">Sub Link Text</a></li>
 <li><a href="#">Sub Link Text</a></li>
 <li>
<a href="#">Sub Link Text</a>

 <ul>
 <li><a href="#">Sub Link Text 1 - Sub</a></li>
 <li><a href="#">Sub Link Text 1 - Sub</a></li>
 <li><a href="#">Sub Link Text 1 - Sub</a></li>
 </ul>
 </li>
 </ul>
 </li>

 <li>
 <a href="#">Link Text 2</a>

 <ul>
 <li><a href="#">Sub Link Text 2</a></li>
 <li><a href="#">Sub Link Text 2</a></li>
 <li><a href="#">Sub Link Text 2</a></li>
 </ul>
 </li>
 </ul>
 </div>
</div>

The menu should consist the following components:
  • An outermost DIV with a CSS class "container" and an explicit width, which defines the width of the drop down menus.
  • Following that, an inner DIV with an unique ID attribute (ie: "menu1"). This  is the ID you'll be passing into the initialization function to initialize the menu.
  • Then, define an inner DIV inside the previous with a CSS class "compactanchor", which will house the anchor link of the menu. Edit compactmenu.css to style the anchor link.
  • Finally, define your nested UL menu that will make up the drop down menu itself, which should just be a regular nested UL element that conforms to valid HTML syntax.

Once you have the markup of the menu taken care of, using jQuery, reference the ID of the menu and call the function menu() on it in the HEAD section of your page, such as:

<script>

$(function() { // on DOM load
 $("#menu1").menu({
  theme: 'theme2',
  transition: 'inside-slide-fade-left'
 });
});

</script>

Where "menu1" is the ID of the menu as defined earlier in the markup, and inside the menu() function, a list of supported options. Lets see the available options you can pass into the function now:

option Description
transition: 'transition_string'

defaults to 'slide-fade-left'

The transition that's applied to the revealing of sub menus. The list of supported transition strings are:
  • 'slide-fade-left'
  • 'inside-slide-fade-left'
  • 'set3'
  • 'set4'
  • 'set5'

The last 3 options are variations of the previous 2.
theme: 'themename'

defaults to 'default"

 Specifies the CSS class that gets dynamically added to this instance of compact menu's outer container to style it. This lets you easily create separate themes for different compact menus on the same page.

For example, if you specify "theme-theme2" for this option, the CSS class that gets added to the markup of your compact menu would be:

<div class="container" style="width: 200px;">
 <div id="menu1" class="theme-theme2">
  <div class="compactanchor">
   <a href="#">Anchor Text</a>
  </div>

  <ul>
   <li>
    <a href="#">Explore DD</a>
"
"
"

Inside compactmenu.css, you can then define CSS classes based on that name to create separate themes for your menus. By default, there are 3 predefined themes inside compactmenu.css, which are:

  • theme-default
  • theme-theme2
  • theme-theme3
menuClass: 'classname'

defaults to 'compactmenu'

 Sets the shared common CSS class that gets added to all compact menu instances, alongside the "theme" class above. Typically no need to modify unless the default "compactmenu" value clashes with another CSS class on your page.

Here is the initialization code for the 3 demos you see above:

$(function() { on DOM load
 $("#menu1").menu({
  transition: 'inside-slide-fade-left'
 });

 $("#menu2").menu({
  theme: 'theme-theme2'
 });

 $("#menu3").menu({
  theme: 'theme-theme3',
  transition: 'set3'
 });
});

Styling the Menu

As one would expect, styling your compact menu is mainly done inside compactmenu.css.  A few pointers on that front:

  • The width of the drop down menus themselves within each compact menu by default is controlled by an inline CSS width property, defined on the outermost element of the menu markup:

    <div class="container" style="width: 200px;">
    "
    "      

  • The arrow that appear alongside menu items with sub menus is created from a dynamically generated SPAN that gets inserted into the former LI element. To style it, modify the CSS class:

    .compactmenu ul li span.sub{
    }

    and any respective theme classes.