Posts
Simple one level menu can be created using unordered list with the help of CSS properties.
Below given is a very simple examples:
Code:
PHP file called menu.php
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Css Simple Menu</title>
<style type=”text/css”>
#menu{
margin:0px auto;
color:#0CF;
background:#5e8ce9;
height:28px;
width:400px;
text-align:left;
}
#menu ul a{
list-style-type:none;
display:block;
float:left;
}
#menu li {
display:inline;
width:100px;
background-color:#C5C5C5;
}
#menu li a{
display:block;
padding:3px 8px 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#menu li a:hover{
text-decoration:none;
background-color:#5AF;
border-bottom:2px solid #000;
}
</style>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>
</body>
</html>
Here I have attached internal CSS in the same file.
Output:
The output of the above code will display the output as above.
Okay great!! If you had tried this.
Now lets see another simple menu with little twist.
In this menu I have used two images two give an extra effect.
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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Css Simple Menu</title>
<style type=”text/css”>
#navmenu{
margin:0px auto;
color:#0CF;
background:#141414;
height:28px;
width:400px;
text-align:left;
background:url(up.jpg) repeat-x #0d0c11;
}
#navmenu ul a{
list-style-type:none;
display:block;
float:left;
}
#navmenu li {
display:inline;
width:100px;
}
#navmenu li a{
display:block;
padding:3px 8px 3px 8px;
color: #fff;
text-decoration: none;
}
#navmenu li a:hover{
text-decoration:none;
background:url(down.jpg) repeat-x #0d0c11;
border-bottom:2px solid #000;
}
</style>
</head>
<body>
<div id=”navmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>
</body>
</html>
Images:
Output:
Okay great!! Isn’t that great with only two images, it looks absolutely amazing.
Below given is a very simple examples:
Code:
PHP file called menu.php
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Css Simple Menu</title>
<style type=”text/css”>
#menu{
margin:0px auto;
color:#0CF;
background:#5e8ce9;
height:28px;
width:400px;
text-align:left;
}
#menu ul a{
list-style-type:none;
display:block;
float:left;
}
#menu li {
display:inline;
width:100px;
background-color:#C5C5C5;
}
#menu li a{
display:block;
padding:3px 8px 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#menu li a:hover{
text-decoration:none;
background-color:#5AF;
border-bottom:2px solid #000;
}
</style>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>
</body>
</html>
Here I have attached internal CSS in the same file.
Output:
The output of the above code will display the output as above.
Okay great!! If you had tried this.
Now lets see another simple menu with little twist.
In this menu I have used two images two give an extra effect.
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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Css Simple Menu</title>
<style type=”text/css”>
#navmenu{
margin:0px auto;
color:#0CF;
background:#141414;
height:28px;
width:400px;
text-align:left;
background:url(up.jpg) repeat-x #0d0c11;
}
#navmenu ul a{
list-style-type:none;
display:block;
float:left;
}
#navmenu li {
display:inline;
width:100px;
}
#navmenu li a{
display:block;
padding:3px 8px 3px 8px;
color: #fff;
text-decoration: none;
}
#navmenu li a:hover{
text-decoration:none;
background:url(down.jpg) repeat-x #0d0c11;
border-bottom:2px solid #000;
}
</style>
</head>
<body>
<div id=”navmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>
</body>
</html>
Images:
Output:
Okay great!! Isn’t that great with only two images, it looks absolutely amazing.
No comments:
Post a Comment