 |
| Click to Enlarge |
How this Menu Works ?
This menu works with Css3. This menu requires Modern browsers for Its Background Support, Because those radial gradients works only with prefixes in some browsers, Though i've added prefixes but still this fails to work, then let me know about them.
Watch Live Demo of Yellow Menu.
Let's Start
# How to add this to your blog ?
# First open blogger dashboard,
# Navigate to template,
# Click on edit Html,
# find
]]></b:skin># If doesn't work Read
Adding External CSS Code to Blogger Blog# Now just above that code Paste Below written CSS code,
.cbtnav
{
width:965px;
margin:0px auto;
padding:10px;
}
.cbtnav li{
display:inline-block;
}
.cbtnav a
{
height:30px;
width:130px;
background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
text-decoration: none;
color: rgb(143, 0, 0);
text-transform: uppercase;
display: inline-block;
text-shadow: -1px 1px 0 rgba(255, 0, 0, 0.14);
text-align:center;
font-weight: bold;
text-align:center;
border:none;
border-radius:35px;
margin: 2px;padding-top:9px;
-webkit-transition: all 0.12s linear;
-moz-transition: all 0.12s linear;
-o-transition: all 0.12s linear;
transition: all 0.12s linear;
-webkit-transform: translate3d(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
box-shadow:0 6px 3px rgba(0,0,0,.3);
}
.red a{
background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
color:yellow;
}
.black a{
background:-webkit-radial-gradient(top center, black, #B3B3B3);
background:radial-gradient(top center, black, #B3B3B3);
background:-moz-radial-gradient(top center, black, #B3B3B3);
background:-ms-radial-gradient(top center, black, #B3B3B3);
color:white;
}
.minimal a{
background:-webkit-radial-gradient(top center, white, #C2C2C2);
background:radial-gradient(top center, white, #C2C2C2);
background:-moz-radial-gradient(top center, white, #C2C2C2);
background:-ms-radial-gradient(top center, white, #C2C2C2);
color:black;
}
.blue a{
background:-webkit-radial-gradient(top center, #0047FF, #00E0FF);
background:radial-gradient(top center, #0047FF, #00E0FF);
background:-moz-radial-gradient(top center, #0047FF, #00E0FF);
background:-ms-radial-gradient(top center, #0047FF, #00E0FF);
color:white;
}
.yellow a{
background:-webkit-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
background:radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
background:-moz-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
background:-ms-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
}
.cbtnav a:hover
{
opacity:0.8;
}
.cbtnav a:active
{
box-shadow:none;
-webkit-transform: translate3d(0px, 7px, 0);
-moz-transform: translate3d(0px, 7px, 0);
transform: translate3d(0px, 7px, 0);
-ms-transform: translate3d(0px, 7px, 0);
-o-transform: translate3d(0px, 7px, 0);
}
# Now save template.
Menu Styles
# This menu has 5 ready styles to use within., Just follow the steps.
# After saving template, navigate to layout, Click add widget, Select html/javascript
# Now copy the below html code with instructions given below.
<ul class="cbtnav
yellow">
<li><a href="
#">
Home</a></li>
<li><a href="
#">
About</a></li>
<li><a href="
#">
Link #1</a></li>
<li><a href="
#">
Link #2</a></li>
<li><a href="
#">
Link #3</a></li>
<li><a href="
#">
Link #4</a></li>
<li><a href="
#">
Link #5</a></li>
</ul>
Now Modify These Things
-+- Change all
Yellow background texts with Link location,
-+- Change all
red background texts with Link names Respectively.
-+- Change
Black background text with Color styles you want in menu
[Only Blue,Red, Black, Minimal,Yellow] will be available.
Welldone! You've Made it!
You're done adding the menu, If any problem is there then sure to inform me in comments below.
