Skip to main content

CSS Vertical Menu

By
Css Vertical Menu can be build using following code :
Vertical Menu #1
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”>
#vmenu{
margin:0px;
padding:0px;
}

#vmenu ul{
margin:0px;
padding:5px;
list-style:inside;
width:150px;
background-color:#EC0000;
}
#vmenu ul li {
list-style:none;
color:#FF3;
border-bottom:#000 solid 1px;
height:30px;
}
#vmenu ul li a{
display:block;
list-style-type:none;
color:#FF3;
font-size:14px;
font-weight:bold;
text-decoration:none;
height:100%;
width:150px;
}
#vmenu ul li a:hover{
display:block;
color:#FF3;
font-size:14px;
font-weight:bold;
text-decoration:none;
background-color:#FF6262;
height:100%;
}
</style>
</head>
<body>
<div id=”vmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a>
<li> <a href=”#”>Photos</a></li>
</ul>
</div>
</body>
</html>
Output
 Okay have you tried up one. That’s great. Now with simple little modication to the same code you can create simple again another wonderful vertical menu. Lets see below:




Vertical Menu #2
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”>
#vmenu{
margin:0px;
padding:0px;
}
#vmenu ul{
margin:0px;
list-style:inside;
width:150px;
}
#vmenu ul li {
list-style:none;
color:#FF3;
border:#000 solid 1px;
height:30px;
text-align:center;
background-color:#F5F5F5;
}
#vmenu ul li a{
display:block;
list-style-type:none;
color:#333;
font-size:14px;
font-weight:bold;
text-decoration:none;
height:100%;
}
#vmenu ul li a:hover{
display:block;
color:#FF3;
font-size:14px;
font-weight:bold;
text-decoration:none;
background-color:#333;
height:100%;
border-top:#C00 solid 3px;
}
</style>
</head>
<body>
<div id=”vmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a>
<li> <a href=”#”>Photos</a></li>
</ul>
</div>
</body>
</html>

Output:

Simply awesome, isn’t ? Now try yourself by modifying the above code and create some more design. :)
Happy Designing !!
Labels:

Comments

Post a Comment

Popular posts from this blog

CSS List

By
CSS allows you to customize the lists that can be made with HTML  to the extent that even images can be used as bullet points for unordered lists. CSS List Style Type If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. Unordered list styles: square, circle, disc (default), and none Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none Code:
Post a Comment
Read more

Accessible Forms

By
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form. Labels Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:
5 comments
Read more

Join in MySQL

By
Join clause is used to combine rows from two or more tables depending upon common field between them. There are different kinds of Joins. The most common and useful Join is Inner Join. Inner Join: It will return all rows from multiple tables where the condition is met.
Post a Comment
Read more