jQuery Web Page Design Tutorials

jQuery Lava Lamp Horizontal Navigation Menu (Part 6)

This is the final step and the most important step of this jQuery Lava Lamp Horizontal Navigation Menu tutorial. The position and width of the clicked menu item need to be remembered so that the Lava Lamp box can be returned back.

jQuery Video Tutorial

jQuery Tutorial Goal

1. The position and width of the Lava Lamp Box was remembered when a menu item was clicked. The scenerio is shown in the diagram below:

jQuery Lavalamp menu

2. Since the position and width of the previous clicked menu item was remembered, the Lava Lamp box can return to the previous clicked menu item.

jQuery Lava lamp navigation

The jQuery coding and procedures were explained step by step in very details in the video tutorial.

HTML Layout of Header Section and CSS Horizontal Menu

The HTML codes of the CSS Horizontal Navigation Menu is same as Part 5 of this tutorial series:

<div id="mainNavMenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="product.html">New Product</a></li>
<li><a href="account.html">My Account</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="checkout.html" style="background-image:none;">Check Out</a></li>
</ul>

<div id="movingBox"><div id="movingBoxRightSide"></div></div>
</div>

<div style="margin-top: 50px; width: 400px; height: 100px">
<div id="output">Display Menu Item Information here...</div>
</div>

This is the end of jQuery Lava Lamp Navigation Menu Tutorial (Part 6).