For web developer

Archive for the ‘Menu & Navigation’ Category

Simple Dropdown Menus With Pop!

leave a comment

Pop! is a simple but effective jQuery plugin for creating dropdown menus.

It enables you to store any content in a container & shows/hides it with the clicks.

jQuery Simple Dropdown Menu

How to use it?

Insert the jquery.pop.js file into your webpage (make sure jQuery is inserted too)
Initialize it:

 <script type='text/javascript'>
   $(document).ready(function(){
     $.pop();
   });
</script>

Using the preferred pop! class, wrap the content:

<div class="pop">
   any content to display
</div>

That’s it.

Requirements: jQuery
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with

Vimeo-Like Top Menu Design

leave a comment

JankoAtWarpSpeed is presenting a nice tutorial with source files on creating a beautiful menu similar to Vimeo‘s top menu.

The menu is very functional that, within a limited space, a user can browse the website or search it in detail.

Vimeo-Like Menu

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it.

says JankoAtWarpSpeed. And it is succesfully done (although max. browser compatibility is missing, it is a good resource to start building a such menu).

A demo can be found here.

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with ,

Powerful CSS Menu Creator: CSS QuickMenu

leave a comment

Update 26.12.2008: This post is updated to reflect the original application.

CSS QuickMenu is a very powerful & web based CSS menu creator application.

CSS Menu Creator

After selecting the menu type & clicking the "customize menu" button, you can reach the editor.

The editor helps you to:

Add/remove/update menus & submenus
Update colors, fonts, borders..
Choose animations
Choose CSS shapes
Decide whether the menu will be reachable via keyboard or it will be horizontal/vertical & more..

It also enables you to add your own CSS styles and see the results instantly.

After creating the menu, HTML & CSS codes can be reached easilt via the "save" button.

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with

Free CSS Menus: Styled Menus

leave a comment

Styled Menus is a website presenting various free CSS menus.

Menus provided are cross-browser compatible & W3C validated.

Free CSS Navigation

There are currently 20 menus & new ones added regularly.

It is a handy resource to directly use them or to get inspired.

Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with

Context Menu Plugin For jQuery

leave a comment

Context menus are very helpful, specially in admin pages & web applications, for easier navigation. With just a click, you get the options / shortcuts.

This is a jQuery plugin for creating effective context menus with ease.

jQuery Context Menu

The menu can produces valid XHTML & can be customized totally via CSS.

Items in the menu can be disabled & they can be browsed with keyboard too.

For users without JavaScript enabled, it gracefully degrades.

Requirements: jQuery 1.2.6+
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with ,

Lightweight Multi-Level Drop-Down Menu

leave a comment

This is an easy to implement multi-level drop-down menu.

It is lightweight (1.2kb) & supports multiple instances on one page.

Multi-Level Drop-Down Menu

Rather than complicated JavaScript backends, this script converts an unordered list into a menu.

Sub-menus are displayed with an easing animation & it supports all major browsers.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with

Circular Menu With Sub-Menus

leave a comment

CSSPlay is presenting a chic circular menu that can have sub-menus.

Within a limited space, the menu offers a comprehensive browsing experience.

Circular Menu

There is also a small information that can be displayed when an item is hovered.

It uses ordered-lists for all major browsers & uses some tables if the browser is IE6.

P.S. The menu is not totally free. A donation is required for use.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with

Cross-Browser CSS Drop-Down Menu Framework

leave a comment

CSS Drop-Down Menu Framework is a free & cross-browser solution to create good looking menus.

Download package already contains examples but new themes can be created very easily.

Cross Browser CSS Menu

Menus can be transformed by only changing the class name. Available transformations are:

horizontal
vertical left-to-right
vertical right-to-left
horizontal linear
horizontal upwards.

The framework normally uses only CSS but for IE6, there is a JavaScript file that must be included.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with ,

jQuery Tabs Plugin: idTabs

leave a comment

idTabs is a jQuery plugin for creating simple to advanced tabs.

Tabs can be added dynamically, the "selected" tab can be acquired, idTabs can be binded to different events like mouseover.

jQuery Tab Plugin

Any element with a class name = idTabs becomes a tabbed area. Every link inside this class becomes a tab & the divs mentioned in these links become the content holders. To be more clear:

<ul class="idTabs">
  <li><a href="#jquery">jQuery</a></li>
  <li><a href="#official">Tabs 3</a></li>
</ul>
<div id="jquery">If you haven't checked out ...</div>
<div id="official">idTabs is only a simple ...</div>

is a basic 2 tabbed menu.

Requirements: jQuery
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with

Scrollable: jQuery Plugin To Scroll Content

leave a comment

Scrollable is a flexible & lightweight (3.9kb) jQuery plugin for creating scrollable contents.

Any content (HTML, video, text..) can be used as a scrolling item. And, it supports vertical scrolling besides the standard horizontal scrolling which makes it very ideal, specially for news sites or portals to present the flash contents.

JQuery Scroll Plugin

Other features of Scrollable are:

Setting the number of visible items
Mouse, arrow keys and mousewheel (requires mousewheel.js) support
Programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
Know when list is scrolled with custom event listener

This jQuery plugin is built by the FlowPlayer team (see WRD post) and includes great examples (this & this) with FlowPlayer integration.

Requirements: jQuery
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 7:56 am

Posted in Menu & Navigation

Tagged with