Navigation is very important for website.Navigation can be obtained through Menu bars.This post about the usage of Hover Property which is used to make menu more affective and also used for focus of users.Let see below image of Menu bar.
In this menu bar, when user hover mouse(moves mouse over menu tab) on menu tab background color will be changed .This can be obtained through Hover property of CSS.
In this menu bar, when user hover mouse(moves mouse over menu tab) on menu tab background color will be changed .This can be obtained through Hover property of CSS.
<html>
<head>
<title>Menu Bar</title>
</head>
<style type="text/css">
#menu {
width: 704px;
height: 62px;
margin: 10px auto;
margin-top: 20px;
background-color:#3CB371;
padding: 25px 25px 0;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
font-size:16px;
font-weight:bold;
}
#menu a{text-decoration:none;color:black;}
#menu li:hover{border:solid 1px red;border-radius:25px;background-color:red;}
#menu li {
display: inline;
padding:10px 10px 10px 10px;
text-align:center;
}
</style>
</head>
<body>
<!-- Header -->
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#" >Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment