jQuery Web Page Design Tutorials

jQuery Lava Lamp Horizontal Navigation Menu (Part 3)

In Part 3 of this jQuery Lava Lamp Horizontal Navigation Menu tutorial, a Lavalamp Box was added to the Menu. Some jQuery codes were also written and tried to move the Lavalamp box along the hoved over menu item.

jQuery Video Tutorial

jQuery Tutorial Goal

1. A Lava Lamp box was added to the Horizontal Navigation Menu.

jQuery Lavalamp navigation

2. 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

This is the HTML codes of the CSS Horizontal Navigation Menu after finished 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 3).