Home | Download

jQuery Lava Lamp Horizontal Navigation Menu (Part 1)

The first step of this jQuery Lavalamp Tutorial is to make a CSS Horizontal Navigation Menu. In this jQuery tutorial, we use DreamWeaver Webpage Editor to compose the Horizontal Menu. Actually any webpage editors or even a notepad can do the same job.

jQuery Video Tutorial

jQuery Tutorial Goal

jQuery Lavalamp menu

The above CSS Horizontal Navigation Menu will be created upon finish this tutorial. The CSS Horizontal Navigation Menu composed of five menu items:

  • Home
  • New Product
  • My Account
  • Shopping Cart
  • Check Out

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

HTML Layout of Header Section and CSS Horizontal Menu

To create a more interesting Navigation Menu, a Header is also added. Actually, this is a very common layout of a webpage.

This is the HTML codes of the CSS Horizontal Navigation Menu. The Horizontal Menu is enclosed within a Div Layer (mainNavMenu)

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

Download Tutorial Source Codes

The complete source codes of this tutorial is available to download for free.

HTML file css-horizontal-menu.html
JPEG File menu_bg.jpg
JPEG File menu_partition.jpg
CSS filestylesheet.css

Click here to download the source file.

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