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>
Posts
0 comments:
Post a Comment
Share your thoughts here...