When sidebar open the body will push left

Question

I am trying to build an effect so that when I click on a button, a sidebar will open and push body of page to left. My button is working but body does not push to left.Here is my full code. I try give more class for body but not working.

		$(document).ready(function(){
			$('#sidebar-btn').click(function(){
				$('#sidebar').toggleClass('visible');
				$('.body-menu').toggleClass('.body-menu-left');
			});
		})

body{
	margin:0px;
	padding:0px;
	font-family: "Helvetica Neue", Helvetica, Arial;
}

#sidebar{
	background:black;
	width: 370px;
	height:100%;
	display: block;
	position: fixed;
	left:-370px;
	top:0px;
	transition: left 0.3s linear;
}
#sidebar.visible{
	left:0px;
	transition: left 0.3s linear;
}
ul{
	margin:0px;
	padding: 0px;
	padding-top: 65px;
}
ul li{
	list-style: none;
	padding-top: 10px;
}
ul li a{
	background:black;
	border-bottom:1px solid #111;
	display: block;
	width: 280px;
	padding: 10px;
	text-decoration: none;
}
#font1{
		color:gray;
		font-weight: bold;
		text-decoration: none
}
#font2{
	color:white;
	font-weight: bold;
	text-decoration: none
}
#sidebar-btn{
	display: inline-block;
	vertical-align: middle;
	width:20px;
	height: 15px;
	cursor: pointer;
	margin:20px;
	position: absolute;
	top: 0px;
	right:-60px;
}
#sidebar-btn span{
	height:1px;
	background:white;
	margin-bottom: 5px;
	display: block;
}
#sidebar-btn span:nth-child(2){
	width:75%;
}
#sidebar-btn span:nth-child(3){
	width:50%;
}
#title-menu{
	color: white;
	letter-spacing: 15px;	
	padding-left: 25px;
}
#title-menu > h2{
	padding-left: 20px;
}
/*hover*/
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;

}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background-color: white !important; 
  height: 2px !important;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right:60;
  background-color: white;
}

/*Fliphvr*/
/* Set-up */


/* Container box to set the sides relative to */
.cube {
	width: 30%;
	padding-left: 20px;
	height: 50px;
	-webkit-transition: -webkit-transform .10s;
	transition: transform .10s; /* Animate the transform properties */
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety,.flop {
	background: black;	
	height: 50px;
}

/* Position the faces */
.flippety {
	-webkit-transform: translateZ(50px);
	transform: translateZ(50px);
}

.flop {
	-webkit-transform: rotateX(-90deg) translateZ(-50px);
	transform: rotateX(-90deg) translateZ(-50px);
}

/* Rotate the cube */
.cube:hover {
	-webkit-transform: rotateX(89deg);
	transform: rotateX(89deg); /* Text bleed at 90º */
}




	
	
	Sidebar
	
	
	
	
	
	


	
	
		CRIMINAL
		
			
			
			HOME
			
			
			HOME
			
			
			
			
			
			THE STORY
			
			
			THE STORY
			
			
			

			
			CAST & FILM MAKERS
			
			
			CAST & FILM MAKERS
			
			
			

			
			GALLERY
			
			
			GALLERY
			
			
			

			
			VIDEOS
			
			
			VIDEOS
			
			
			

			
			ARE YOU A PSYCHOPATH?
			
			
			ARE YOU A PSYCHOPATH?

Rachel Gallen · Accepted Answer

Not entirely sure what you're looking for, but in the below snippet, if you click where it says 'Menu' the sidebar will shift to the left. The links will obviously lead to wherever you indicate

I have a fiddle (from a while ago) at https://jsfiddle.net/RachGal/sokq4956/1/

$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
    height: 100%
}

#sidebar-wrapper {
    margin-left: -150px;
    left: 70px;
    width: 150px;
    background: #222;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .4s ease 0s;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 150px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
}

#page-content-wrapper {
  width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    width: 150px;
    background: #252525;
    border-top: 1px solid #373737;
    border-bottom: 1px solid #1A1A1A;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}
.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

@media (max-width:767px) {
    #wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
}
#sidebar-wrapper {
    left: 70px;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
    width: 150px;
    transition: all .4s ease 0s;
}
}



    
        
      
           Menu 
      
             
          Link1
          link2
        
      
        
        
            
            
                
                    
                        Click on the Menu to Toggle Sidebar

Hope this helps

Rachel

When sidebar open the body will push left

Answers (1)

Related Questions