CODEWITHSUNDEEP
javascriptjqueryhtmlcss
red security
red security

Reputation: 303

Left side menu sliding in correctly but the body not sliding

So I am making a left side menu that slides in when u click it, and it is working fine the animation is correct, when I try to animate the div with class .bd (I'm using this as the body of the page) it doesn't animate. It moves correctly but it is abrupt and have no idea why it is doing that, I included a codepen and I will also include a code snippet it is giving me the same result in both of them.

$(document).ready(function(){
	$('.opener').click(function(){
		function name(){
			if($('.bd').css('margin-left') == ($('body').width()*25)/100+'px'){
				$('.bd').css({
					'animation-name':'expandbody',
					'anmation-duration':'2s',
					'margin-left':'0',
					'width':'100%'
				});
				$('.menu').css({
					'animation-name':'closemenu',
					'animation-duration':'1s',
					'width':'0%',
					'display':'none'
				});
			}else{
				$('.bd').css({
					'animation-name':'smallerbody',
					'anmation-duration':'2s',
					'margin-left':'25%',
					'width':'75%'
				});
				$('.menu').css({
					'animation-name':'expandmenu',
					'animation-duration':'1s',
					'width':'25%',
					'display':'block'
				});
			}
		}
		name();
	});
});
html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.menu{
	width:25%;
	height:100%;
	position:fixed;
	background-color:#0A0A0A;
	display:none;
}
.menu ul{
	padding:0;
	margin:0;
}
.menu ul li{
	margin:0;
	padding:0;
	width:100%;
	border-bottom:1px solid #F0F0F0;
	height:50px;
	line-height:50px;
}
.menu ul li a{
	display:block;
	margin:0;
	padding:0;
	width:100%;
	color:#F0F0F0;
	text-decoration:none;
	font-size:1.5em;
	font-family:Arial;
	font-weight:bold;
	transition:all .5s;
}
.fa{
	width:25px;
	margin-left:10px;
	margin-right:25px;
}
.caret{
	float:right;
	display:block;
	width:0px;
	height:0px;
	border-top:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid #F0F0F0;
	position:relative;
	top:13px;
	display:none;
}
.menu ul li:hover{
	background-color:#1A1A1A;
}
.menu ul li:hover a>.caret{
	display:block;
}
.bar{
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	width:100%;
	height:50px;
	background:#0A0A0A;
	color:#A0A0A0;
}
.opener{
	line-height:40px;
	font-size:2em;
	margin-left:25px;
	padding-left:6px;
	padding-right:6px;
	margin-top:5px;
	margin-bottom:5px;
	max-width:30px;
	cursor:pointer;
	font-weight:bold;
	transition:all .5s;
}
.opener:hover{
	color:#F0F0F0;
}
.bd{
	width:100%;
	height:100%;
	background-color:#F0F0F0;
}

/* Animations*/

@keyframes expandmenu{
	from{
		width:0%;
		display:none;
	}
	to{
		width:25%;
		display:block;
	}
}
@keyframes closemenu{
	from{
		width:25%;
		display:block;
	}
	to{
		width:0%;
		display:none;
	}
}
@keyframes expandbody{
	from{
		width:75%;
		margin-left:25%;
	}
	to{
		width:100%;
		margin-left:0%;
	}
}
@keyframes smallerbody{
	from{
		width:100%;
		margin-left:0%;
	}
	to{
		width:75%;
		margin-left:25%;

	}
}
<head>
	<title>Queltick | Admin Dashboard</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<script
  src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="menu">
<ul>
	<li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a></li>
</ul>
</div>
<div class="bd">
	<div class="bar">

		<div class="opener">
		&#9776;
		</div>

		<div class="logo"></div>

	</div>

</div>
</body>

EDIT:
I changed ($(window).width()*25)/100+'px' to ($('body').width()*25)/100+'px' to make it more responsive

Upvotes: 0

Views: 61

Answers (3)

red security
red security

Reputation: 303

for anyone interested i fixed it
here is the fix:

$(document).ready(function(){
	$('.opener').click(function(){
		function name(){
			if($('.bd').css('margin-left') == ($(window).width()*25)/100+'px'){
				$('.bd').css({
					'animation-name':'expandbody',
					'animation-duration':'1s',
					'margin-left':'0',
					'width':'100%'
				});
				$('.menu').css({
					'animation':'closemenu 1s',
					'margin-left':'-25%'
				});
			}else{
				$('.bd').css({
					'animation-name':'smallerbody',
					'animation-duration':'1s',
					'margin-left':'25%',
					'width':'75%'
				});
				$('.menu').css({
					'animation-name':'expandmenu',
					'animation-duration':'1s',
					'margin-left':'0%',
					'display':'block'
				});
			}
		}
		name();
	});
});
html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.menu{
	width:25%;
	height:100%;
	position:fixed;
	background-color:#0A0A0A;
	margin-left:-25%;
-webkit-box-shadow: inset -2px 2px 10px -3px rgba(240,240,240,1);
-moz-box-shadow: inset -2px 2px 10px -3px rgba(240,240,240,1);
box-shadow: inset -2px 2px 10px -3px rgba(240,240,240,1);
}
.menu-title{
	height:50px;
	line-height:50px;
	font-size:1.7em;
	font-family:Arial;
	color:#F0F0F0;
	width:calc(100% - 5px);
	padding-left:5px;
	border-bottom:2px solid #F0F0F0;
}
.menu ul{
	padding:0;
	margin:0;
}
.menu ul li{
	margin:0;
	padding:0;
	width:100%;
	border-bottom:1px solid #F0F0F0;
	height:50px;
	line-height:50px;
}
.menu ul li a{
	display:block;
	margin:0;
	padding:0;
	width:100%;
	color:#F0F0F0;
	text-decoration:none;
	font-size:1.5em;
	font-family:Arial;
	font-weight:bold;
	transition:all .5s;
}
.fa{
	width:25px;
	margin-left:25px;
	margin-right:25px;
}
.caret{
	float:right;
	display:block;
	width:0px;
	height:0px;
	border-top:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid #F0F0F0;
	position:relative;
	top:13px;
	display:none;
}
.menu ul li:hover{
	background-color:#1A1A1A;
}
.menu ul li:hover a>.caret{
	display:block;
}
.bar{
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	width:100%;
	height:50px;
	background:#0A0A0A;
	color:#A0A0A0;
}
.opener{
	line-height:40px;
	font-size:2em;
	margin-left:25px;
	padding-left:6px;
	padding-right:6px;
	margin-top:5px;
	margin-bottom:5px;
	max-width:30px;
	cursor:pointer;
	font-weight:bold;
	transition:all .5s;
}
.opener:hover{
	color:#F0F0F0;
}
.bd{
	width:100%;
	height:100%;
	background-color:#1A1A1A;
}

/* Animations*/

@keyframes expandmenu{
	from{
		margin-left:-25%;
	}
	to{
		margin-left:0%;
	}
}
@keyframes closemenu{
	from{
		margin-left:0%;
	}
	to{
		margin-left:-25%;
	}
}
@keyframes expandbody{
	from{
		width:75%;
		margin-left:25%;
	}
	to{
		width:100%;
		margin-left:0%;
	}
}
@keyframes smallerbody{
	from{
		width:100%;
		margin-left:0%;
	}
	to{
		width:75%;
		margin-left:25%;

	}
}
<head>
	<title>Queltick | Admin Dashboard</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<script
  src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="menu">
<div class="menu-title">
&#9776; Menu
</div>
<ul>
	<li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a></li>
</ul>
</div>
<div class="bd">
	<div class="bar">

		<div class="opener">
		&#9776;
		</div>

		<div class="logo"></div>

	</div>

</div>
</body>
</html>

Upvotes: 0

muratkh
muratkh

Reputation: 123

I changed the animation-name and animation-duration to animation and put them both together. i think animation-name is not correct way to put it. And it worked

$(document).ready(function(){
    $('.opener').click(function(){
        function name(){
            if($('.bd').css('margin-left') == ($('body').width()*25)/100+'px'){
                $('.bd').css({
                    'animation':'expandbody 2s',
                    'margin-left':'0',
                    'width':'100%'
                });
                $('.menu').css({
                    'animation':'closemenu 1s',
                    'width':'0%',
                    'display':'none'
                });
            }else{
                $('.bd').css({
                    'animation':'smallerbody 2s',
                    'margin-left':'25%',
                    'width':'75%'
                });
                $('.menu').css({
                    'animation':'expandmenu 1s',
                    'width':'25%',
                    'display':'block'
                });
            }
        }
        name();
    });
});

Upvotes: 0

Sam0
Sam0

Reputation: 1459

In your case it was two minor spelling mistakes on lines 7 and 20 'anmation-duration' should be 'animation-duration'

$(document).ready(function() {
  $('.opener').click(function() {
    function name() {
      if ($('.bd').css('margin-left') >= ($('body').width() * 25) / 100 + 'px') {
        $('.bd').css({
          'animation-name': 'expandbody',
          'animation-duration': '2s',
          'margin-left': '0',
          'width': '100%'
        });
        $('.menu').css({
          'animation-name': 'closemenu',
          'animation-duration': '1s',
          'width': '0%',
          'display': 'none'
        });
      } else {
        $('.bd').css({
          'animation-name': 'smallerbody',
          'animation-duration': '2s',
          'margin-left': '25%',
          'width': '75%'
        });
        $('.menu').css({
          'animation-name': 'expandmenu',
          'animation-duration': '1s',
          'width': '25%',
          'display': 'block'
        });
      }
    }
    name();
  });
});
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.menu {
  width: 25%;
  height: 100%;
  position: fixed;
  background-color: #0A0A0A;
  display: none;
}
.menu ul {
  padding: 0;
  margin: 0;
}
.menu ul li {
  margin: 0;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #F0F0F0;
  height: 50px;
  line-height: 50px;
}
.menu ul li a {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #F0F0F0;
  text-decoration: none;
  font-size: 1.5em;
  font-family: Arial;
  font-weight: bold;
  transition: all .5s;
}
.fa {
  width: 25px;
  margin-left: 10px;
  margin-right: 25px;
}
.caret {
  float: right;
  display: block;
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #F0F0F0;
  position: relative;
  top: 13px;
  display: none;
}
.menu ul li:hover {
  background-color: #1A1A1A;
}
.menu ul li:hover a>.caret {
  display: block;
}
.bar {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
  height: 50px;
  background: #0A0A0A;
  color: #A0A0A0;
}
.opener {
  line-height: 40px;
  font-size: 2em;
  margin-left: 25px;
  padding-left: 6px;
  padding-right: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
  max-width: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: all .5s;
}
.opener:hover {
  color: #F0F0F0;
}
.bd {
  width: 100%;
  height: 100%;
  background-color: #F0F0F0;
}
/* Animations*/

@keyframes expandmenu {
  from {
    width: 0%;
    display: none;
  }
  to {
    width: 25%;
    display: block;
  }
}
@keyframes closemenu {
  from {
    width: 25%;
    display: block;
  }
  to {
    width: 0%;
    display: none;
  }
}
@keyframes expandbody {
  from {
    width: 75%;
    margin-left: 25%;
  }
  to {
    width: 100%;
    margin-left: 0%;
  }
}
@keyframes smallerbody {
  from {
    width: 100%;
    margin-left: 0%;
  }
  to {
    width: 75%;
    margin-left: 25%;
  }
}
<head>
  <title>Queltick | Admin Dashboard</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="menu">
    <ul>
      <li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a>
      </li>
      <li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a>
      </li>
      <li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a>
      </li>
      <li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a>
      </li>
    </ul>
  </div>
  <div class="bd">
    <div class="bar">

      <div class="opener">
        &#9776;
      </div>

      <div class="logo"></div>

    </div>

  </div>
</body>

Upvotes: 2

Related Questions