Answers (7)

Reputation: 472

Hi Maybe try this code < -- Update / remove/add DOM element -- >

var clSideBar = $('.magic-container .sidebar-left-nav').clone();
var ctMagic = $('.magic-container');
var sideBarLeft = $('.magic-container .sidebar-left-nav');
var btnBars = $('.magic-container .fa-bars');

sideBarLeft.remove(); // Remove sidebar nav
 
btnBars.on('click', function clickHandler(e) {
   e.preventDefault();
   ctMagic.toggleClass('closed');
 
    if(clSideBar && ctMagic.hasClass('closed')) {
         setTimeout(function(){
             clSideBar.remove();
       }, 600);
   } else {
      clSideBar.prependTo(ctMagic);
      clSideBar.addClass('timeout');
       setTimeout(function(){
              clSideBar.removeClass('timeout');
       }, 5);
   }

});

.magic-container .sidebar-left-nav {
  width:180px;
  margin-left:0px;
  position:fixed;
  z-index:1;
  left:0px;
  top:0px;
  padding: 0;
  height:100%;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
  overflow-x: hidden;
}
.magic-container .sidebar-left-nav.timeout {
  width:0px;
}
.magic-container .cont-main {
  margin-left:180px;
  -webkit-transition: margin-left 0.5s;
  transition: margin-left 0.5s;
}
 
.magic-container.closed .sidebar-left-nav {
  width: 0px;
}
.magic-container.closed .cont-main {
  margin-left:0px;
}
.magic-container .menu-toggle {
   cursor:pointer;
}
.sidebar-shrink {
  height: 100%;
  width:180px;
  background: #000;
  padding: 0px;
}
.sidebar-shrink a {
   display:block;
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 17px;
   white-space:nowrap;
}
.sidebar-shrink ul {
    padding-left: 0;
}

<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 closed">
    <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 cont-main">
      <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>

Regards :)

Upvotes: 1

eyupbasturk

Reputation: 41

If you animate the sidebar with width property it will collapse the letters. Only way to do it is adding another child div to sidebar and adding sidebar parent overflow-hidden.

But I think this is what you are trying to do :

$('.fa-bars').on('click', function clickHandler(e) {
  e.preventDefault();
  $('body').toggleClass('sidebar-open');
});

.product-categories{
  width: 100%;
  float:left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sidebar-shrink {
  height: 100%;
  overflow-y: auto;
  background: #000;
}

.magic-container .sidebar-left-nav {
  width : 300px;
  -webkit-transition : all .3s;
  transition : all .3s;
  position : absolute;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  position: absolute;
  left : 0;
  top : 0;
  height : 100%;
}

body.sidebar-open .sidebar-left-nav {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

body.sidebar-open .col-md-10{
  -webkit-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -o-transform: translateX(300px);
  transform: translateX(300px);
}

.magic-container .col-md-10 {
  -webkit-transition: all 0.3s;
  transition: all 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>

I added static width to sidebar. If you dont want to do that. you need to use window.getComputedStyle(). And add translate value to the col-md-10 via javascript.

Upvotes: 4

Gust van de Wal

Reputation: 5291

Just to throw a CSS only solution into the bunch, I made a version with a checkbox. This way it is fast and works without JavaScript

html,body{
  height: 100%;
}
body{
  margin: 0;
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
}
#sidebarCheckbox{
  display: none;
}
#sidebarCheckbox:checked ~ #main{
  transform: translateX(200px);
}
#sidebar{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  padding: 8px 0;
  background: #000;
}
#sidebar ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar a{
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  color: #05F;
}
#sidebar i.fa-bullhorn{
  float: right;
}
#main{
  position: relative;
  min-height: 100%;
  padding: 16px;
  background-color: #FFF;
  transition: transform .3s ease;
}
label[for="sidebarCheckbox"]{
  font-size: 30px;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<input type="checkbox" id="sidebarCheckbox" />
<div id="sidebar">
  <ul>
    <li><a href="#">Hello<i class="fa fa-bullhorn" aria-hidden="true"></i></a></li>
    <li><a href="#">Hello<i class="fa fa-bullhorn" aria-hidden="true"></i></a></li>
  </ul>
</div>
<div id="main">
  <label for="sidebarCheckbox" style="">&#9776; SideBar</label>
</div>

I completely dropped the use of Bootstrap, but it's the same principle. There is a checkbox at the top, then comes the #sidebar and then the #main content. In the main content, there is a label that is linked to the checkbox (with native HTML). When you click it, the checkbox gets checked, which I used in the CSS with

#sidebarCheckbox:checked ~ #main{
  transform: translateX(200px);
}

It'll go to the main content, and tell it to translate 200px to the right, which is how wide I made the sidebar. You can change this however you want, of course.

Hope this helps

Upvotes: 1

mlimon

Reputation: 671

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

Upvotes: 11

Nenad Vracar

Reputation: 122047

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 also added that dim effect with one pseudo-element that will change its opacity on click, important here is to set pointer-events: none so you can click button.

$('button').click(function() {
  $('.content').toggleClass('move');
})

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}
.sidebar {
  width: 200px;
  height: 100vh;
  background: lightblue;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.content {
  background: white;
  min-height: 100vh;
  width: 100vw;
  transition: all 0.3s ease-in;
  position: absolute;
}
.content:before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none;
  background: black;
  transition: all 0.3s ease-in;
  opacity: 0;
  left: 0;
  top: 0;
}
.move {
  transform: translateX(200px);
}
.content.move:before {
  opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">lorem ipsum</div>
<div class="content">
  <button>Sidebar</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore odio consectetur suscipit, iusto accusantium, aspernatur quia possimus debitis enim similique veniam voluptatem iste soluta, vitae officia quos earum quaerat reprehenderit.</p>
</div>

Upvotes: 2

Asifuzzaman

Reputation: 1783

I tried something for you hope it will help you avoid the script i add it because of facing some problem adding fiddle link

<script>
var o =document.getElementById("one");
var to =document.getElementById("two");
to.style.display = 'none';

function openNav() {
document.getElementById("mySidenav").style.width = "150px";
document.getElementById("main").style.marginLeft = "150px";
o.style.display = 'none';
to.style.display = '';
}

function closeNav() {

 document.getElementById("mySidenav").style.width = "0";
 document.getElementById("main").style.marginLeft= "0";
 o.style.display = '';
 to.style.display = 'none';

}

</script>

See the fiddle below.I saw your effect "REVEAL" and try something like that hope it will work for you or help you to modify more.And yes please add css as your wish I just added by my own you can custom it as yours and also the Js code

sidebarfiddle

If the link breaks again please let me know I will post the whole code

Upvotes: 2

PapaSoft

Reputation: 53

The problem is you're setting transition and width only to the sidebar, when the sidebar parent has class "closed". All you need is to put transition styles to the sidebar, when parent has no class "closed", like this:

 .sidebar-left-nav {
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 100%; 
}

And then put:

.magic-container.closed .sidebar-left-nav {
width: 0;
padding: 0;
}

Off course you will need to add more styles for positioning and so on. Good luck with it!

Upvotes: 1

Sidebar Transitions

Answers (7)

Example: slide from left with

Related Questions