Let me introduce you to Fancy Menu:

When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style as tabs. Lately, such navbars are everywhere, as many people believe they’ll make their site more Web 2.0-compatible. Personally, I just think they’re semantically better and accessible.

In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

Introduction

Every time that I know I’m going to use Javascript to alter the behavior or look of something, I try to come up with a simple markup, and make sure it renders perfectly with Javascript turned off. To illustrate this point, imagine that you want to make an element wider on rollover. The property Javascript would change is width:, so I make sure first that my style works when I modify the width randomly.

For this menu, as we’ll be having a movable element that acts as the background, we should first make sure that just by using css, we can freely move it and that it won’t affect the display of the menu. If you didn’t do this, when you’re coding the JS and face a bug, you’ll find yourself wondering if it is caused by the CSS, the Javascript, the browser?

Mark it up

Just like any other navigation, we’re going to use an unordered list with some anchors:

See more and source : www.devthought.com

Related Posts

• Popular Mac OS X Dock Scrolling for your Weblog
Handling a long list of contents is one of the oldest problems in browsing. Probably scrolling i...
• Vista Start Menu
Vista Start Menu has been in development as an attractive and efficient alternative to the Start Men...
• CSS Dock Menu Sexy MacoSX
If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery ...
• Make Windows XP Act Like Vista
Not thrilled about spending a bundle on Vista–and dealing with potential bugs and hardware upgrade...
• Make Windows XP Act Like Vista
Not thrilled about spending a bundle on Vista–and dealing with potential bugs and hardware upgrade...
• Video How To Make a USB Power Fan
How To Make a USB Power Fan If you are looking for a cheap way to stay cool this summer, this...
• Make Windows XP Act Like Vista
Not thrilled about spending a bundle on Vista–and dealing with potential bugs and hardware upgrade...
• Search to Start for vista
If you’ve become used to surfing your Program Menu to get to applications, you’ll be in for a sh...
• Extend Vista start menu search functionality with Start++
Start++ extends Vista ’s already impressive start menu functionality with configurable key command...
• Choose from the list of CSS menus
13styles is all about css website navigation menus. The menus are list based, very light-weight,...