Contact me See Resume

Simple Full height Vertical Menu - nareshonline.com

Simple Full height Vertical Menu

Catagory : jQuery Posted : July, 01, 2018
vertimal menu example

Hello friends, Here we are going to create a simple full height vertical menu with the help of jQuery. Some time our web page need more attention on content more than its design and layout. Then some of layout take more than sufficient space of web page like menus / navigation, footer, social media icons, about author etc.

In this condition the we can make these elements initial hidden by providing a link or button. When user requires information from these elements, the can grab it by clicking a link or button.

Specially when user is on a small screen device this feature is very useful to increase readability and GUI of layout.

Here is we can better understand by example

vertical menu button

In the above image we can see the main focus of user is being on the main content.

vertimal menu example

and in above image example need the menu, it will appear by clicking the menu button on top left corner of page.

Lets code for the achieve the result together.

Step 1 : The HTML markup

<div class="sidemenu">
  <div class="nav">
<span class="cross"> &#10006</span>
  <div class="inner">
    <h2>Slide Menu</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus rerum sit, quo error omnis totam dolores inventore dolore, eos sint, maxime magnam alias optio aut quasi cumque natus, eum? Praesentium.</p>
    <div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Abous Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>

      </ul>
      <p><a href="http://nareshonline.com/" target="_blank">&copy; nareshonline.com</a></p>
    </div>
  </div>
</div>
<span class="show">&#9776; Menu</span>
</div>

Step 2 : The style for HTML Markup

<style>
.sidemenu{
  position: fixed;
  top: 0px;
  background: #ccc;
  z-index: 999;
}
  .cross{
    width: 30px;
    height: 30px;
    position: absolute;
    background: skyblue;
    text-align: center;
    line-height: 30px;
    display: block;
    cursor: pointer;
    left: 270px;

  }
  .show{
    width: 80px;
    height: 40px;
    padding: 0 10px;
    background: skyblue;
    text-align: center;
    line-height: 40px;
    display: block;
    cursor: pointer;
    position: fixed;
    top: 0;
    z-index: 2;
    font-family: arial;
  }
  .nav{
    width: 300px;
    min-height: 100vh;
    /*height: 100%;*/
    display: block;
    background: #ccc;
    position: absolute;
    margin-left: -300px;
    z-index: 3;
  }
  .inner{padding:10px;}
  .inner ul{
    list-style: none;
    padding:0;
  }
  .inner ul li{
    width: 100%;
    height: 50px;
    background: skyblue;
    margin: 5px 0;
    line-height: 50px;

  }
  .inner ul li a{
    display: block;
    margin-left: 10px;
  }
</style>

Step 3 : The jQuery to make show or hide the vertical menu

<!--cdn link for jQuery library -->
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--custum script starts -->
<script>
$(document).ready(function(){
  $('.cross, .container').click(function(){
    $('.nav').animate({marginLeft:'-300px'},500);
    $('.container').css('opacity', '1');
  });
  $('.show').click(function(){
    $('.nav').animate({marginLeft:'0'},500);
    $('.container').css('opacity', '0.3');
  });
});
</script>
<!--custum script ends -->

Leave a Reply

You have to agree to the comment policy.

  1. Rakhi says:

    Nrsh ji rocks

    1. Naresh Pal says:

      thanks

  2. Dilip Kumar says:

    Nice one sir it looks really great work done by you..

    1. Naresh Pal says:

      Thanks a lot for appreciation