jQuery Web Page Design Tutorials

jQuery Lava Lamp Horizontal Navigation Menu (Part 2)

The CSS Horizontal Navigation Menu was made in previous tutorial. Once the CSS Horizontal Navigation Menu was made, this is rather easy to customize to other styles. In this jQuery tutorial series, the CSS Horizontal Menu will be customized into a Lava Lamp Horizontal Navigation Menu.

In Part 2 of this jQuery Lava Lamp Horizontal Navigation Menu tutorial, the styles of the menu will be customized as shown in the diagram.

jQuery Video Tutorial

jQuery Tutorial Goal

jQuery Lavalamp menu

This is what the styles of the Horizontal Navigation customized:

  • Set the Main Menu Layer a relative position. This way, the menu items and lava lamp box can float above it.
  • Set the position of the whole Menu to absolute so that it floats above the Main Menu Layer.

To show how the codes works, a TextArea field was added below the Menu.

The 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 2 of this tutorial:

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

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

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