This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

3. Designing the Digg Header: How To & Download

Navigation is compacted with the use of simple drop-down menus.

4. Create The Fanciest Dropdown Menu You Ever Saw

5. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

6. A Different Top Navigation

In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

Preview Demo
7. Perfect signin dropdown box likes Twitter with jQuery

Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.

8. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

9.Fancy Sliding Menu for Mootools

10. Create Vimeo-like top navigation

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

Preview Demo
11. Dynamic PHP/CSS menu

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Preview Demo
13. Animated Drop Down Menu with jQuery

14. jQuery UI Potato Menu

Preview Demo
15. Make a Mega Drop-Down Menu with jQuery

Preview Demo
16. A cross-browser drop-down cascading validating menu

Just simple CSS menu.

Preview Demo
17. Drop-Down Menus, Horizontal Style

Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.

Preview Demo
18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

Preview Demo
19. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

Preview Demo
20. jQuery (mb)Menu 2.7

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

Preview Demo
21. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu

Preview Demo
22. Smooth Navigational Menu (v1.31)

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

Preview Demo
23. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Preview Demo
24. Longed-For Multi-Level Drop-Down Menu Script

Preview Demo
25. jQuery & CSS Example – Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Preview Demo
26. Reinventing a Drop Down with CSS and jQuery

Preview Demo
27. Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.

Preview Demo
28. Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

Preview Demo
29. jQuery iPod-style Drilldown Menu

Preview Demo
30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Newer version of previous iPod style menu.

Preview Demo
31. mcDropdown jQuery Plug-in v1.2.07

Preview Demo
32. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.

Preview Demo

33. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Preview Demo
34. Professional dropdown #2

Preview Demo
35. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

Preview Demo
36. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

Preview Demo
37. Dynamic Drive – Multiple Level Menus

A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.

38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu

Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

A good trick, I thought while doing this, using class name to restrict the Ajax cal

I successfully used the same “behavior” of tabbed navigation in “front-end”, was easy at the end (always with Magento, when you get it), but I was struggling at the start. So, like my other posts, to share here’s how I used the same type of tab in Magento’s Front-end.

First thing is add the Tab’s Java-script file. You can either include by layout or in PHTML file. If you want to do from layout then,1 <reference name=”head”>
2 <action method=”addJs”><script>mage/adminhtml/tabs.js</script></action>
3 </reference>

Next thing is to create Tab’s Menu inside UL & LI. Here’s the structure. (Self Explanatory)01 <!– TAB MENU STRUCTURE –>
02
03 <ul id=”page_tabs”>
04 <!– NORMAL TAB –>
05 <li>
06 <a id=”normaltab” name=”normaltab” href=”#”> NORMAL TAB </a>
07 <!– NOTE: class has to be tab-item-link–>
08
09 <div id=”normaltab_content”> Normal Tab HTML</div>
10 <!– NOTE: See the id of this div content it has id equal to its anchor’s (<a>) id + Underscore + content –>
11 </li>
12 <!– NORMAL TAB END–>
13
14 <!– AJAX LOADED TAB –>
15 <li>
16 <a id=”ajaxtab” name=”ajaxtab” href=”http://example.com/magento/module/controller/action”> AJAX TAB </a>
17 <!– NOTE 1: class has to be tab-item-link ajax notloaded –>
18 <!– NOTE 2: Since this is Ajax Loaded Tab its Anchor should have href value = SOME URL –>
19
20 <div id=”ajaxtab_content”></div>
21 <!– NOTE 1: See the id of this div content it has id equal to its anchor’s (<a>) id + Underscore + content –>
22 <!– NOTE 2: Since its innerHTML will be loaded by by Ajax you can set its innerHTML “blank” –>
23
24 </li>
25 <!– AJAX LOADED TAB END –>
26 </ul>
27 <!– TAB MENU STRUCTURE END –>
28
29 <!– TAB CONTENT CONTAINER DIV–>
30 <div id=”tabcontainer”></div>
31 <!– TAB CONTENT CONTAINER DIV–>

