Skip to main content

Css Simple Menu

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.

Comments

Popular posts from this blog

MySQL Connection

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...

Join in MySQL

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.

Type Juggling and Type Casting

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.