CSS for a Sidebar Menu That Folds in and Out

css for a sidebar menu that folds in and out

Not sure what kind of solution do you want, pure CSS, JS, jQuery etc but here are some links to get you started.

Try searching for "css slide out sidebar" or something along those lines

jQuery examples

http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/

http://www.berriart.com/sidr/

http://mmenu.frebsite.nl/

http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

CSS Example

http://css-tricks.com/off-canvas-menu-with-css-target/

Bootstrap sidebar menu overlapped during content scroll

Yo timgavin, take a look at this and tell me what you think or if there's any changes you want me to make for you! https://jsfiddle.net/s3vga1mm/4/

Here are my changes to your CSS.

#topbar {
  height: 60px;
  background: #F3F3F3;
  position: fixed; /* Added this */
  z-index: 200; /* Added this */
  width: 100%; /* Added this */
}

/* Added this */
#sidebar-toggle:focus {
    outline: none;
}

#content-wrapper {
  position: absolute;
  width: 100%;
  transition:.5s;
  font-size: 1.1em;
  padding-left: 250px!important; /* Changed this */
  margin-top: 50px; /* Added this */
}

#sidebar-wrapper {
  position: fixed; /* Changed this */
  z-index: 1;
  width: 250px;
  min-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden; /* Changed this */
  background-color: #0F2849;
  transition:.5s;
}

How to make menu fold like paper using CSS?

I solved it by using a negative margin and transitioning that with the same amount of time it takes for the transformation to transition (credit for solution goes to @GCyrillus's codepen). I set the margins as double the size of the menu items as margins collapse so it was perfect. It's the closest I could get to the desired effect, though I would have prefered to get the effect of Felix Niklas's plugin. I think it uses shadows as well, but that cannot be implemented with pure CSS as transitions are linear.

You may correct me on any of which I have said or add to my code.

// Nav Button TogglejQuery('.dropdown-toggle').on('click', function() {  jQuery(this).toggleClass('active');});

.dropdown-toggle {  color: #ecf0f1;  padding: 12px 0;}
.dropdown-toggle.acitve {  color: #bdc3c7}
.toggleable {  -webkit-transition: max-height .75s ease-in-out, -webkit-transform .75s ease-in-out, visibility .75s ease-in-out;  transition: max-height .75s ease-in-out, transform .75s ease-in-out, visibility .75s ease-in-out;  -webkit-transform-origin: top;  transform-origin: top;  -webkit-transform: scaleY(0);  transform: scaleY(0);  list-style: none;  position: relative;  margin: 0;  padding: 0}
.toggleable .toggleable {  -webkit-transform-origin: center;  transform-origin: center;}
.dropdown-toggle.active+.toggleable {  visibility: visible;  max-height: 1200px;  -webkit-transform: scaleY(1);  transform: scaleY(1)}
#nav-primary {  margin: 30px 10px;  text-align: center;  position: relative}
#menu-main-toggle {  border: 0;  background-color: #e74c3c;  width: 100%;  border-bottom: 1px dashed #c0392b;  height: 50px;}
#menu-main {  width: 100%;  position: absolute}
.dropdown-toggle,.menu-item {  background: #e74c3c}
.menu-item {  border-top: 1px dashed #c0392b;  height: 50px;  transition: transform .75s ease-in-out, margin .75s ease-in-out;}
#menu-main .menu-item.odd {  -webkit-transform: perspective(320px) rotateX(90deg);  transform: perspective(320px) rotateX(90deg);  -webkit-transform-origin: bottom;  transform-origin: bottom;  margin-top: -100px}#menu-main .menu-item.even {  -webkit-transform: perspective(320px) rotateX(-90deg);  transform: perspective(320px) rotateX(-90deg);  -webkit-transform-origin: top;  transform-origin: top;  margin-bottom: -100px}
#nav-primary .dropdown-toggle.active + .toggleable .menu-item {  -webkit-transform: perspective(320px) rotateX(0deg);  transform: perspective(320px) rotateX(0deg);  margin: 0}
.menu-item.first {  border-top: none}
.menu-link {  display: block;  padding: 12px;  color: #ecf0f1}
.menu-link:active {  color: #fbfcfc}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><nav id="nav-primary">  <button id="menu-main-toggle" class="dropdown-toggle">Menu</button>  <ul id="menu-main" class="nav toggleable hide">    <li class="odd first menu-item"><a class="menu-link" href="//localhost:3000/index.php/about/">About</a></li>    <li class="even menu-item"><a class="menu-link" href="/index.php/category/bahrain/">Bahrain</a></li>    <li class="odd menu-item parent"><a class="menu-link" href="/index.php/category/information-technology/">Information Technology</a>    </li>    <li class="even menu-item"><a class="menu-link" href="/index.php/category/snippets/">Snippets</a></li>    <li class="odd last menu-item"><a class="menu-link" href="//localhost:3000/index.php/contact/">Contact</a></li>  </ul></nav>

---

Related Topics