Create A Vertical Menu | Pure Html & Css

302 Views

In a web page you can create two types of menu. 1) Horizontal and the rest is 2) Vertical. In this article i am gonna show you how to create a vertical menu using html & css.

Hi guys. welcome back to anupdebnath.info. Our discussion topic is –

How to create a vertical menu using Html & Css

Apply HTML Code

First Step :: Lets create the HTML structure first.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

Second Step :: Write codes for menu items. Create a div for this.

<div class="menu">
      <a href="#" class="active">Home</a>
      <a href="#">Blog</a>
      <a href="#">Portfolio</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
      <a href="#">About Us</a>
  </div>

That;s it. We are finished. We have already make a html structure for our vertical menu. Time to go for css.

Apply CSS Code

Did you notice i used two classes on html? We need to write css code for these classes. Let’s started –

First Step :: Our first class of html is menu. before going to style this class, let us style the H1 tag first.

<div id="417333122">
    <script type="text/javascript">
        try {
            window._mNHandle.queue.push(function (){
                window._mNDetails.loadTag("417333122", "728x90", "417333122");
            });
        }
        catch (error) {}
    </script>
</div>

h1{
	text-align: center;
	top: 15%;
	position: absolute;
	left: 25%;
}

Second Step :: Time to style the class ‘menu‘.

.menu{
	width: 250px;
	top: 25%;
	left: 40%;
	position: absolute;
}

Third Step :: We have completed styling the first class of our html tag. Did you notice there is an another class inside the first div? Yes it is located in our anchor tag. Now, style this second class and anchor tag also.

/* code for anchor tag */
.menu>a{
	background-color: #eee;
	color: #000;
	padding: 15px;
	display: block;
	text-decoration: none;
}
/* code for second class */ 
.menu>a.active{
	background-color: #4caaaf;
}

Fourth Step :: Do you want changes when you will hover menu bar? To do that, we need to write code for hover.

.menu>a:hover{
	background-color: #ccc;
}

That’s it. We have done this completely. A nice journey yah. :p :p .

For your better understanding, i have made a video. Watch this –

How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box.

Anup Deb Nath Rinku

I am a zero starter. Nothing to say right now, just wait and see. i will come like a thunder.

View all posts by Anup Deb Nath Rinku →

Share Your Opinion With Me

%d bloggers like this: