Simple Show Hide Menu Navigation

The show hide menu navigations are basically used for mobile devices. In this article, we have introduced a very simple example to create show hide menu navigation. For this we are using HTML, jQuery and CSS.

Simple Show Hide Navigation Menu

Here, we have created two files 'index.html' and 'style.css'. On 'index.html' page, we have used the unordered list of HTML to display Menu Navigation. With the help of jQuery, we have toggled the menu navigation that can easily show and hide. On 'style.css' page, we have provided styles on the menu navigation with the help of CSS.

To implement this, simply create two files 'index.html' and 'style.css' and copy paste these codes and access 'index.html' on the browser to see the result.


index.html
<html>
    <head>
        <title>Simple Show Hide Navigation Menu</title>
        <link rel="stylesheet" href="/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
		$(document).ready(function(){
			$('#mainsection').click(function(){
				  $('#menulists').slideToggle(200);
			});
		});
		</script>
    </head>
    <body>
        <div id="wrapper">
        <div class="mainsection" id="mainsection">
            <div class="shortmenu">
                <img src="menu.png"/>
            </div>
		</div>
        <div class="menu-lists" id="menulists" >
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
        </div>
    </body>
</html>




style.css
#wrapper { 
 margin: 0 auto; 
 width: 300px; 
 height: auto; 
}
.mainsection { 
 width: 200px; 
 background: #00AAA0; 
 position:relative; 
 clear:both; 
 overflow: hidden  
}
.shortmenu { 
 float: right; 
 padding: 5px; 
 width: 40px; }
.menu-lists { 
 background: #8ED2C9; 
 color : #FCF4D9; 
 width: 200px;  
 position: absolute; 
 clear:both;   
 list-style-type: none; 
 display: inline-block; 
}
ul{ 
 list-style-type: none; list-style-position: inside; 
 padding-left: 0; margin: 0px; 
 font-family: sans-serif;
} 
.menu-lists ul li{ 
 font-size: 19px; width: 100%; 
 height: 50px; display: inline-flex;  
 border-bottom: solid 1px #57bcaf;
}
li a { color: #FCF4D9; text-decoration: none; 
 line-height: 2.5em;  padding-left:10px; 
 margin-top: 0px; width: 100%;
}
li a:hover, li a:focus {   
 background: #FCF4D9; color: #8ED2C9;
 width: 100%; display: inline-block; 
 height: 100%; 
}




Related Articles

Simple star rating system using PHP, jQuery and Ajax
jQuery File upload progress bar with file size validation
JavaScript display PDF in the browser using Ajax call
jQuery loop over JSON result after AJAX Success
Simple star rating system using PHP, jQuery and Ajax
jQuery File upload progress bar with file size validation
Print section of page using javascript
Submit a form data without page refresh using PHP, Ajax and Javascript



Read more articles


General Knowledge



Learn Popular Language