Menu
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.
429
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.
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.
.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
74
answered Sep 28 '22 00:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With