10/05/2016

How to Design a Simple Menu Using Html And CSS

This is simple program to generate menu bar. The menu bar contains simple design that can be change in term of color, font size and font color.

Source Code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
br { clear:left }
.menu_simple {
width: 100%;
background-color: #005555;
}
.menu_simple ul {
margin: 0; padding: 0;
float: left;
}
.menu_simple ul li {
display: inline;
}
.menu_simple ul li a {
float: left; text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #005555;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #5FD367;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu in CSS</title>
</head>
<body>
<div class="menu_simple">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Site Map</a></li>
</ul>
<br />
</div>
</body>
</html>

Output of the Program

Design a Simple Menu Using Html And CSS

No comments:

Post a Comment