Now its the time to use the Tabs JS included, like below.01 <script>
02 // Form Key Required for POST AJAX Method
03 var FORM_KEY=”<?php echo Mage::getSingleton(‘core/session’)->getFormKey() ?>”;
04
05 // Set this to false, Guess used for some other purpose in backend, not really required in frontend.
06 var varienGlobalEvents=false;
07
08 // Initiallizing Varien Tabs
09 /**
10 * @param 1 : UL Menu ID
11 * @param 2 : Target Tab Content ID
12 * @param 3 : Initially Loading Tab’s Id
13 * @param 4 : Don’t know yet, just use as it is (LOL)
14 */
15
16 frontend_tabsJsTabs = new varienTabs(‘page_tabs’, ‘tabcontainer’, ‘normaltab’,[]);
17
18 </script>

Done! You must now have a functioning Tab loading by Ajax and Normal, but yes tab would look good if you add CSS to your Tabs. Here is how it works.
On load it first copies the tab_content div inside the Target Tab Content ID div.
On tabbed menu clicked it checks its class name and if it class name does not have “ajax” it simply shows the its_content div.
If the menu clicked has “ajax” then it checks for another class name “notloaded”. So if its ajax and notloaded it then makes an Ajax request and updates the responseText to itsid_content div and then removes the “notloaded” class name for the menu. After that it then displays the itsid_content div, hiding previous ones.
If you re-click the “Ajax” typed menu, it will not find “notloaded” class in its menu, then it just shows its_content div.

Lets focus on the #17-#26 Lines of codes. Other Lines are already described on other posts. Please see the related post link below the post.
#17: Creates a GMarker on the point where clicked on the Map.
#18: Addes the GMarker over the Map.
#19: Initiates an array of tabsinfoTabs with GInfoWindowTab function with tabname and its innerHTML as parameters.
#20: Opens the infowindow calling openInfoWindowTabsHtml function and the array of tabs as parameters.

[Download]

In this post, I’ll show you how to make various animation to the content using jQuery. First of let’s start looking at the HTML and CSS code,

HTML Code for animated content navigation

<a href="#home" class="linkclass" >Home</a>
<a href="#about_us" class="linkclass" >About Us</a>
<a href="#service" class="linkclass" >Services</a>
<a href="#contact_us" class="linkclass" >Contact Us</a>

<div class="container">
    <div id="home" class="msg_body"> content goes here </div>
    <div id="about_us" class="msg_body"> content goes here </div>
    <div id="service" class="msg_body"> content goes here </div>
    <div id="contact_us" class="msg_body">  content goes here </div>
</div>

As you can see above, the “href” attribute of the anchor tag is pointing to the id of the “div”. “Home” anchor tag is pointing to “#home”. In jquery, id of a element is represented by adding “#” prefix to the id of that element.

CSS code for animated content navigation

.container
{
   width:312px;
   margin-top:20px;
}
.msg_body
{
  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;
  background-color:#F4F4F8;
  text-align:justify;
  position:absolute;
}
.linkclass
{
  font-weight:bold;
  color:#006699;
}

Above CSS code is pretty straight forward and you can change it according to your need. Note that, there is position attribute to “absolute” in the “msg_body” class. Now let’s look at various the javaScript code in jQuery to make the various animated content navigation

Faded content navigation

 //hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
  $('.msg_body').fadeOut("slow");
  $($(this).attr("href")).fadeIn("slow");
});

In the first line of javaScript code, all the element with class “msg_body” is made hidden except the first element with same class. And when the anchor with class “linkclass” is clicked, the element with class “msg_body” gets faded out which is being displayed in browser. And, the element with the id value in the “href” attribute of the clicked anchor tag, get displayed in browser with fading effect.

Shutter like content navigation effect

//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').hide("fast");
   $($(this).attr("href")).show("slow");
});

The code is same as the above code but here “hide()” and “show()” function of jQuery is used to hide and display the content in different manner.

Sliding Content Navigation Effect

 //hide the all div except first one
 $('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').slideUp("slow");
   $($(this).attr("href")).slideDown("slow"););
});

This is another content navigation effect with sliding manner. “slideUp()” and “slideDown()” functions of jQuery is used to display this kind of effect.

Download full source code

Directly taken from the website of jQuery -” jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages”.It is basically a JavaScript framework for writing huge task of JavaScript with few lines of code.

What are the benefits of jQuery?

