CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Elliot Alderson
Elliot Alderson

Reputation: 285

How to make an outside div come from left on click and on ri-click go to right with jQuery toggle and animation?

The menu works ok, but have no animation. I want the .fullpagenav on click comes out from the left to right, and when re-clicked returns back (from right to left). It was great if you can do it with toggle and animation, only for the short code.

I found this code on the following topic: Slide to side with jquery on click and toggle

So, I have this following code:

	$( ".secondary-toggle" ).click(function() {
    $('.fullpagenav').animate({width:'toggle'},350);
	});
    .fullpagenav {
	position:fixed;
	height: 100%;
	width:100%;
	z-index: 2;
	background-color:#464646;
	display:none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
	  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
        <nav id="site-navigation" class="main-navigation" role="navigation">
         ...
	    </nav>
	  </div>
    </div>

Upvotes: 0

Views: 1356

Answers (3)

Nikhil Goud
Nikhil Goud

Reputation: 584

I placed the fullpagenav div to left most and on click on that div animates as you requested.

Below is the updated code

	$( ".fullpagenav" ).click(function() {
      $('.secondary').animate({width:'toggle'},350);
});
    .fullpagenav {
        position: fixed;
        height: 100%;
        width: 1%;
        margin-left: -1%;
    }
    
    .secondary {
        position: fixed;
        height: 100%;
        width: 10%;
        background-color: #464646;
        display: none;
        padding-left: 1%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
	  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
        <nav id="site-navigation" class="main-navigation" role="navigation">
         ...
	    </nav>
	  </div>
    </div>

Upvotes: 0

Sudhanshu Jain
Sudhanshu Jain

Reputation: 534

First you need to set it at the left most of the page and then create a class having position left:0 and then toggle that class on click and for the effects use transition.

	$( ".secondary-toggle" ).click(function() {
       if($(this).hasClass('active_nav')){
          $('.fullpagenav').removeClass('active_nav');
       }
       else{
          $('.fullpagenav').addClass('active_nav');
       }
       
	});
    .fullpagenav {
	position:fixed;
	height: 100%;
	width:100%;
	z-index: 2;
	background-color:#464646;
	left:-100%;
    transition: all 1s linear 1s;
    -webkit-transition: all 1s linear 1s;
    -moz-transition: all 1s linear 1s;
    
    }
    .active_nav{
        left:0!important;
        transition: all 1s linear 1s;
        -webkit-transition: all 1s linear 1s;
        -moz-transition: all 1s linear 1s;
    
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
	  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
        <nav id="site-navigation" class="main-navigation" role="navigation">
         ...
	    </nav>
	  </div>
    </div>

Upvotes: 0

Paul
Paul

Reputation: 170

Code above doesn't working, I create similiar code for you, to show You how could it be done. Its simply code, if you dont understand something, just ask me.

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script>
  $(document).on('click', '.menu-item', function(e) {
  var self = $(e.currentTarget);
  self.toggleClass('menu-item-toggle')
  });
</script>
<style>
  .menu-item {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0;
    transition: left 2s;
  }
  .menu-item-toggle {
    left: 100px;
  }
</style>

<div class="menu-item">Menu item</div>

https://jsfiddle.net/s7076ja4/

Upvotes: 1

Related Questions