Making a full page navigation for all devices

Having responsive site navigation is important for a website and also it is necessary to have good user experience on all the platforms

The below example navigation that I have created is good for somebody who wants make user to focus on the navigation links or just want to highlight the navigation better. If you just want to play with the code and skip the below blocks of codes, fiddle is available here https://jsfiddle.net/mannemvamsi/8tL67hfp/.

I am little lazy to add css for all the elements, so I just used bootstrap framework and jquery for click actions. You can easily do the same without using those frameworks. One useful CSS that I have got from another article of mine is how to place any element vertically center .(used this to place menu vertically center of the page).

1. Creating HTML document for the navigation

<div class="container">
<div class="menu-wrapper hidden">
    <div class="text-center v-center" >
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#" id="closeMenu" class="text-danger toggleMenu">Close<span class="close-icon">&times;</span></a></li>
            <li><a href="#" >Menu Item 1</a></li>
            <li><a href="#" >Menu Item 2</a></li>
            <li><a href="#" >Menu Item 3</a></li>
        </ul>
    </div>
</div>

<button type="button" class="toggleMenu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
 </button>
     
</div>

2. Adding CSS for the html menu & button

.container {
    padding:10px;
}
.menu-wrapper {
    position:fixed;
    height:100%;
    width:100%;
    background-color:#222;
    top:0;
    left:0;
   
}
.bar {
    display:block;
    width:15px;
    padding:2px;
    margin:2px;
    border-radius:2px;
    background-color:#444; 
}

.v-center {
    text-align:center;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}
.close-icon {
    padding:0 10px;
}

3. Adding action for menu button using jquery

var menuopened = false;
$('.toggleMenu').click(function() {
    var menuWrapper =$('.menu-wrapper');
    if(menuWrapper.hasClass('hidden')) {
       menuWrapper.removeClass('hidden');  
    }
    else {
       menuWrapper.addClass('hidden');  
    }
});