jQuery: menu plugin and ideas

Tweet

If you want to create menus using jQuery, here is a good list of plugins and ideas to consider.

NavDock jQuery Plugin 1.2
"NavDock is a jQuery plugin that transforms your menu into a dock style menu." 

jQuery.tn34.facets 

jOrbital menu
"Group objects with similar functionality into one button. Save space and give users more interaction. Move your mouse over the share button to see what I mean."

jMenu : Horizontal navigations with unlimited dropdown sub-menus
"Menu 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."

Drop Menu
"With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element."

jQuery and CSS3 Awesome Slide Down Box Menu 
"we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering."

Apple Navigation with CSS3 
"Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques."

CSS: menu generators

Tweet

We all like to build CSS menus from scratch! However, sometimes time is not enough and even related costs are too high. If you need a helping hand in creating a good CSS menu, here's a collection of online tools which will speed up the developing process.
I hope you find it useful!
Here we go, my friends...

ASP & CSS: highlight selected menu item

Tweet

When creating menus for a web site, it is a good practise to use an inclusion, so that we write the menu only once. When the menu is included on every page, we might need to highlight the selected option in the menu itself.
For example, we can have a menu like:

• Home Page
• Option 1
• Option 2
• Option 3

When the user selects "Option 2" and load the related page, the menu should look like:

• Home Page
• Option 1
• Option 2
• Option 3

How can we do it? It's quite easy: we will use some ASP and CSS.

Web Design: develop an effective navigation menu

Tweet

When developing a web site, one thing we should concentrate on is the navigation menu. Considering that probably a menu is the most important part of our web development process, I would like to share some ideas about it, things to keep in mind while we start thinking about an effective navigation menu.

What kind of menu we need

The first thing we should consider - while our project is still a blank and white piece of paper - is: what kind of menu we really need? It seems a dumb question, but we need to focus on what is the true purpose of our - yet to be born - navigation menu.
Knowing what is the general purpose of our web site, lets us concentrate on the structure and content of the menu. For example: if our site is a marketplace, we need to focus on selling products, while if our site is just displaying our production range, we need to focus on products marketing.
The concept is quite clear if we compare two well-known web sites: Apple and Amazon.

CSS & HTML: nested lists with style

Tweet

One common mistake that I've found in many web pages is when a nested list is needed. Usually, we think that the following code is correct:

<ul class="list">
<li>A</li>
   <ul class="sublist">
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</ul>

Producing this:

• A
• 1
• 2
• 3

which looks good. But if you try to validate the above code, you will get some errors.

Web application’s menus

Tweet

When developing a web application, one of the things I am almost always dissatisfied with is menus. Thinking back to my first web app, I now realise how much I pondered and rethought about the user interface and about the way all the single functions are logically made available to the user. That is usually done through an intelligent menu.