Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

JQuery Lavalamp Menu - Dreamweaver Tutorial


Share this Dreamweaver Article:

The jQuery lavalamp menu is a fantastic and stylish horizontal navigation menu. In this jQuery tutorial we will be using jQuery and Dreamweaver to recreate the navigation menu in the example below. The navigation menu utilizes HTML, CSS and jQuery JavaScript combined to animate a floating lava bubble which floats along the horizontal menu as the web visitor hovers over each link. You will also notice that the lava bubble of the lavalamp menu dynamically alters its size depending on the length of the text link.


If you would prefer, you can watch a Dreamweaver video Tutorial for the jQuery Lavalamp Menu.

Once a link has been clicked upon, the lava bubble will then hold its position over the active link and that link will act as the bubbles home base so that when a user hovers over another link, the bubble will follow the mouse pointer but will then return back to the active link and hold position until another link has actually been click on. Special recognition goes to Gmarwaha.com for the scripts necessary to complete the Jquery Lava Lamp menu animations.



Check out a full page example version of this jQuery Lavalamp Menu



1. Download the jQuery Lavalamp Menu

I always define a new site for new projects and whenever I want to add something important to one of my websites

You will need to download the Dreamweaver and jQuery tutorial exercise files and recreate the site in Dreamweaver by defining a new site. Then once you have the menu built, you can then copy the design over into your website project if that is your wish. I always define a new site for new projects and whenever I want to add something important to one of my websites, and by defining a new site I can be sure that my websites general style sheets are not influencing the positioning of the lavalamp menu.







2. Add the HTML for the jQuery Lavalamp menu

The jQuery html is quite minimal and all that is needed is an unordered list with links inside of the list item tags. The lavalamp menu is enclosed inside of a div called ‘lavaWrapper’ and that jQuery div is enclosed inside of a div called ‘navbar.’ The navbar div contains the background image for the jQuery floating menu.

In essence, we now have a fully contained and easy to manipulate jQuery floating menu just waiting for the CSS and jQuery functions to animate it. If you were to copy and paste the script hooks for the lavalamp and the lavalamp css style sheet over to your web page, the lavalamp menu would be fully operational.

The jQuery floating menu lavalamp had been enclosed inside of an all encompassing div called ‘wrapper’ and just below the opening wrapper div and before the start of the navbar div there is a div called ‘header top’ which houses the background image called ‘navtop.png’ and came with the Dreamweaver and jQuery tutorial download files.


 
 <div id="wrapper">

        <div id="headerTop">

        </div> <!-- end header top div --> 

        <div id="navbar"> 

 <div id="lavaWrapper">

        <ul class="lavaLamp">

                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>

        </ul><!-- end ul class lavalamp -->
 
 </div>  <!-- end lavaWrapper div -->

  </div> <!-- end navbar div -->

 </div><!-- end wrapper div -->
    


3. Add the CSS styles for the Web Page

Now, it’s time to start adding the lavalamp css styles which combine with the jQuery scripts to make the jQuery slide menu work correctly with the lavalamp menu bubble.

The first lavalamp CSS styles we will add are to control the background images and position the elements in the right place. A universal selector in the form of an asterix ‘ * ’ is placed and the margins and padding set to zero which will override all default margin and padding styles currently in the web page and will give us a clean slate to work with our jQuery slide menu.

The height and width of the wrapper div is set to auto. The headerTop div is set to a width of 100% and the 'nav-top.png' background image is placed which will repeat across the width of the browser by default. If we didn’t take the margins and padding away using the universal selector, there would now be a gap between the edge of the browser window and the background image.


 * {    
        margin:0;
        padding:0;
 
 } 

 #wrapper {     
        width:auto;
        height:auto;
 }

 #headerTop { 
        width:100%;
        height:122px;
        background:url(../images/nav-top.png);
 }

 #navbar {
        background:url(../images/nav-bg.png);
        height:51px;
        margin:0px auto;
        padding:0;
 }

 #lavaWrapper { 
        margin:0 auto;
        width:700px; 
 }

A background image had been placed for the navbar div and the height set to 51 pixels which is the same height as the background image. The margins are set to zero for top and bottom, and auto for the left and right. The padding is set to zero. The same margins have been set for the lavaWrapper div as we don’t want anything to affect the lavalamp menu. The width is set to 700 pixels which is more than enough room to added longer link text if we need to.



