Beautiful jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles




| 29 comments

Blogger jquery menuI recently realised i had not covered navigation menus too much in our Blogger Tips on Spice Up Your Blog.I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !

Lets look at the demo, as the menu uses Css3 if you use older versions of Internet Explorer the effect wont look as good although it will still work without the bubble.Do your self a favor and get Firefox Or Chrome.

View Demo Button

Pretty neat and you will be surprised at how easy it is to use on your blog.The Lava Lamp code was originally scripted by Ganesh and this version and style was originally scripted by insic at Insicdesigns Thanks to both and check them out.

Add The Lava lamp Floating Bubble Menu To Blogger


Step 1. To Start this Blogger tip from your Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info In Basic Blogger Tips)

]]></b:skin>

Step 3. Copy And Paste The Following Code Directly Above / Before ]]></b:skin>

/*LAVALAMP START*/

.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}

.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}

.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}


a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

ul li {
list-style: none;
float:left;

text-align: center;
}

ul li a {
padding: 0 20px;
text-align: center;
}

.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
/*End Lavalamp Css Info @ http://www.spiceupyourblog.com */

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info In Basic Blogger Tips)

</head>

Step 5. Copy And Paste The Following Code Directly Above / Before </head>

Note - If you have added jQuery to your template previously you don't need the code in green just the second snippet will do.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/lavalamp.js' type='text/javascript'/>

Step 6. Save Your Template.

That's the Css and jQuery added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be see in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


OK so we now all have the cross column section for the menu.

Add The Menu Html


In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Choose Your Code From Below and Paste it into the Html/Javascript Gadget.

This is the code that makes up the default menu, that's white background.

<div class="lavalamp" >

<ul>
<li class="active"><a href="/">Home</a></li>
<li><a href="Link-Here">About</a></li>
<li><a href="Link-Here">Blog</a></li>
<li><a href="Link-Here">Services</a></li>
<li><a href="Link-Here">Portfolio</a></li>
<li><a href="Link-Here">Contacts</a></li>
<li><a href="Link-Here">Back to Article</a></li>
<li><a href="Link-Here">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

Add Your Links - Simply Place The Link were it has Link-Here and change the names of the links from About, Blog, services and so on.To add extra links just paste the following code below the last one :

<li><a href="Link-Here">Name-Here</a></li>

Use Any Of The 6 Colors


The Css you added yo your template in Step 2 allows for any of the 6 colors to work and all you have to do is the name of the color.If you look at the first line of html above that i have highlighted in yellow it is this :

<div class="lavalamp" >

Leave it like that to use the white menu and Change It To Include Your Color :

<div class="lavalamp magenta" >
<div class="lavalamp cyan" >
<div class="lavalamp yellow" >
<div class="lavalamp orange" >
<div class="lavalamp dark" >

Once you have your links added and you color choosen save the Html/Javascript gadget and make sure it's below the header in the cross column section.

Template Designer Tabs Fix


If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

OK that's it another great Blogger Tip, it seemed to have a lot of steps but this was just so people of all levels could understand.Check out more of our jQuery Tutorials and Css Design Tips.

Drep Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

29 comments:

  1. Wow they are awesome now i cant choose what color to use.Thanks !

    ReplyDelete
  2. Seriously great work dude thanks for sharing.

    ReplyDelete
  3. Dear Sir, I am very much impressed with this tool, but the problem that i am facing is that my links are not working. Please address my problem.

    ReplyDelete
  4. Thanks admin, I'm looking for a cool menu bar for my blog from a long long time.

    Hats Off!

    ReplyDelete
  5. its Amazing Sir , but rlly the links dont work :S

    ReplyDelete
  6. @ Avishek @ Muslim - If you add the links correctly as shown in the tutorial they will work.

    ReplyDelete
  7. Hi, can you please explain how to add the image effect on the right sidebar of Test Blog 907?

    ReplyDelete
  8. @ Anonymous - You know they are cool but i couldnt see much of a purpose as they were not dynamic when it came to image size.You can find the download files here if you wannt give it a go yourself - http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery

    ReplyDelete
  9. No links not working i add 100% fine but still not working if i deleted

    "active" then links work but button effect gone please help how to fix this error thanks

    ReplyDelete
  10. same here, links not working...maybe because it's an awesome template?

    I tried all the tutorials to split the header in two columns too but none worked...I thought it was maybe because of the template :(

    http://www.electrokill.info

    Please help

    ReplyDelete
  11. @ All - I will take another look at this tutorial but as far as i can see links should be working.

    ReplyDelete
  12. I am trying to create a pull down menu, but getting one error like "More than one widget was found with id: HTML6. Widget IDs should be unique". Can you please help me to solve the problem and create one good looking menu.

    ReplyDelete
  13. Its not workin fo me... as soon as i complete 3rd step, my all widget, archives, etc get messed up, they came one above each other.. there some problem fo me on 3rd step...
    also 1 more question; previously wen i move my cursor over my blog title n click it will led me to my blog home page, bt nw its not workin, i did some mistake in html... pls help me out
    my blog address :
    http://drkenit.blogspot.com/

    ReplyDelete
  14. I also can't get the links to work unless I right click on them and select "open". I'd really like it to work because it looks cool. I doubt checked to make sure I did everything right.

    ReplyDelete
  15. Thak you so so much!!!!!!!!
    It is the only one lava lamp tutorial that works om my template!!!!!

    Congratulations from Brasil!!!!!
    ( sorry, bad english!!!!! )

    Alice

    ReplyDelete
  16. the menu bar is perfect but doesn't work.. no effects on clicking :(

    ReplyDelete
  17. Hi Paul,

    i had posted an query few days ago but neither its posted nor answer.

    Please can you help me out with multi dropdown navigation menu with lavalamp feature.

    on www.hkdeen.blogspot.com

    your earliest reply will be highly appreciated.

    ReplyDelete
  18. @ Haja - I dont have the lava lamp menu with a drop down at this time.

    ReplyDelete
  19. Hey paul it don't have effect on clicking

    ReplyDelete
  20. Hello, is it possible to have this menu as multilevel dropdown? Thank you for your web!

    ReplyDelete
  21. Thank you very much.............go on....

    ReplyDelete
  22. Lovely classy and beatiful ...
    www/degmesinyagliboya.blogspot.com check it!..and i didnt edit any color or any change..congraculations dear..

    ReplyDelete
  23. How do i apply this to the old blogger templet, and how to make it to a drop down menue

    ReplyDelete
  24. to make it work the z-index has to be in order

    ReplyDelete
  25. Hey need help... i tried applying this menu bar to my blog. Everything worked fine, but the titles Home, About Me and other are floating below the menu bar. Its not on the center of the menu bar, they are below it. Please help..

    Thanks

    ReplyDelete
  26. Hi i tried as said but the text on the menu bar appears below the menu bar... like haft text on the menu bar and half below the menu bar..

    Now what

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us