Code for pure css menu | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more
 

Code for pure css menu

Tuesday

An attractive mouse hover menu using CSS only:                      
                                                                 One of the fundamental things in web design in reference to usability is navigation. Navigation menus are important to help the user find the information that he or she seeks. Use of colors, highlights and mouse-over effects will facilitate detection of the items that are being searched. 

In this post  I give cool css only menu. The items background change with rounded corner when mouse hover .  This menu build with css and 'UL' tag only. Just copy and paste the  following html code to build this  cool menu.


<html>
<head>
<style>
#topmenu {
 float:left;
 padding-right: 20px;
 padding-left: 80px;
 padding-top: 46px;
 font-family: 'GibsonRegular'; 
}
#topmenu ul {
 display: block;
 height: 34px;
 width: 540px;
}
#topmenu ul li {
 display: block;
 float: left;
 margin-right: 5px;
}
#topmenu ul li a {
 -webkit-border-radius: 17px;
 -moz-border-radius: 17px;
 border-radius: 17px;
 -webkit-transition-property: color, border;
 -webkit-transition-duration: .2s;
 -webkit-transition-timing: ease-in;
 -moz-transition-property: color, border;
 -moz-transition-duration: .2s;
 -moz-transition-timing: ease-in;
 -o-transition-property: color, border;
 -o-transition-duration: .2s;
 -o-transition-timing: ease-in;
 transition-property: color, border;
 transition-duration: .2s;
 transition-timing: ease-in;
 display: block;
 float: left;
 font-size: 14px;
 color: #65778c;
 text-decoration: none;
 line-height: 30px;
 height: 30px;
 padding-left: 13px;
 padding-right: 13px;
 border: 2px solid transparent;
}
#topmenu ul li a.active {
 border: 2px solid #c8d8df;
 color: #DE3068;
 text-decoration: none;
}
#topmenu ul li a:hover {
 border: 2px solid #c8d8df;
 color: #DE3068;
 text-decoration: none;
}
.ie7 #topmenu ul li a, .ie8 #topmenu ul li a {
 line-height: 34px;
 height: 34px;
 padding-left: 15px;
 padding-right: 15px;
 border: none;
}
</style>
</head>
<body>
<div id="topmenu">
  <ul>
    <li><a href="#" title="Hello!" class="active"><span>Hello!</span></a></li>
    <li><a href="#" title="Portfolio"><span>Portfolio</span></a></li>
    <li><a href="#" title="Services"><span>Services</span></a></li>
    <li><a href="#" title="About us"><span>About us</span></a></li>
    <li><a href="#" title="Blog"><span>Blog</span></a></li>
  </ul>
</div>
</body>
</html>

0 comments:

Post a Comment

Share your thoughts here...

 
 
 

RECENT POSTS

Boost

 
Blogger Widgets