jQuery Web Page Design Tutorials

jQuery Lava Lamp Horizontal Navigation Menu (Part 4)

In Part 4 of this jQuery Lava Lamp Horizontal Navigation Menu tutorial, the styles of the Menu and Lavalamp box were customized further.

jQuery Video Tutorial

jQuery Tutorial Goal

1. The styles of Menu and Lava Lamp box were customized further as shown in the diagram below:

jQuery Lavalamp

2. Same as previous tutorial, the Lava Lamp box moved to the Menu Item when mouse pointer hoved over.

jQuery Lavalamp 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 3 of this tutorial:

<div id="Header">This is the Header</div>
<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>
</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 4).