Alert icon
We're changing our privacy policy. This stuff matters.  Learn more  Dismiss

jQuery Horizontal Navigation Menu - Lavalamp 2 of 2

Loading...

Sign in or sign up now!
Alert icon
Upgrade to the latest Flash Player for improved playback performance. Upgrade now or more info.
13,400
Loading...
Alert icon
Sign in or sign up now!
Alert icon

Uploaded by on Apr 28, 2010

http://bit.ly/GoDaddy-Hosting-Sale Check out these great GoDaddy Hosting Plans!


This is part 2, Here is the link to part 1:
http://www.youtube.com/watch?v=V9WPvTdBD30




In this Dreamweaver Tutorial by James at http://www.dreamweavertutorial.co.uk we will create a css menu and use Java Script from the jquery library to turn the menu in a JQuery lava menu. The J Query Menu effects were devised at gmarwaha. Here is a link to their website:

http://www.gmarwaha.com


We will create an unordered list and use jquery and css to turn the list menu into an animated lava lamp menu in Dreamweaver. There is a free download provided which includes:

1 x Lava Lamp bubble image (png)

1 x stylish pixel gradient

1 x marble effect seamless background

1 x minified jquery library file

1 x J Query Easing script

1 x J query Lava Lamp script


Here is the link to ****** FREE DOWNLOAD ***** - Jquery lava menu Dreamweaver Exercise Files:


http://bit.ly/lava-Lamp


Here is an example page of the menu in action. Check it out ! :


http://www.dreamweavertutorial.co.uk/dreamweaver/examples/lava/lava.html



My website:

http://www.dreamweavertutorial.co.uk


Follow me on Twitter :


http://www.twitter.com/dreamweaverman


My RSS Feed for Advanced Dreamweaver Tutorial updates:

http://www.dreamweavertutorial.co.uk/feed.xml

  • likes, 2 dislikes

Link to this comment:

Share to:

Uploader Comments (DreamWeaverTutorial)

  • I need some help: when I add the actual links for the .html files, and I click a link from the navigation bar, the lava background doesn't stay on the current page (it jumps back to "Home" link).. Anyone know what I can do?

  • @manute32 hi, go to my website, look for the written tutorial of the same name, go to the bottom and you will see how to set the links the way you want. Check also the comments.

  • Hey! It was working until the javascript part ...I copied and pasted the lava-css-styles script and the links came in fine but once i copied and pasted the script hooks file into the html, the bubble rollover did not work.....aaargh! what did i do? I checked to see if the scripts were outside the site root....THEY were not, what is the issue? and I also browsed for each js file like u said.

  • @bibonye76 hi, please provide an online link to the page so that I can look at the problem

  • @bibonye76 hi, please provide an online link to the page so that I can look at the problem

see all

All Comments (58)

Sign In or Sign Up now to post a comment!
  • hi james plz tell me how to change the bubble color thanks

  • @Wylde0328 just link the javascripts again Shift+2 and than browse it!It will help You!

  • @arcastrillo just set the .lavaLamp { position: relative; height: 51px; margin:0 auto; width: 800px; padding:0; overflow: visible;

    }

    to higher px-s. I had the same problem, but it's working fine!

  • Thanks!! You really give a nice tutorial...

  • Hello it worked fine for me. but i have one problem. as long as the page is home page (index.html) it is highlighting that home link.. but if i click on the other link(say contact us), i am able go to contact page but it is not highlighting the link until i click the same link(Contact us) one more time.

  • I added 6 buttons to mine and for some reason the 6th button doesn't line up w/ the others, it appears right below the home button. I went back and followed the tutorial on your site and it seems that I did everything correctly. Any clues as to what happened?

    Other than that great tutorials. Keep them up.

  • my bubble comes up on the rght side of my items in the navbar n keep moving to the right wen u move over a menu item help plzz

  • I have uploaded a video that may help....my channel is bibonye76

Loading...

Alert icon
0 / 00Unsaved Playlist Return to active list
    1. Your queue is empty. Add videos to your queue using this button:
      or sign in to load a different list.
    Loading...Loading...Saving...
    • Clear all videos from this list
    • Learn more