Hypermenu Plugin

Inspired by Google Chrome bookmarks menu bar, this plugin can be used to group a long list of hyperlinks.

• >> Instructions
• >> Demo

Author: Carlo Tasca
Version: 1.0
Date: January 09, 2010
License: GPL license
Plugin project link: http://plugins.jquery.com/project/hypermenu
For help and comments:  http://brandammo.co.uk/blog

Hypermenu Instructions

1. Create a new HTML document.
2. Within the head of your document:
   • Load the jQuery framework (if the menu is to be made draggable, you need to also load the jQuery UI framework).
   • Load css file for the menu (default.css)
   • Include jquery.hypermenu.v1.js and jquery.dimensions.min.js.
   • On document ready:

     $(function(){
        var options = {
             isDraggable: true, // requires jquery UI/draggable
             initTotItems: 3, // total visible items
             hypertextMaxLength: 18, // main menu hypertext maxlength (strings with less characters won't be truncated)
             basketHypertextMaxLength: 30, // basked hypertext  maxlength
             substringAt: 18, // start substring position (better to be set to same value of hypertextMaxLength)
             basketSubstringAt: 30, // basket hypertext start substring position (better to be set to same value of basketHypertextMaxLength)
             readerPopDirection: '-', // hypertext reader pop direction ( - pops at the top, + pops at the bottom)
             basketPopDirection: '+', // hyperlinks basket pop direction ( - pops at the top, + pops at the bottom)
             animationItemTime: 400, // hyperlinks basket scrolling time 
             scrollUpHtml: '<img src="images/icons16x16/Navigation_Blue_Up.png" alt="scroll up"/>', // scroll up icon img tag
             scrollDownHtml: '<img src="images/icons16x16/Navigation_Blue_Down.png" alt="scroll down"/>', // scroll down icon img tag
             basketCloseBg: 'images/icons16x16/Restricted.png', // basket 'close' background icon image
             basketShowBg: 'images/icons16x16/Menu.png', // basket 'show' background icon image
             hypertextReaderEndPos: '27', // hypertext reader position( up or down)
             hypertextHoverImage: 'images/hm-item-hover.gif', // visible hyperlinks hover image
             linksBasketTop: 33, // hyperlinks basket top position
             linksBasketLeft: 20 // hyperlinks left top position
         
         };
         $('#hypermenu').hypermenu(options);
     });
     

3. Within the body of your document

   <div id="hypermenu">
       <div id="hm_group">
           <ul>
               <li>
                   <img class="hmicon" src="images/icons16x16/Document.png" alt="" width="16" height="16" /><a href="">jQuery and Javascript</a>
               </li>
               <li>
                   <img class="hmicon" src="images/icons16x16/Document.png" alt="" width="16" height="16" /><a href="">jQuery and Javascript</a>
               </li>
               <li>
                   ..etc
               </li>
           </ul>
       </div>
   </div>