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

MySQL Connection

By
Connection with MySQL Database Before accessing database, you must create a connection to the database Syntax: mysql_connect(servername,username,password); where, servername specifies the server to connect to. Default value is “localhost” username specifies the username to log in with. Default value is the name of the user that owns the server process. To connect offline we use username “root”. password specifies the password to log in with. Default is “” Code : Creating connection to the database and selecting the required database <?php $con = mysql_connect(“localhost”,”root”,”"); if (!$con) { die(‘Could not connect: ‘ . mysql_error()); } else{ mysql_select_db(“test”, $con) }; ?> Here, we have store connection in a variable called $con and trap error using die function. Closing connection The connection will be closed automatically when the script ends. To close the connection before, use the mysql_close() function: <?php $con = mysql_conne...
Post a Comment
Read more

Type Juggling and Type Casting

By
Type Juggling: PHP does not require (or support) explicit type definition in variable declaration; a variable's type is determined by the context in which the variable is used. That is to say, if a string value is assigned to variable $var, $var becomes a string. If an integer value is then assigned to $var, it becomes an integer.
2 comments
Read more

Doctype Defination

By
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD). Syntax The general syntax for a document type declaration is: <!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ <!-- internal subset declarations --> ]>
1 comment
Read more