jQuery Web Page Design Tutorials

jQuery Lava Lamp Horizontal Navigation Menu (Part 5)

In Part 5 of this jQuery Lava Lamp Horizontal Navigation Menu tutorial, a round corners Lavalamp box will be used. A round corners Lava Lamp looks more interesting than a rectangular box.

jQuery Video Tutorial

jQuery Tutorial Goal

1. The rectangular Lava Lamp Box was customized into a round corners Lava Lamp box box as shown in the diagram below:

jQuery round corners Lavalamp

2. The round corners at the right side of Lava Lamp box is actually a div layer floating to the right side of Lava Lamp Layer.

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 after finished Part 5 of this tutorial are shown as below. Note that the div layer "movingBoxRightSide" is floating to the right side.

<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 5).