Web Design Archives - TechOneStop

Create vertical menu bar using HTML and CSS

By TechOneStop

In our previous post, we have discussed how to create horizontal menu bar using HTML and CSS. In this article, we will see how to create vertical menu bar using HTML and CSS. Script is almost same as horizontal menu bar.

Stpe 1: Open any HTML editor, write the script in ul-li order without any CSS and save the file with .html extension
<head>
<title>Vertical Menu Bar using HTML n CSS</title>
</head>

<body>
<div id=”divMenu”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link2</a>
   <ul><li><a href=”#”>Link 2.1</a></li>
        <li><a href=”#”>Link 2.2</a></li>
    </ul>
</li>
<li><a href=”#”>Link3</a>
   <ul><li><a href=”#”>Link 3.1</a></li>
        <li><a href=”#”>Link 3.2</a></li>
    </ul>
</li>
</ul>
</div>
</body>
</html>

Now open this html page in any browser, it should look like below, without any formatting. Next we will add CSS script to organize drop down menus vertically.

Link 1
Link2
- Link 2.1
- Link 2.2
Link3
- Link 3.1
- Link 3.2

Step 2: Write internal CSS using <style> tag under HEAD section of html. If you don’t know about internal and external css, read our article on horizontal menu bar. First add few basic css tags to set color, width, margin, padding, mainly how menu will be displayed in the web page.
<style>
/*divMenu */
#divMenu, ul, li, li li {
margin: 0;
padding: 0; }

#divMenu {
    background-color:#FF9933;
    height:585px;
    width:170px;
    float:left; }

#divMenu ul {
line-height: 25px; }

#divMenu li {
    list-style: none;
    position: relative;
    background:#ebb659; }

#divMenu li li {
   list-style: none;
   position: relative;
   color:#33FF66;
   left: 170px;
   top: -27px; }

#divMenu ul li{
width: 170px;
height: 25px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,’Times New Roman’,serif;
font-size:12px;
color:#000000;
border:1px solid #eee;
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); }
</style>

box-shadow: We have used this tag to give some special effects when cursor points on menu options.

After adding CSS:

Step 3: Add another CSS block to hide all ‘ul’ items which come under main ‘ul’ item. To do this, set css property visibility as hidden for ul-ul items. As we want to display second label ul items once we hover on first label ul items, we have to use ul twice like below.
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}

Step 4: Add one more CSS block to display all ‘ul’ items under ‘li’ items when we keep the cursor on ‘li’. To do this, use css property visibility as visible for the tag ul under li when we do hover.
#divMenu ul li:hover ul {
visibility: visible;
}

After adding CSS:

Step 5: In our final few blocks, we will add few more lines to get better look and feel css menu bar. We want font size will be bold when we do hover on li or ul items, background color will be changed.
#divMenu li:hover {
background-color:#CCCCFF;
}

#divMenu ul li:hover ul li a:hover {
background-color:#CCCCFF;
}

#divMenu a:hover {
font-weight: bold;
}
After adding CSS:

That’s it!! If you have any doubt or question, feel free to ask us. To get more updates on recent activities, follow ‘TechOneStop’ on Facebook/Twitter/LinkedIn or join our website as followers.

<< How to create horizontal dropdown menu bar

Create horizontal menu bar using HTML and CSS

By TechOneStop

For any web developer, it is almost mandatory to know how to create horizontal or vertical menu bar using HTML and CSS. Menu bar helps to categorize contents and increases the website readability. In this article, we will discuss how to create horizontal menu bar using HTML/CSS step by step and in the next article, how to create vertical menu bar using HTML/CSS. This is the simplest way to create css dropdown menu bar but best for new web developer. To get more interactive menu bar, you could use JQuery, HTML 5 and CSS3.

To write the script, you could use any html css editor software but don’t forget to save the file with .HTML extension. Here I have used Notepad++ to write the script.

Step 1: Open any HTML editor and write HTML script in ul-li order without any CSS script and save the file with .html extension.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
    <li><a href=”#”>Link1</a></li>
    <li><a href=”#”>Link2</a>
          <ul>
<li><a href=”#”>Link2.1</a></li>
            <li><a href=”#”>Link2.2</a></li>
            <li><a href=”#”>Link2.3</a></li>
         </ul>
    </li>
    <li><a href=”#”>Link3</a>
          <ul>
        <li><a href=”#”>Link3.1</a></li>
        <li><a href=”#”>Link3.2</a></li>
    </ul></li>
    <li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>

Now if you open this html page in any browser, it looks like below, without any formatting. Next we will add CSS script to organize menus horizontally.

Step 2: Here we will write CSS script inside html file. This type of css script is called internal css and another one is external. In external css, we write script in a separate file, save it as .css and include that file in the html page. The benefit of using external css is reusability, one css file can be used for more than one webpage. To make it simple, we have added internal CSS. To add internal css, create a ‘Style’ tag under HEAD section of HTML and write the css script inside <style> block. First we shall add few basic css tags to set width, height, background color.
<style>
/* Main */
#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    }
</style>

After adding CSS:

Step 3: Now add curve corner to give it a beautiful looks. To do this, use css command border-radius. set it to 50px.
#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    border-radius: 50px;
}

After adding CSS:

It looks better, right! well, once we complete css script, it will look good.

Step 4: Now give a nice floating looks where all ‘li’ elements will be in one line and all ‘ul’ elements will be below that line.
#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative; }

After adding CSS:

Step 5: Set properties for ‘A’ (hover) tag like color, text decoration, font
#menu a{

    float: left;
    height: 25px;
    padding: 0 25px;
    color: #CC6600;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000; }

After adding CSS:

Step 6: Add one more property to change the color once you keep the mouse on those links
#menu li:hover > a{
    color: #CC3333; }

Step 7: Now add two css blocks for ‘ul’ items. First block will hide all ‘ul’ items, also set display properties like color, padding, position. Second block is to display all ‘ul’ items once we hover the ‘li’ items.
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #222; }
#menu li:hover > ul{
    display: block; }

After adding CSS:

Step 8: Set padding to 0, margin 0 for all items to make look and feel better
#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block; }

Step 9: Set properties for all ‘a’ items which come under ‘ul’ tag
#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none; }

Step 9: Now add few more lines to improve visual effects, set the proper size for the black background, display of all elements
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0; }

After adding CSS:

That’s all. We have successfully created the horizontal CSS menu bar. Now we will add few more lines to give our css menu bar more professional look.

Additional Step 1: To display a pointer under the hover link, add the below script
#menu ul li:first-child a:after{
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FF0000;
}

After adding CSS:

Additional Step 2: Set border-radius property to 5px under ‘#menu ul’ element which will give small carve for all ul tags
border-radius: 5px;

After adding CSS:

Isn’t it nice!!! simple to create but great in looks. We could add many more properties to give it more professional looks. But as it is our first horizontal menu bar, don’t want to make it complex. We will discuss all other properties in subsequent articles.
If you have any doubt or question, feel free to ask us. To get more updates on recent activities, follow ‘TechOneStop’ on Facebook/Twitter/LinkedIn or join our website as followers.
How to create vertical menu bar using HTML and CSS>>