Simple Show Hide Menu Navigation

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

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 for 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%; 
}

PHP reverse a string without predefined function
PHP random quote generator
How to encrypt password in PHP
PHP ftp server connection and file handling
How to lock a file using PHP
PHP code to send email using SMTP
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

◀ Previous Article
Simple way to send SMTP mail using Node.js

Next Article ▶
CSS Simple Menu Navigation Bar

Simple Show Hide Menu Navigation

Related Articles