jQuery Horizontal Navigation Menu – Lavalamp 1 of 2

Posted by: Admin  :  Category: Web Hosting Tutorials

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Host Unlimited Websites For .88 ! bit.ly Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, 0 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee This is part 1, Here is a link to part 2: www.youtube.com In this Dreamweaver Tutorial by James at 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 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: bit.ly Here is an example page of the menu in action. Check it out ! : www.dreamweavertutorial.co.uk My website: www.dreamweavertutorial.co.uk Follow me on Twitter www.twitter.com My RSS Feed for Advanced Dreamweaver Tutorial updates: www.dreamweavertutorial.co.uk
Video Rating: 4 / 5

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

24 Responses to “jQuery Horizontal Navigation Menu – Lavalamp 1 of 2”

  1. DreamWeaverTutorial Says:

    @ThatWi3rdWack Yes you will need either winzip or winrar or 7zip. Personally I use winRar to extract zip files.

  2. ThatWi3rdWack Says:

    try to open the downloaded file and it says i have to find an appropriate program for it?

  3. samrickman Says:

    @puffizzz you need to add a class in the ‘current’ list item. I can’t add the exact code, but for each list item you will need to add this …li class=”current”…

  4. puffizzz Says:

    Hey! Excellent tutorial but still needs some help. I want onlink on the navigation bar. Keep going back to home atm. How do i change that? Can’t find the code, tyvm

  5. Shion693 Says:

    Excellent work!!!

  6. smackdounnkol Says:



    Hello lava lamp 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), it is still highlighting the home link. If the click the contact us link one more time then it is highlighting the contact us link.

  7. smackdounnkol Says:

    thank you .. thank you so much..

  8. selftestengine Says:

    hey there
    I have seen all your videos,they are really good.please check out also my vids on my channel
    they are really good (that’s what i thought of them)
    if you like them than plzzz SUBSCRIBE
    Thnx in advance

  9. turkzrul619 Says:

    Hi james, when i import the nav menu as an iframe into my template and use the template on other pages such as ‘index’ and ‘contact’ all seems fine until i click onto the actual button… nothing happens and the whole nav image just disappears ?? am i meant to import it as an iframe?

  10. TheKidofdreams Says:

    Excellent tutorial. Can you make one showing how to make a chat client using PHP, AJAX and JQuery? Thanks

  11. Saiad92 Says:

    Great tutorial! I’ve watched alot ever since i learned about you in google search, and im beyond amazed with your work, i mean most people do crappy tutorials where they dont even show how they get the files, they just make it assuming we have everything. anyways, Im not a pro html / dreamweaver / css / javascript / but i’ve learned the basics kinda :D, anyways im having a problem with the lavamenu, When i write content in the body, it appears all the way right no matter how i position / fix it.

  12. deafeagle4 Says:

    I prefer subtitles so I can watch video how it works 

  13. DreamWeaverTutorial Says:

    @deafeagle4 Hello Deafeagle, I have this tutorial on my website with full written instructions if you search for “JQuery Lavalamp Menu” it will bring up an article with all of the code and pictures. – James

  14. deafeagle4 Says:

    I do not understand - I am Deaf and need access to caption. Any chance? Thanks

  15. giomera Says:

    man when i put diferents links in each square, it dont works, please you can help me???

  16. erif002 Says:

    can you change the height of the navigation bar/lava?

  17. DriveTimeCareers Says:

    I have a conflict. I am using slideshow plugin from slidesjs.com. The easing plugin is conflicting with the slideshow. IF I have the easing working then the script wont run for the slideshow. If I remove the easing script, then the slideshow works fine. Suggestions? Maybe a newer version of the easing file would help? I’m running Jquery 1.6

  18. Whisperingonthewind Says:

    Thanks James I just got around to building this onevery smooth, another great tutorial.

  19. marky4153 Says:

    @DreamWeaverTutorial thank you james

  20. marky4153 Says:


    That’s great. Now i can make my project easier thank you james. a big help. 🙂

  21. DreamWeaverTutorial Says:

    @marky4153 right click and save link to desktop if using firefox or safari

  22. marky4153 Says:

    cant download the file james 🙁

  23. DreamWeaverTutorial Says:

    @TanukiTengu hi i just check the download and the nav top png is there in the file. So i can only suggest to download the zip file again. – James

  24. TanukiTengu Says:

    Hey dude, i’ve downloaded the lavalamp file off that website you gave us. But I’m missing the NAV TOP gif/png. is there anything i can do as i really need to learn this for my assignement….

Leave a Reply