CODEWITHSUNDEEP
jqueryhtmlcssnavigation
Tania Rascia
Tania Rascia

Reputation: 1773

Fixed side bar with slide out off canvas navigation

Someone asked me how to make a slide out off canvas navigation menu a la Lanyon from the Poole series for Jekyll. I originally learned how to make an off canvas navigation from this Scotch.io tutorial, which uses CSS3 transforms.

I have two pens:

The two pens are almost identical. In the first example, if you find the aside and change the position to fixed, it doesn't do anything useful. Upon further investigation, it looks like you can't set a fixed position to an element that's been transformed.

So, I just had to figure out some sort of hack to make it work, which I did by setting everything to position: absolute with varying degrees of left, and putting transitions on all the elements (the nav icon, the main, the aside).

However, where the CSS3 transition is smooth, the positioning hack is jagged. It's especially noticeable on mobile.

Anyway, I was curious as to what a more effective method to achieve the fixed slide out sidebar would be.

Upvotes: 1

Views: 226

Answers (1)

paolobasso
paolobasso

Reputation: 2018

off-canvas nav can be easy make with a little JQuery and some CSS. In this DEMO you can see that. I don't know why in JSFiddle and CODE SNIPPET i can't place the transform: translateX(290px); to the right class (see comments of CSS) but i test the full code on browser and it run very well. I add some CSS for a "good" UI but you can easy edit it if you know basic CSS. I hope that can help you.

EDIT:

For keep the scroll active when NAV is open you have only to delet overflow: hidden; from .m-nav-open class

$(function(){		
	$(".m-nav-opener").click(function(){
		if ($("body").hasClass("m-nav-open")){
			$("body").removeClass("m-nav-open");
		} else {
			$("body").addClass("m-nav-open");
		}
	});
});
body {
    margin: 0px;
    min-height: 100%;
    -webkit-transition: all 0.8s ease 0s;
            transition: all 0.8s ease 0s;
    text-rendering: optimizespeed;
    width: 100%;
    -moz-text-size-adjust: none;
    max-width: 100%;
    height: 100%;
}
.m-nav-container {
  position: fixed;
  z-index: 1001;
  width: 290px;
  height: 100%;
  background: #2F2F2F;
  padding: 0px;
  font-size: 1.15em;
  box-sizing: border-box;
  top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  left: -290px;
  -webkit-transition: all 0.8s ease 0s;
          transition: all 0.8s ease 0s;
}
.m-nav-open {
  /*transform: translateX(290px); use this on your code*/
}
.m-nav-open .m-nav-container {
  -webkit-transform: translateX(290px);
      -ms-transform: translateX(290px);
          transform: translateX(290px); /* cancel this on your code*/
}
.nav-mobile {
  width: 100%;
}
.nav-mobile ul {
  list-style: outside none none;
  padding: 0px;
  margin:0px;
}
.nav-mobile li {
  display: block;
  border-radius: 0px;
  margin: 0px;
  border-top: 1px solid #292929;
  width: 100%;
  padding: 0px;
}
.nav-mobile li:last-child {
  border-bottom: 1px solid #292929;
}
.nav-mobile a {
  display: block;
  color: #919191;
  padding: 15px;
  text-decoration: none;
  border-radius: 0px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif, Helvetica;
  font-weight: 300;
  font-size: 1.0em;
}
.nav-mobile a:hover {
  color: #fff!important;
  background-color: #505050;
}
.m-nav-opener {
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  padding: 0px;
  cursor: pointer;
  left: 3%;
  top: 24px;
  position: absolute;
}
.m-nav-opener:hover {
  background: none;
  border: none;
  text-decoration: none;
  outline: none;
}
.m-nav-opener:focus {
  text-decoration: none;
  outline: none;
}
.m-nav-opener:active {
  background: none;
  border: none;
  color: #FFF;
  padding-top: 0px;
  padding-bottom: 0px;
}
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button class="m-nav-opener">OPEN</button>
<div class="m-nav-container">
<nav class="nav-mobile">
    <ul>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
    </ul>
</nav>
</div>
<p style="height:2000px;">Hi</p>
</body>
</html>

Upvotes: 1

Related Questions