like Google Chrome bookmarks menu bar with jQuery Plugin

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

  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: 'scroll up', // scroll up icon img tag
            scrollDownHtml: '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);
    });

Within the body of your document

   

       

               

  •                 altjQuery and Javascript
               
  •            

  •                 altjQuery and Javascript
               
  •            

  •                 ..etc
               
  •        

   

Dowload: http://www.htmldrive.net/items/download/96

Be Sociable, Share!

Leave a comment