1) 5 lines of code of jQuery can perform better task than 25 lines of traditional Javascript code.
2) Various number of plugins are available and a large community support this project it is better to use jQuery in your project compared to other JavaScript frameworks like prototype.js or moottools .
3) jQuery’s website contains very good documentation with useful examples.
4) It simplifies the Ajax Development. Just have to write 5 or 6 lines to call the Ajax. Isn’t that easy??

Well these are just few benefits of jQuery but if you start using jQuery then you’ll come to know about the actual benefits of using jQuery. And believe me, It worth using jQuery in your web applications otherwise just blame me.

Basic Examples of jQuery :

$(document).ready(function()
{
    $(".button").click(function ()
    {
      $("p").hide("slow");
    });
});

In the above example, when a element with class “button” is clicked, all the paragraph element (“p”) will be hidden in the whole document in slow movement i.e. with slight animation.

$(document).ready(function()
{
      $("#divid").load("sample.php");
});

Above is the example Ajax using jQuery, look how simple it is to use ajax using jquery.The response got from the sample.php file is filled inside the element whose id is “divid”.

Free Ebook for download :

Well I’ve downloaded a E-book of jQuery in chm format.It contains chm version of the document found in docs.jquery.com. This E-book contains the very good documentation as well as useful examples.

You can download the Ebook by clicking here.

Step 1:
First of all, define two classes in css one for “loginimage” and the another for “bidimage” in the “style.css” file

.bidimage
{
  background-image:url(images/bid.gif);
  background-repeat:no-repeat;
  height:28px;
  width:62px;
  cursor:pointer;
}       

.loginimage
{
  background-image:url(images/login.gif);
  background-repeat:no-repeat;
  height:28px;
  width:62px;
  cursor:pointer;
}

Since image is used as the background in div, the height and width should be defined and declared one pixel more than the background image.

Now, keep in the following division in the “index.html” inside the body tag.

<div class="bidimage"> </div>

Now, define the script for the hover effect using jQuery inside the the “index.html” file.

<script>
$(document).ready(function()
{
  $("div.bidimage").mouseover(function ()
  {
    $(this).addClass("loginimage");
  });

  $("div.bidimage").mouseout(function ()
  {
    $(this).removeClass("loginimage");
  });
});
</script>

As you can see above in the script, when mouse is over div with the class bidimage the “loginimage” class is added the that div.And, when mouse is out the “loginimage” class is removed from the division.

Click here to download the full source codes

I’m going to show you the examples both in “tables” and “div”.

First , define the tables and div as shown below in the “index.html” file,

<table border="1">
  <tr><td>Michael</td></tr>
  <tr><td>Sam</td></tr>
  <tr><td>John</td></tr>
  <tr><td>Jason</td></tr>
</table>

 <div>Michael</div>
 <div>Sam</div>
 <div>John</div>
 <div>Jason</div>

Now, we need to write the script for displaying the different color in the alternate row,

<script src="jquery.js"></script>

<script>
$(document).ready(function()
{
  //for div
  $("div:odd").css("background-color", "#F4F4F8");
  $("div:even").css("background-color", "#EFF1F1");

  //for table row
  $("tr:even").css("background-color", "#F4F4F8");
  $("tr:odd").css("background-color", "#EFF1F1");
});
</script>

The filters “even” and “odd” can be used in jQuery for selecting odd or even index of the elements.As you can see above the background color of the odd and even “div” are changed using the “css” method and “odd” and “even” filters of jQuery and the same applies for the even and odd “tr” which means for the row of table.

Download Full Source Code

HTML Code :

<div id="firstpane" class="msg_list">
 <p class="msg_head">News-Head-1 </p>
  <div class="msg_body">
   orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
<p class="msg_head">News-Head-2</p>
 <div class="msg_body">
  orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
 </div>
<p class="msg_head">News-Head-3</p>
 <div class="msg_body">
  orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
 </div>
</div>

Since, I’ve shown two examples, I’ve distinguished two container with two different id “firstpane” and “secondpane”.The html code of above is of first pane, The second pane’s HTML code is same with different id of the container “div”.

CSS Code :

p {
 padding: 0 0 1em;
 }
 .msg_list {
 list-style: none;
margin: 0;
padding: 0;
width: 383px;
 }
 .msg_head {
 padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
 }
