Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sidebar Transitions

Tags:

jquery

css

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.

like image 429
raduken Avatar asked Sep 26 '16 14:09

raduken


People also ask

How do you add transitions to a sidebar in HTML?

First you can set position: absolute on sidebar to remove it from elements flow and set z-index: -1 so its under content. Next you can use width: 100vw on content so when you use transition content doesn't get affected, and you just create one class that will transform: translateX() and toggle it on click.


1 Answers

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

like image 74
mlimon Avatar answered Sep 28 '22 00:09

mlimon