Raduken Raduken - 2 months ago 20
CSS Question

Sidebar Transitions

I did a sidebar menu with transition effect.

the problem is, when I click in the Icon the sidebar kinda squash sandwiching letters.



$('.fa-bars').on('click', function clickHandler(e) {
e.preventDefault();
$('.magic-container').toggleClass('closed');
});

.sidebar-shrink {
height: 100%;
overflow-y: auto;
background: #000;
}
.magic-container.closed .sidebar-left-nav {
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 0;
padding: 0;
}
.magic-container.closed .col-md-10 {
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container-fluid magic-container">
<div class="col-md-2 sidebar-left-nav">
<div class="sidebar-shrink">
<ul>
<li>
<a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a>
</li>
<li>
<a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-md-10">
<div>
<h3 class="headline-primary">
<i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i>
Sidebar
</h3>
<div class="col-md-12">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>





what I trying to archive is this effect REVEAL from here: http://tympanus.net/Development/SidebarTransitions/

I tried translate3d but did not work, someone know how to solve this?

EDIT: I want keep the code and use just css if possible.

thanks.

Answer

I'm not sure what exactly you want with your code, because your css are not good enough. with your js you just toggle closed class so you have to make animate with css.

and it's more easy with css, you have to set first css whatever you want that you reserved animate with toggle your class.

Example: slide from left with

.sidebar-left-nav {
  -webkit-transform: translate3d(-100%, 0px, 0px);
  transform: translate3d(-100%, 0px, 0px);
  visibility: visible;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}
.closed .sidebar-left-nav {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  visibility: visible;
}

jsfiddle demo

Here just set first how to default display your element and after add a class how you want to display that element.

you can also do this with other way like:

.sidebar-left-nav {
  left: -100%;
  position:relative;
  visibility: visible;
  transition: all 0.5s ease 0s;
}
.closed .sidebar-left-nav {
  left: 0;
  visibility: visible;
}

jsfiddle demo

You said on your post that your "sidebar kinda squash sandwiching letters".

And yes it will be because you want did animate with width, you can't avoid it, if you did animate with width.

If you still want to animate with width, set fixed with px (you can also set dynamic px by jquery) then animate parent element with css width. like:

jsfiddle demo

Q, And more question for you ? what purpose you used part of this code ?

.magic-container.closed .col-md-10 {
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  width: 100%;
}

Update demos and example - tympanus

Reveal

Push

w3schools examples

w3schools - sidenav_push

Another way w3schools push

Hope it make sense

Comments