Posts Tagged ‘Dropdown’

Open source code has hastened the development process for everyone involved. Larger platforms such as WordPress have completely revolutionized the methods in which we create websites. But also consider the smaller plugins built for animation, form effects, and of course navigation menus.

This gallery includes the absolute best jQuery plugins for creating a dropdown navigation. Each plugin is completely free to use on any type of project. Most of them also have excellent online documentation which you can follow to customize the style, color, animation, or other similar design properties.

Dropdown Effects

simple drop down animation effects

Read the rest of this entry »

Makisu is an experimental and very original dropdown menu with a 3D appearance which can fold up and down with a slick effect.

The menu uses CSS 3D and comes as a jQuery plugin which auto-converts any targeted list elements.

Makisu CSS 3D Menu

It has several options for customization like the duration of the animation, shading color, perspective used for the menu and more.

For browsers without CSS 3D support, it falls back to a standard list.

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.

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.

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.