RSS
Twitter
Facebookhow to add vertikal menu slide dancing
DEMO
This menu is perfect slide dancing in place disidebar your blog is fairly easy to install you just follow these steps:
1.Log in to your blogger dashboard
2.Go to --> layout- -> Edit HTML
3.Scroll down to where you see this:
]]></b:skin>
4.Now add below code just before ]]></b:skin> tag .
5.Click on "Save Templates" and now you are done.
NEXT STEP
Login to your blogger dashboard and go to Desing --&-- Page Elements.
.Click on 'Add a Gadget' on the sidebar.
Select 'HTML/Javascript' and add the one of code given below
<ul class="nice-menu">
<li class="orange"><a href="">Home</a></li>
<li class="red"><a href="">About</a></li>
<li class="green"><a href="">Portfolio</a></li>
<li class="blue"><a href="">Blog</a></li>
<li class="bright"><a href="">Contact</a></li>
<li class="dark"><a href="">What not?</a></li>
</ul>
DEMO
This menu is perfect slide dancing in place disidebar your blog is fairly easy to install you just follow these steps:
1.Log in to your blogger dashboard
2.Go to --> layout- -> Edit HTML
3.Scroll down to where you see this:
]]></b:skin>
4.Now add below code just before ]]></b:skin> tag .
/**
* Name: Nice Menu
* Version: 0.1
* Author:Hendrytha
**/
ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 300px;
}
@-moz-keyframes expand {
0% {
width: 5px;
padding-left: 0px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;
}
50% {
width: 200px;
}
70% {
width: 170px;
}
80% {
width: 200px;
}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand {
0% {
width: 5px;
padding-left: 0px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;
}
50% {
width: 200px;
}
70% {
width: 170px;
}
80% {
width: 200px;
}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-moz-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;
}
50% {
width: 5px;
}
70% {
width: 35px;
}
80% {
width: 5px;
}
90% {
width: 15px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;
}
50% {
width: 5px;
}
70% {
width: 35px;
}
80% {
width: 5px;
}
90% {
width: 15px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #FFF;
text-shadow: 0px 0px 3px #333;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);
}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
5.Click on "Save Templates" and now you are done.
NEXT STEP
Login to your blogger dashboard and go to Desing --&-- Page Elements.
.Click on 'Add a Gadget' on the sidebar.
Select 'HTML/Javascript' and add the one of code given below
<ul class="nice-menu">
<li class="orange"><a href="">Home</a></li>
<li class="red"><a href="">About</a></li>
<li class="green"><a href="">Portfolio</a></li>
<li class="blue"><a href="">Blog</a></li>
<li class="bright"><a href="">Contact</a></li>
<li class="dark"><a href="">What not?</a></li>
</ul>
0 comments