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

J Query Lava Lamp Menu - Dreamweaver Tutorial

A fanciful jQuery and Dreamweaver tutorial where you can download and install the stylish and functional jQuery lavalamp menu. More information below. Here is the link to Part 2: Lava Lamp Menu

jQuery Lavalamp Menu

Discover how to make this superb horizontal jQuery menu called the jQuery lavalamp menu which uses jQuery and CSS to animate a lava like floating bubble which dynamically changes its size according to the length of the text link it is hovering upon.



Check out the example below of the free jQuery lava menu that you can make in this jQuery Tutorial:



The jQuery lavalamp example above is available to view on this full-screen demo page and you can try out the jQuery lava menu and its great functionality from there.

Everything you need to make this jQuery CSS menu is available for a free download. Just click on the download button underneath the Dreamweaver tutorial video.

The jQuery menu effects and the default jQuery CSS styles are thanks to a website called gmarwaha.com.

The jQuery menu in this Dreamweaver tutorial is built by first creating a css menu with an unordered list. The unordered list is floated to turn it into a horizontal list menu.

Some JavaScript files are added to the head of the web page which will animate the jQuery list menu and give it the lava lamp menu effects.

Everything you need to make this jQuery CSS menu is available for a free download. Just click on the download button underneath the Dreamweaver tutorial video to download the css menu and jQuery library files. Also included in the free horizontal jQuery menu download are a texture noise background and a pixel gradient background which will become the background image for the jQuery list menu.

The floating lava bubble which makes the jQuery menu effects work, is a png transparent layer designed by myself and you can change its color to blend in with your web design project.

If you prefer, you can follow a written jQuery tutorial article explaining how to create a jQuery lavalamp menu. The Dreamweaver tutorial article gives further explanation about the jQuery CSS, full jQuery menu code examples which you can copy and paste into your webpage, and will show you how to set up the script hooks and the jQuery call function which makes the jQuery CSS menu animate effectively.



Related Tutorials:

jQuery Image Gallery - Dreamweaver and jQuery Article tutorial

jQuery lightbox plugin - Dreamweaver and jQuery Video tutorial

jQuery lightbox html - Dreamweaver article 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