CODEWITHSUNDEEP
jqueryslide
user3441673
user3441673

Reputation: 11

Slide Div Left to Right

I want to slide div left to the right when someone click menu buttons. My site has menu on the left side of page. And I want to when someone click any button on my menu, it will appear div on page but not like a lightbox. Sorry about my English by the way. I'm lookin for help

Upvotes: 1

Views: 5710

Answers (1)

Shiva
Shiva

Reputation: 6887

You can use sidr ,which is a jquery plugin to implement the menu.

Or you can implement it yourself using the CSS3 translation property or using jquery.

A very quick and simple implementation can be something like this.( I intend to show methods.One using the jQuery Slide effect and the 2nd using the CSS3 translation.)

For better understanding the functionality you can refer to JSFiddle here

HTML Code

<div id="leftSideBar"></div>
<div id="leftSideMenuIcon"></div>

Javascript Code.

$('#leftSideBar').hide();
$("#leftSideMenuIcon").on('click', function() {
  $("#leftSideMenuIcon").toggleClass("active");
  $('#leftSideBar').toggle("slide", {
    "direction": "left",
    "distance": "200px"
  }, "fast");
  $("#leftSideMenuIcon").toggleClass("pushObjectsForSidebar");
});

CSS

#leftSideMenuIcon {
  height: 20px;
  width: 20px;
  top: 0;
  position: fixed;
  background-color: red;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
}

#leftSideBar {
  height: 200px;
  width: 200px;
  background-color: green;
  top: 0;
  position: fixed;
}

.pushObjectsForSidebar {
  -webkit-transform: translate(200px,0px);
  -ms-transform: translate(200px,0px);
  -o-transform: translate(200px,0px);
  -moz-transform: translate(200px,0px);
  transform: translate(200px,0px);
}

Upvotes: 1

Related Questions