Search Box by All Blogger Tricks

Sunday, 8 September 2013

Pure CSS3 Animated Lavalamp Menu Widget

Freelance Jobs

You may have seen animated menus. Many animated menu uses Lavalamp (a Jquery Plugin) but today we are going to make a new menu which has animation like Lavalamp but without any Javascript.

The animation will take place with the help of CSS3 Transitions. The menu we will work on is black in color. On hover it becomes darker and a arrow appears above the menu text.

Live example of this menu can be seen by visiting the below link.

Below are the 2 simple steps on how you can add this menu to your blogger blog.

Step 1 : Adding the CSS

First go to Blog Title → Template → Edit HTML. Press Ctrl + F. Expand <b:skin>...</b:skin> if it is not expanded. Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]
Add the below given code just above ]]></b:skin>

#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
#abt-nav {
    background: url('') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
#abt-nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
#abt-nav li {
    background: url('') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
#abt-nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
#abt-nav li:hover > a {
    color: #00B4FF;
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
#abt-nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
#abt-nav ul li {
    background: none;
    width: 100%;
#abt-nav ul li a {
    float: none;
#abt-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
#lavalamp {
    background: url('') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;

Save the Template. Now we just have to add the HTML

Step 2 : Adding the HTML

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code and save the widget.

<ul id="abt-nav">
    <li><a href="">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="">Back</a></li>
    <div id="lavalamp"></div>

You just have to change the links and menu text. You are done now
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved