Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • SlideToggle using JQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 503
    Comment on it

    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

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: