It is a Flash-like, sleek spotlight menu.The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.
The CSS :
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
Another proceess :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
The CSS :
.devmenu{
width: 100%;
overflow:hidden;
}
.devmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}
.devmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}
.devmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: #000000;/* here you can change the menu items color */
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.devmenu li:hover a{
color: white;
background: #000000;/* here you can change the spotlight color */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.devmenu li a span{
position:relative;
top:35%;
}
How to Add this in Blogger ?<div class="devmenu"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Category</span></a></li> <li><a href="#"><span>CSS</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </div>
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
Another proceess :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
Post a Comment Blogger Facebook
Thank you..