To design horizontal and vertical menu, we mainly customize <ul> and <li> elements using CSS.
1) To create a horizontal bar, we can use
inline list items.
default li style in HTML4, which creates items in vertical
li { display: list-item }
See Appendix D. Default style sheet for HTML 4:
http://www.w3.org/TR/CSS21/sample.html
To list items in horizontal, we use
<style type="text/css">
li
{
display:inline;
}
</style>
In a:link,a:visited, using
padding:6px; to build a block for each item
and set the block color using
background-color:#98bf21; To remove the underline of the link using
text-decoration:none;
a:link,a:visited
{
background-color:#98bf21;
padding:6px;
text-decoration:none;
}
2) To create a horizontal bar, we can use
floating list items, which is different from the inline style
For
floating list items
li
{
float:left;
}
In a:link,a:visited, using
display:block; width:60px; to build a block for each item
and set background color
background-color:#dddddd; as the example below:
a:link,a:visited
{
display:block;
width:60px;
background-color:#dddddd;
}
3) To create a vertical menu, we do not need to define li as its default is vertical
To remove list style, using:
ul
{
list-style-type:none;
}
To make each bloack has equal width, we define an id:
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:20%;
float:left;
margin:2em;
margin-top: 1em;
}
The final code is:
<html>
<head>
<style type="text/css">
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:20%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh ul
{
list-style-type:none;
margin:0;
padding:0;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: white;
background-color: royalblue;
text-decoration:none;
}
#menuh a:hover /* menu on mouse-over */
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}
</style>
</head>
<body>
<div id="menuh">
<ul >
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
Result:
You can get the CSS or HTML codes of horizontal and vertical menus from:
http://www.mycssmenu.com/
To get the menu code:
1) Go to
http://www.mycssmenu.com/
2) Choose the menu you like.
3) Click customize, a nice editor with menu will show up. You can edit the menu
4) Click CSS or HTML and get the code.
Although there are too many ads in that website, but it is quite handy for the menu codes.
More reference:
http://www.w3schools.com/css/css_navbar.asp
