• :: jQuery ::
  • Intro
  • jquery.printf.js
  • jquery.image.js


• :: Legacy ::
  • Intro
  • Coding Style
  • main.js
  • fieldgroup.js
  • formval.js
  • date.js
  • image.js
  • tooltip.js

Description

Menu are universally useful on any site. There are millions ways of implementing them, from a simple list of hyperlink to a sophisticated chain of static/popup menus. This module will make the later catefory painless; you'll be able to build menu bars, vertical navigation menus, popup menus that show up when clicking or mouseover'ing an element of your page.

Coding a menu system that works well is anything but trivial. Sure, single level menus can be done simply, with straight HTML+CSS codes (this is not necessarily a good thing to use this javascript implementation in this case), but complexity arises immediately when you want to cascade them into popup chains. Many little details are really tough to get right, you know what we are talking about if you ever tried to code your own. And not surprisingly, browsers and [lack of]standards makes your life sometimes miserable for no reason.

How to use it

IE users, read this first!

Using Internet Explorer, you'll find the responsiveness of the menus in this page sometimes really bad, with menu items showing selected long after you mouse over them. It has nothing to do with a heavy javascript coding, it's just a strange IE behavior with elements that don't have a "position: absolute" style. Try this: create a UL, attach a :hover style over its LIs, and see: it's slow. Now, move this UL into a DIV with absolute positionning: it rocks! Don't ask me why, it's so. See this problem in action in this example:

If like me you dislike such latency, just move your menu in absolute DIVs; this is not always practical, but this change the end user feeling. Note that only static menus are affected; popups are always within absolute DIVs.

Creating menu structure

Using this module, menus are created by following a stricly defined layout, based on nested UL elements, each representing a menu in the hierarchy. This structure is as follow:

<div style="visibility:hidden;" class="MyMenuClass" mjstype="menu"> <!-- Menu container -->
<ul >                                    <!-- root menu -->
  <li><a href="link">Option 1</a></li>   <!-- First option of the root menu -->
    <li><a href="link">Option 2</a>
      <ul>                               <!-- Sub menu (popup) -->
        <li><a>Sub option 1</a></li>     <!-- Option 1 of the submenu  -->
        <li><a>Sub option 2</a></li> 
      </ul>
    </li>
  </ul>
</div>

• the menu container must be a DIV element, with the mjstype attribute set to either "menu" or "menubar", according to the choosen layout (vertical or horizontal respectively)
• you may prefer to set the container hidden, so that it's not getting displayed until it gets fully initialized
• every UL correspond to a menu or a submenu. Submenus are always "popup" (they show and hide automatically according to mouse movement and clicks). The root menu can be "static", which means that it is rendered within the page and doesn't hide. It also may be "popup" when the whole menu structure is attached to another element.
• every LI correspond to one item of the containing menu. It can itself contain either a text, an hyper link (<a>...</a>) or a <HR> element, whch denotes a separator.
• you can attach ID and CLASS attributes to the DIV container, the UL and the LI elements only

Menu bars

<div class="MyMenuClass" style="visibility:hidden;"  mjstype="menuBar"> 
  <ul>
    <li>File</li>
    <li><a href="open.html">Open ...</a></li>
    ...
  </ul>
</div>

Column menus

<div class="MyMenuClass" style="visibility:hidden;" mjstype="menu"> 
  <ul>
    <li>File</li>
    <li><a href="open.html">Open ...</a></li>
    ...
  </ul>
</div>

Styling menus

Adding CSS styles to menu is somewhow mandatory because a style-less menu looks extremely bad:

The necessary styles are a little complex to setup because we deal with many elements. Also, the menu module attaches itself a few styles:

Here is how the menu in this page got styled. There are probably hundreds alternatives, but by following this one and changing the few values that don't suit your needs, you're on the safe side.

.MyMenuClass
{   /* Choose font & background for the whole menu tree */
    font-family: "Lucida Sans", "Lucida Grande", "Trebuchet MS", sans-serif
    font-size: 15px;
    background-color: #EEEECC;
}
.MyMenuClass UL
{   /* no space between borders and options; no bullets either */
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.MyMenuClass LI
{  /* no space between link and option boundaries */
   padding: 0px;
   margin: 0px;
}
.MyMenuClass A
{ /* defines the space around option text/link */
  padding: 3px 10px 3px 10px;
  color: #030;
  text-decoration: none;
}
.MyMenuClass .menu_static
{ /* static menus get a dashed frame */
  border: 1px dashed black;
}
.MyMenuClass .menu_popup
{  /* popup menu get the "outset" styled frame */
   border: 1px;
   border-style: outset;
}
.MyMenuClass .menu_selected
{  /* selected option have a special background */
   background-color: #ddb;
}

Automatic navigation menus

This type of menu is used on the left side of of this site.

Technical notes

How it works

JavaScript API