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 the '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 be shown and hidden. On the '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

PHP reverse a string without predefined function
PHP random quote generator
PHP convert string into an array
PHP remove HTML and PHP tags from string
Import Excel File into MySQL using PHP
PHP array length
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
Rating system PHP
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