Browsing articles in "Menu"
Jul
15

DropKick.js – Painless custom dropdowns

By Vinod  //  All, Javascript, Menu  //  1 Comment


Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making s@#t look good.

Jan
24

jMenu – horizontal navigations with unlimited sub-menus in jQuery

By Vinod  //  All, Javascript, Menu  //  1 Comment

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

Dec
18

Cursor following menu

By Vinod  //  All, Javascript, Menu  //  1 Comment

A website navigation menu that follows the cursor, created with the jQuery framework and CSS that’s easy to implement and configure.

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.

Dec
4

jQuery MegaMenu 2

By Vinod  //  All, Javascript, Menu  //  1 Comment

A sequel to the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and usability.

So whats new in jQuery MegaMenu 2

  1. A completely revamped JS and CSS code-base.
  2. Easier to use. (A lot simpler HTML and JS needs to be used to initiate the menu)
  3. Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple
  4. Customizable menu activation and deactivation actions. Now you can choose to activate the menu by click or by mouseover
  5. HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
  6. Automatic alignment of the menu content according to the width of the parent menu container.
  7. Variable width of the menu contents.
  8. Non obtrusive and easier to understand CSS.
Nov
26

MB.menu – Simply a multilevel tree menu

By Vinod  //  All, Javascript, Menu  //  1 Comment

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Sep
13

CSS3 Menu – Create CSS menu free!!

By Vinod  //  All, CSS, Menu  //  No Comments

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. Using this FREE CSS3 Menu you can create great looking buttons using just CSS3 in a few clicks.

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations.

You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. CSS3 transitions could one day replace all the fancy jQuery animation tricks people use.

Menu Features

No Javascript is required
Works in browsers with disabled Javascript or if a browser has no Javascript support at all.

Cool CSS3 properties
Multi-level dropdown menu is created using CSS3 rounded corners, CSS3 shadow (box-shadow and text-shadow).
Opacity, backround and font colors, linear gradient and radial CSS3 gradient are also supported.

SEO friendly
Search engines and text-only browsers friendly.

100% CSS-driven designs
The menu is based on HTML list of links (UL/LI structure) and CSS only. No additional non-css params are used.

Small size
Immediate loading of the menu. Doesn’t use additional files.

Browser support
Supports all modern browsers (except IE6).

GUI interface
Visual design user interface allows you to create your menus without the need for complex hand coding. Use the preview window to view your menu design while you are developing and customizing.

Aug
6

RocketBar – A jQuery And CSS3 Persistent Navigation Menu

By Vinod  //  All, Javascript, Menu  //  No Comments

In the given article you will see how we can create Persistent Navigation Menu easily with Jquery & CSS3.

Everyday on the web there’s something that we all do, almost regardless of the site that we’re on  – we scroll down. If we’re reading a blog post, looking through a product description or even just scouring through eBay listings..in every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.

Aug
3

wdContextMenu – JQuery Context Menu Plugin

By Vinod  //  All, Javascript, Menu  //  1 Comment

wdContextMenu is is very lightweight jquery plugin for right click menu.

  • Item specific. Context menu for specific area
  • Dynamical disabled menus/items
Jul
19

jsTree – JQuery Tree Component

By Vinod  //  All, Javascript, Menu  //  1 Comment

jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin.
jsTree is absolutely free (licensed same as jQuery – under both GPL and MIT – whichever suits your needs).

Features at a glance:

  • Various data sources – HTML, JSON, XML
  • Supports AJAX loading
  • Drag & drop support
  • Highly configurable
  • Theme support + included themes
  • Uses jQuery’s event system
  • Optional keyboard navigation
  • Maintain the same tree in many languages
  • Inline editing
  • Open/close optional animation
  • Define node types and fine tune them
  • Configurable multitree drag & drop
  • Optional checkbox tree support
  • Search function
  • Supports plugins
  • Optional state saving using cookies

Currently supported browsers are:

  • Internet Explorer 6+ *
  • Mozilla Firefox 2+
  • Safari 3+
  • Opera 9+
  • Google Chrome
Jul
17

SooperFish Multi-Column Animated Drop-down

By Vinod  //  All, Javascript, Menu  //  1 Comment

SooperFish is an easy to use dropdown-menu plugin with total configuration control and clean code.

Features:

  • Automatic dual or triple columns based on number of child menu items
  • Optional delay before hiding menu on mouse-out
  • Optional automatic indicator arrows (in black or white)
  • Configurable show AND hide animations
  • Custom easing supported
  • Works with jQuery backlava plugin (optionally)
  • Works fine with Javascript disabled
  • Comes with several free themes to demonstrate styling
  • 3.65kb uncompressed
  • 2.01kb minified