Add Beautiful Animated Lavalamp Menu for Blogger

[Image: Menu+Lavalamp.png] 

Welcome to a new topic, and this time the lists lava lamp
Is something important to help the visitor to access the sections or pages faster
Day and give you a list of distinct character As you can see in the picture above is a list of
Similar to the Apple site list!

Step 1 : Adding CSS to Template


Written explanation
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)  
]]></b:skin>
3) Now Paste the Code Shown Below just Before it.
#coolworld-nav,#coolworld-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#coolworld-nav {
    background: url('https://lh3.googleusercontent.com/-njAX-XszMS0/UrbEt-GR-VI/AAAAAAAACKA/2BG9m1qFBg4/w961-h58-no/Coolworl.in.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#coolworld-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;
}
#coolworld-nav li {
    background: url('https://lh5.googleusercontent.com/-FAxhkCWpvmI/UrbEc91HO4I/AAAAAAAACJs/JI8cOMisx0g/w2-h49-no/Coolworl.in.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#coolworld-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;
}
#coolworld-nav li:hover > a {
    color: #00B4FF;
}
#coolworld-nav li:hover, #coolworld-nav a:focus, #coolworld-nav a:hover, #coolworld-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#coolworld-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);
}
#coolworld-nav ul li {
    background: none;
    width: 100%;
}
#coolworld-nav ul li a {
    float: none;
}
#coolworld-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('https://lh5.googleusercontent.com/-Z7hCS-rEro8/UrbEEx7jvvI/AAAAAAAACJY/Wrz2Hvl4tIk/w64-h16-no/Coolworl.in.png') 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;
}
#coolworld-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#coolworld-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#coolworld-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#coolworld-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#coolworld-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#coolworld-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#coolworld-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#coolworld-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}
4) Now save your template.

Step 2 : Add Widget to your blog 

1) Go to Blogger DashboardLayout Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
<ul id="coolworld-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>
</ul>
</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>
</ul>
</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>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<div id="lavalamp"></div>
</ul>
4) Customize your setting.Find any word click F3 or Ctrl+F
Replace # with the links.
Replace Menu , Submenu with your link text which you want to appear on the menu. 
5) Save your Widget. Don't forget to add the widget on the Center place.




Hiç yorum yok

Blogger tarafından desteklenmektedir.