Hello Readers 

The slide Toggles (slideToggle()) method is use toggle between slideUp() and slideDown() for the selected elements like(div, paragraph, etc..).

This blog post will help you with displaying the navigation menu items in a dropdown list. In this, a toggle button (hamburger) will appear in the responsive web design for smaller devices. On click, the toggle button will display the menu items in a dropdown menu. And on another click, the dropdown menu will close.

JQuery -:

This method is used to click the toggle button and checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible.

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $(".navbar").slideToggle(500);
	});
    });
</script>

CSS:

.container{
	width: 400px;
	margin: auto;
}
.header{
	width: 100%;
	padding: 10px 0;
	background: #e1e1e1;
}
.navbar{
	width: 100%;
	display: none;/* navbar disply none */
}
.navbar ul {
    padding: 0;
    margin: 0;
}
.navbar li{
    border-bottom: 1px solid red;
    display: block;
    padding: 10px	;
}
.navbar a {
    color: #111;
    text-decoration: none;
    text-transform: capitalize;
}
.navbar li:last-child a{
	border: none;
}
.clearfix::before{
	display: block;
	content: "";
	clear: both;
}
.clearfix{
	clear: both;
}
.clearfix::after{
	display: block;
	content: "";
	clear: both;
}
.navbar-toggles {
    background: #17adfd none repeat scroll 0 0;
    border: 1px solid #111;
    border-radius: 5px;
    float: right;
    margin: 10px;
    padding: 10px 8px;
    cursor: pointer;
}
.navbar-toggles .icon-bar{
    background: red none repeat scroll 0 0;
    display: block;
    height: 2px;
    width: 22px;
}
.navbar-toggles .icon-bar + .icon-bar{
	margin-top: 4px;
}

HTML:

<div class="navigation ">
	<div class="container">
		<div class="header clearfix">
			<div class="clearfix">
				<button type="buttons" class="navbar-toggles" data-toggle="collapse" data-target="#maynavbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar" id="maynavbar ">
				<ul class="menus">
					<li><a href="#">home</a></li>
					<li><a href="">about</a></li>
					<li><a href="">project</a></li>
					<li><a href="">Project</a></li>
					<li><a href="">contect</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Output:

show the live demo at https://jsfiddle.net/mani_123/6w9xsr6p/1/show/

I have attached full code packet at the bottom