Vertical menu bars in HTML and CSS

Vertical menu bars

Vertical menu bars are used in sites to show labels and more options on the one side of the web page. The vertical navigation bar is used when we want the information will show only if user click on menu button mostly it’s done on mobile sites but nowadays it is also trending on screen web pages.

Call a method on Image Click

So to create vertical menu bar first, we create a header div. Inside that header put a menu logo which will easily be available on the internet.

<div id="header">
            <img src="URL" id="menu" onclick="action()"/>  
</div>

</div>

Specify Menu Items as Paragraph Elements

As in above code, we have an onclick event in our image tag its because we want some action when a user clicks on menu image.

Now to create vertical navigation menu bar the code is following:

<div id="menubar"> 
            <div class="items">
                        <p>Home</p>
                        <p>About</p>
                        <p>Contact</p>
                        <p>Login</p>
                        <p>Help</p>
                        <p>Feedback</p>
            </div>
</div>

<p>About</p>

<p>Contact</p>

<p>Login</p>

<p>Feedback</p>

</div>

When creating the menu bar we use anchors and list items, in this case, we can put anchors on our paragraphs. To link to other pages.

The above code is for vertical menu bar containing different menus like home, about, etc. I bound them in a menubar div.

Body of HTML Page

Create a body area where all other content will show.

<div class="body_area">
    <h2>Slide in and Slide out on click Navigation menu bar in CSS and JavaScript</h2?
</div>

<h2>Slide in and Slide out on click Navigation menu bar in CSS and JavaScript</h2?

</div>

Apply CSS Properties

To style this, I target all these items by their ids and classes.

<style>

  #header{background-color:#4d0000;height: 10%;}

  #header img{height: 100%;margin: 0px 20px;}

  .items{padding: 10px;margin: 5px;}

  #menubar .items p:hover{width:100%;background-color:#666;}

  #menubar .items p{padding:10px ;color:wheat;

  border-style: none none dotted none;}

  #menubar{float: left;border:2px solid;width:15%;

  padding:5px;background-color: #4d4d4d;height:85%;display: none;}

  body{background-color:#eee;}

  .body_area h2{top:30%;position: absolute;right: 15%;}

</style>

<style>

#header{background-color:#4d0000;height: 10%;}

#header img{height: 100%;margin: 0px 20px;}

.items{padding: 10px;margin: 5px;}

#menubar .items p:hover{width:100%;background-color:#666;}

#menubar .items p{padding:10px ;color:wheat;

border-style: none none dotted none;}

#menubar{float: left;border:2px solid;width:15%;

padding:5px;background-color: #4d4d4d;height:85%;display: none;}

body{background-color:#eee;}

.body_area h2{top:30%;position: absolute;right: 15%;}

</style>

Method to be Called onClick

In above code, its simple but one thing I put menu bar display is equal to none (display: none 😉. I do this because I want to show it on user click only now to show it on user click the JavaScript code is:

<script>
function action(){
  var y=document.getElementById("menubar");
  if(y.style.display=="block")
  {
       y.style.display="none";
  }
  else{
       y.style.display="block";
  }
}
</script>

function action(){

var y=document.getElementById("menubar");

if(y.style.display=="block")

{

y.style.display="none";

}

else{

y.style.display="block";

}

</script>

Above code is a simple function that is the handler for the onclick event, and it checks if the menu bar is not displayed, display it and if it is displayed already then hides it.

View live demo of Slide in and slide out menu

Download HTML file of slide in slide out menu