Giter Club home page Giter Club logo

umarmughal / jquery-listmenu Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ihwy/jquery-listmenu

0.0 2.0 0.0 126 KB

This plugin allows a web developer or designer to easily convert an 'ordinary' list of HTML items into a compact, letter-based dropdown menu control that displays the list items in a fly-out menu that can be styled to suit any design. Great for creating snazzy navigation for product lists, lists of businesses, contact lists, anything you can think of.

JavaScript 82.70% CSS 17.30%

jquery-listmenu's Introduction

jQuery ListMenu Plugin

This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable 'first-letter' based menuing system, allowing quick and 'out-of the-way' access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the letter or menu closes the submenu. Mousing between letters is very fast and the columns in the submenu are nicely balanced.

This is great for product lists, address books, contact lists, lists of hotels, parks and recreation areas, etc.

View the Demos

Highlights

  • Easy to unobtrusively add to existing lists of HTML elements.
  • Works nicely with UL and OL lists as well as any 'list' of HTML elements (child elements under a parent element).
  • Uses the first found letter of "actual text" in each list item (even if the text is nested inside multiple HTML tags) to determine what navigation letter to put the item under.
  • Creates balanced-height columns in the dropdown menu, taking into account the actual height of each element, rather than just going by count.
  • If your list is an OL, numbering in each submenu starts at 1 and is carried across columns, top to bottom, left to right, maintaining a logical sequence.
  • Optional hovering "record count" over each letter shows user how many items are under the letter.
  • Optional '[0-9]' menu item for access to list items that start with a number.
  • Optional '[...]' menu item for access to list items that start with punctuation or chars like ร„ and รœ.
  • Optionally set the text that appears if a letter with no list items is clicked.
  • Designed with CSS styling in mind. Style all aspects of the list navigation and dropdown menu via CSS.
  • Make letters with no list items appear "disabled" using an optional CSS class.

More Information

For complete info about how to use this plugin, see the jQuery ListMenu page at the iHwy, Inc. site.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.