CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Kay Gee
Kay Gee

Reputation: 271

jquery div slide effect with another div adjusting width automatically

I am trying the giva a menu slides in/out effect to give the main content more space whenever user wants - More like the Google Calendar hamburger menu click behaviour.

I am trying to have two divs side-by-side. 1st is menu, 2nd is other content. Using jQuery UI I am trying toggle slide the 1st div.

Two issues -

  1. Only when I give fixed width to 2nd div, I am able to place them side-by-side.

    How to make the second div takes rest of the space?

  2. Only after completion of the slide-out 2nd div adjust its width.

    How to make increase the width smoothly?

Here is the code https://codepen.io/coder92/pen/Yjomwd

$(document).ready(function(){
	//adds click function to the hamburger menu
	$( "#menu" ).click(function() {
		$(".menuDiv").toggle('slide');
	});
 }); 
.menuDiv{
  background-color: green;
  width:200px;
  float:left;
}
.contentDiv{
  //width:100%;
  width:500px;
  color:white;
  background-color:blue;
  float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<span id="menu"> toggle </span>

<div>
  <div class="menuDiv">
    Menu
  </div>
  <div class="contentDiv">
    <table>
      <tr>
        <td> data </td>
      </tr>
    </table>
  </div>
</div>

Thanks in advance!

Upvotes: 0

Views: 70

Answers (2)

Chan MT
Chan MT

Reputation: 495

The way Google Calendar do it is to utilize a combination of flex display, hidden overflow and negative margin to achieve the effect. You may refer to the sample below:

$(document).ready(function(){
    //adds click function to the hamburger menu
    $("#menu").click(function () {
       var $menu = $(".menuDiv");
       if ($menu.is(':visible')) {
            $menu.animate({'margin-left':-200}, function() {
                $menu.hide();
            });
        } else {
            $menu.show().animate({'margin-left':0});
        }
    });
}); 
.containerDiv {
    display: flex;
    overflow-x: hidden;
}
.menuDiv{
  background-color: green;
  width:200px;
}
.contentDiv{
  color:white;
  background-color:blue;
  float:left;
  flex:1 1 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<span id="menu"> toggle </span>

<div class="containerDiv">
  <div class="menuDiv">
    Menu
  </div>
  <div class="contentDiv">
    <table>
      <tr>
        <td> data </td>
      </tr>
    </table>
  </div>
</div>

Note that I use the jQuery animate method, while Google Calendar use the CSS transition for theirs.

Upvotes: 1

Funce
Funce

Reputation: 60

For the smooth sliding you can use

  • $(".menuDiv").animate({width: 'toggle'}, 350);

And to make the data take up the rest of the page

  • Remove float: left; from .contentDiv (Float makes the element not take full size)
  • Add margin: 0 auto; (This makes the data take the full rest of the page)
  • Add overflow: hidden (this stops the blue from going under the green)

Check it out: https://codepen.io/Funce/pen/QBeLOr

Upvotes: 2

Related Questions