Tuesday, April 3, 2012

Create CSS horizontal and vertical menus




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

1 comment:

  1. Thanks a million! I’ve only glanced at what you’ve presented and already I can see I’m going to be able to make great use of this tutorial.
    website design

    ReplyDelete