.msg_body {
 padding: 5px 10px 15px;
background-color:#F4F4F8;
 }

the above CSS code is straightforward for making collapsible accordion and you can change the various attribute of the class as your need. But keep in mind that the “position” property of “msg_head” should be “relative”.

Javascript Code:

<script type="text/javascript" src="jquery.js"></script>

First of all, jQuery library is added in our source code. And the following codes are used for displaying the effect of expanding and collapsing.

//hide the all of the element with class msg_body
$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane p.msg_head").click(function()
{
  $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});

//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane p.msg_head").mouseover(function()
{
  $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});

As you can in the firt line, all the element with the class “msg_body” is hidden in the document. And after that, when a paragraph with class “msg_head” within id “firstpane” is cliked , the next “div” element with class “msg_body” is slidded toggling. But for the “secondpane”, when mouse is moved over the element with class “msg_head”, the next element with class “msg_body” gets slided down and all the other siblings with class “msg_body” gets slided up creating the effect of collapsible accordion.

Click here to download the full source code

Displaying random number in the random way

To display random number in the random way, what we need is get the random number and write the random in a certain interval.

HTML Code :

As you can see above, the “div” with id “random” gets updated within specified interval and when button is clicked it call the JavaScript function “randValue()”. The first parameter is the maximum of the random number and second parameter specifies how many times the action should be repeated to show the final random number.

JavaScript Code :

<script>
var i=1; //counter
function randValue(maxVal,no_of_time)
{
  i++; //counter increment
  document.getElementById('random').innerHTML=''; //element made blank
  //get a random no upto maxVal and round it to two decimal place
  var theNumber = (Math.random()*parseInt(maxVal)).toFixed(2);
  //put the number to that
  document.getElementById('random').innerHTML=theNumber; //gett
  if(i<=no_of_time)
    setTimeout("randvalue("+maxVal+","+no_of_time+")",300);
  else
    i=1;
}
</script>

As you can see in the first line, counter is set to 1. In the first line of the function, counter is incremented. And then, the content of the “div” is made blank.

var theNumber = (Math.random()*parseInt(maxVal)).toFixed(2);

As you can in this line, the random no is multiplied with the supplied argument to get the random number between zero to maxVal since Math.random() only returns the random number between 0 to 1. And, “toFixed(2)” expression rounds the number to two decimal places. And that number is placed in the “div”.And then “setTimeout()” calls the same function in every 300 millisecond until the counter reaches to “no_of_time”. And, finally the counter is set to 1 to iterate through the same action.

Download Source code

Now let’s check it how to do check the username avaiability in ajax and php using jQuery.

Html Code :

<div >
 User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
 <span id="msgbox" style="display:none"></span>
</div>

As you can see the above the “span” with id “msgbox” will show you the username availability message from ajax.

Css code :

.messagebox{
 position:absolute;
 width:100px;
 margin-left:30px;
 border:1px solid #c93;
 background:#ffc;
 padding:3px;
}
.messageboxok{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #349534;
 background:#C9FFCA;
 padding:3px;
 font-weight:bold;
 color:#008000;
}
.messageboxerror{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #CC0000;
 background:#F7CBCA;
 padding:3px;
 font-weight:bold;
 color:#CC0000;
}

I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.

As you know you can change the attriubutes of the css of the above code but keep in mind that “position” property should be “absolute”.

Javascript code :

First of all, the jQuery library is used,

<script src="jquery.js" type="text/javascript" language="javascript"></script>

And when the focus is moved from the textbox of username the following function is called which call “user_availability.php” through ajax and display the appropriate message with fading effect.

$("#username").blur(function()
{
 //remove all the class add the messagebox classes and start fading
 $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
 //check the username exists or not from ajax
 $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
 {
  if(data=='no') //if username not avaiable
  {
   $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
   });
  }
  else
  {
   $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
   });
  }
 });
});

As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.

After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.

Php Code:

//this varible contains the array of existing users
$existing_users=array('roshan','mike','jason');
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
 //user name is not available
 echo "no";
}
else
{
  //username available i.e. user name doesn't exists in array
  echo "yes";
}

In the above PHP code, I’ve added three usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.

Download full source