Design Vertical Menubar

Today on Sky Tutorial i am going to explain you how we can create a Vertical Menu Bar using simple html, css and Jquery. In my previous post i already explain you to create a Horizontal Menu Bar, If you want to create Horizontal Menu Bar then just click here. Now for creating vertical menu bar we have to write two script given below.

<script type="text/javascript"
          src="http://code.jquery.com/jquery-1.10.1.min.js">

</script>

<script type="text/javascript">
     $(document).ready(function() {
         $(".mainmenu").click(function() {
             $(".submenu").slideToggle("slow");
         });
     });
</script>

Now we have to write css code to decorate our menu bar you can make changes in the css code according to your requirement which suites your webpage theme.

<style type="text/css">
div.submenu,li.mainmenu {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background: bisque;
    border: solid 1px black;
    width: 100px;     
}

 li:hover {
    background-color: aquamarine;
}
div.submenu {
    width: 100px;
    height: 200px;
    display: none;    
}

a
{ 
    text-decoration:none;
    color: black;
}
</style>

Related Post

Horizontal Menu Bar

Now the last step is to write html code below is a sample code 

<ul type="none">
         <li class="mainmenu" style="cursor:pointer; ">Main Menu</li>
      
 <div class="submenu">
     <li   style="cursor:pointer;"><a href="#">Sub-Menu 1</a></li>
             
        <li style="cursor:pointer">Sub-Menu 2</li>
             
                <li style="cursor:pointer">Sub-Menu 3</li>
               
                <li  style="cursor:pointer">Sub-Menu 4</li>
               
                <li  style="cursor:pointer">Sub-Menu 5</li>
    </div>
   
    </ul>

Output

Download Project

Note: If you like this post or have any question then just drop a comment i will reply you as soon as possible.