4. Add the CSS styles for jQuery Lavalamp

Next, add the lavalamp CSS styles to control the lavalamp menu and bubble movement. The class ‘lavalamp’ was assigned to the unordered list is set to a position of relative and a height and width are specified as well as the margins and padding. The overflow is set to visible.

The list item tags are floated to the left which will turn our unordered list into a horizontal navigation menu. The list style is then removed from the navigation menu to remove the default unordered list bullets.

If you are at all confused as this point, do not worry because this tutorial is made so that you can copy and paste all of the styles and scripts and still get the jQuery slide menu to work.

The background lavalamp menu bubble image is styled inside of a pseudo selector class called ‘.back’ and is set to no-repeat and a position of absolute.

The lavalamp menu bubble image is also placed inside of another pseudo selector class called ‘.left’ and is positioned accordingly. At this point you might be thinking to yourself that there is not a list item tag with a class of '.back' or a class of '.left' and you would be right. The reason is because they will be brought into existence by the jQuery lavalamp scripts that we will placed into the head of our web page. The jQuery scripts will manipulate the DOM of the browser and attach the styles based on the hover styles contained inside the lavalamp CSS.

If you are at all confused as this point, do not worry because this tutorial is made so that you can copy and paste all of the styles and scripts and still get the jQuery slide menu to work effortlessly.


 /* Styles for the entire LavaLamp menu */

 .lavaLamp {

        position: relative;
        height: 51px;
        margin:0 auto;
        width: 520px;
        padding:0;
        overflow: visible;

 }

 /* Force the list to flow horizontally */

 .lavaLamp li {

        float: left;
        list-style: none;

 }

 /* Represents the background of the highlighted menu-item. */

 .lavaLamp li.back {

 background:url(../images/lava.png) no-repeat right -30px;
 width: 9px;
 height: 30px;
 z-index: 8;
 position: absolute;
 top:10px;

 }

 .lavaLamp li.back .left {
        background:url(../images/lava.png) no-repeat top left;
        height: 30px;
        margin-right: 9px;

 }

 /* Styles for each menu-item. */

 .lavaLamp li a { 

        position: relative;
        overflow: hidden;
        text-decoration: none;
        text-transform: uppercase;
        font: bold 14px arial;
        color: #333; outline: none;
        text-align: center;
        padding:18px 0px;
        z-index: 10;
        letter-spacing: 0;
        float: left;
        display: block;
        margin: auto 20px;

 }

 .lavaLamp li a:hover {

        color:#FFF;
        text-shadow:1px 1px 2px #000;
 
 }

Various other styles have been added to the jQuery lavalamp menu which styles the links and the hover effects.



5. Attach jQuery Library and Lavalamp Files

The following script links must be copied and placed inside the head of your web page and linked to the scripts in the Dreamweaver and jQuery tutorial exercise files that you have downloaded:


 <script type="text/javascript"src="path/to/jquery.js"></script>

 <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>

 <script type="text/javascript" src="path/to/jquery.easing.js"></script>


 

Using Dreamweaver’s time saving ability to browse for the source files if you delete the quotation marks and the contents of the ‘src=’ and retype the first quotation mark, an option to browse for the source files appears from a drop down menu like in the example below:

set up jQuery script hooks

Selecting the jQuery JavaScript Files for the Lavalamp Menu


Attach the JavaScript files which correspond with the script links until you have all of the JavaScript links set up for the jQuery floating menu.







6. Call the jQuery Lavalamp Menu

Finally, add the code below into the head of your document below the script links. This code is your jQuery floating menu script hook. The script contains a function which calls the lavalamp menu and its animations and attaches them to the horizontal navigation menu.


 <script type="text/javascript">

  $(function() { 

  $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })


 }); 

 </script>

Your Jquery lavalamp menu is now complete and contains the jQuery html, the lavalamp css controls and the jQuery script hooks necessary to bring it all together into a fully functional and stylish jQuery lavalamp menu. If you have any questions regarding the jQuery lavalamp menu tutorial then please leave a message in the commments box below.



Related Tutorials:

jQuery Lightbox Tutorial - Dreamweaver video tutorial

jQuery Lightbox Gallery - Dreamweaver video tutorial



blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials