[WiP] Responsive Sidebar Navigation Switch

In this example below you will see how to do a [WiP] Responsive Sidebar Navigation Switch with some HTML / CSS and Javascript

Switch from a fixed, left sidebar that is placed outside a relative container (mobile/tablet), to that left sidebar being re-located as an absolute element, inside of the container (desktop) with zero cloning of the nav.

Thumbnail
This awesome code was written by StevenVentimiglia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StevenVentimiglia ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[WiP] Responsive Sidebar Navigation Switch</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Switch from a fixed, left sidebar that is placed outside a relative container (mobile/tablet), to that left sidebar being re-located as an absolute element, inside of the container (desktop) with zero cloning of the nav." />
    <meta name="author" content="Steven E. Ventimiglia" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="mainContainer">
  <div class="wrapper">
    <div class="page group">
      <nav>
				<div class="menu">
					<h3>Main Menu</h3>
					<ul>
						<li><a href=""><span>Link #001</span></a></li>
						<li><a href=""><span>Link #002</span></a></li>
						<li><a href=""><span>Link #003</span></a></li>
						<li><a href=""><span>Link #004</span></a></li>
						<li><a href=""><span>Link #005</span></a></li>
						<li><a href=""><span>Link #006</span></a></li>
						<li><a href=""><span>Link #007</span></a></li>
						<li><a href=""><span>Link #008</span></a></li>
						<li><a href=""><span>Link #001</span></a></li>
						<li><a href=""><span>Link #002</span></a></li>
						<li><a href=""><span>Link #003</span></a></li>
						<li><a href=""><span>Link #004</span></a></li>
						<li><a href=""><span>Link #005</span></a></li>
						<li><a href=""><span>Link #006</span></a></li>
						<li><a href=""><span>Link #007</span></a></li>
						<li><a href=""><span>Link #008</span></a></li>
						<li><a href=""><span>Link #001</span></a></li>
						<li><a href=""><span>Link #002</span></a></li>
						<li><a href=""><span>Link #003</span></a></li>
						<li><a href=""><span>Link #004</span></a></li>
						<li><a href=""><span>Link #005</span></a></li>
						<li><a href=""><span>Link #006</span></a></li>
						<li><a href=""><span>Link #007</span></a></li>
						<li><a href=""><span>Link #008</span></a></li>					
					</ul>
				</div>
      </nav>
			<div id="home">
				<div class="content">
					<h1>Untitled Page</h1>
					<p><b>I'm currently in the process of running cross-compatibility QA.</b></p>
					<p>
						<div class="group">
							<div class="box"></div>
							<div class="box"></div>
							<div class="box"></div>
							<div class="box"></div>
						</div>
					</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error rem, libero provident dolores corporis? Nam voluptas cupiditate consectetur numquam expedita. Minus quasi repudiandae consectetur officiis ea, animi repellat reiciendis voluptatem!</p>
					<p>Dignissimos animi non, accusamus tenetur. Veritatis laudantium, qui fuga assumenda corrupti harum dolore at necessitatibus velit. Sequi, veniam reprehenderit maxime delectus ex sint voluptate pariatur, quasi, recusandae repudiandae vero, asperiores!</p>
					<p>Repellendus provident iusto, quae veniam praesentium laudantium ea quidem, ratione impedit modi perspiciatis omnis qui? Id veritatis explicabo magni sapiente nisi aspernatur ex, consequuntur quas. Aspernatur et ex, inventore sequi.</p>
					<p>Dignissimos corporis quas similique consequuntur illum, esse commodi quidem, nostrum repellendus velit, nam repellat rem labore optio possimus ex accusantium, iusto recusandae nemo officia! Dignissimos voluptates maiores, repellendus nulla doloremque.</p>
					<p>Qui voluptate minima cumque, dolorem non saepe soluta sed molestias nisi, consequuntur facilis. Autem, unde, facere! Perferendis deleniti doloribus quis vitae iure, rerum asperiores! Accusantium non ab placeat ratione dolore.</p>
					<p>Maiores ut quisquam sunt saepe, facere repellat nisi possimus, mollitia numquam ducimus porro repudiandae placeat! Quod voluptas nostrum ipsam magnam aliquam sint dolorem, autem minus, optio, laboriosam neque exercitationem fuga?</p>
					<p>Tempore quaerat quisquam, iusto libero. Temporibus provident neque repudiandae cum id dolores incidunt obcaecati, et est minus voluptas, similique vel. Architecto eveniet inventore numquam, odio facilis nisi porro et natus!</p>
					<p>Quidem accusamus dolores deleniti aliquid sint eum fugiat, blanditiis inventore, cum minima, dolorem eaque culpa. Quidem necessitatibus, ea laborum quibusdam officia saepe vitae, esse veniam. Temporibus quibusdam voluptate assumenda laboriosam?</p>
					<p>Sunt dolorum ullam unde ad ex doloribus sint laboriosam omnis accusamus totam! Vitae ipsa vero minima praesentium reprehenderit cupiditate nisi beatae, accusamus rem molestias quae magnam dolores libero assumenda. Architecto.</p>
					<p>Consequuntur deleniti est sapiente nesciunt quas, non aliquam praesentium quasi. Quis necessitatibus molestiae doloremque repellendus enim harum minima nisi nam. Incidunt, consectetur dolore vitae autem placeat ipsam nesciunt quasi, libero.</p>
					<p>Saepe porro obcaecati placeat aspernatur reprehenderit labore tempore et, perferendis pariatur culpa, quidem, fuga quasi voluptate? Eum debitis, dolores temporibus sunt cum voluptate vel nihil dolore autem aspernatur officia laboriosam.</p>
					<p>Tenetur, odit culpa. Recusandae iusto molestiae aperiam quos officiis sapiente explicabo quia, perferendis mollitia veritatis laboriosam voluptate, est dignissimos non repudiandae porro error beatae vitae dolorum eum eveniet molestias deserunt.</p>
				</div><!-- content -->
			</div><!-- home -->
    </div><!-- page -->
  </div><!-- wrapper -->
</div><!-- mainContainer -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/StevenVentimiglia/wip-responsive-sidebar-navigation-switch-eZvdyo */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  color: #333;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  background: #999;
  min-width: 320px;
  overflow-x: hidden;
}

p {
  margin: 20px 0;
}
p:first-child {
  margin-top: 0;
}

a:link, a:visited {
  color: #333;
  text-decoration: none;
}
a:hover, a:visited:hover {
  color: #000;
}

.group:before, .group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}

/*
========================================
Column Sizes
========================================
01 - 8.333333333333332%
02 - 16.666666666666664%
03 - 25%
04 - 33.33333333333333%
05 - 41.66666666666667%
06 - 50%
07 - 58.333333333333336%
08 - 66.66666666666666%
09 - 75%
10 - 83.33333333333334%
11 - 91.66666666666666%
12 - 100%
*/
nav {
  z-index: 9500;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  background: #ddd;
  overflow: hidden;
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -o-transition: 1s all;
  transition: 1s all;
}
nav .menu {
  z-index: 9250;
  position: absolute;
  width: 220px;
  top: 0;
  bottom: 0;
  overflow: auto;
  overflow-x: hidden;
}
nav .menu h3 {
  color: #fff;
  font-size: 1.65em;
  padding: 20px;
  margin: 0;
  background: #333;
}
nav .menu ul li {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
nav .menu ul li a {
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  transition: 0.5s all;
}
nav .menu ul li a:link, nav .menu ul li a:visited, nav .menu ul li a:hover, nav .menu ul li a:visited:hover {
  display: block;
  color: #666;
  font-size: 1.15em;
  line-height: 1em;
  padding: 20px;
}
nav .menu ul li a:hover, nav .menu ul li a:visited:hover {
  color: #333;
  background: #ccc;
}
nav .menu ul li a:before {
  content: "\2022";
  position: absolute;
  font-size: 2em;
}
nav .menu ul li a span {
  display: block;
  padding-left: 20px;
}

#mainContainer {
  padding: 0 0 80px;
}

.wrapper {
  width: 100%;
  max-width: 94%;
  margin: 0 auto;
}

.page {
  min-width: 320px;
  min-height: 500px;
  background: #fefefe;
  padding: 0;
  margin-left: 200px;
  overflow: hidden;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-top-left-radius: 0;
  -moz-border-top-right-radius: 0;
  -moz-border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -o-border-top-left-radius: 0;
  -o-border-top-right-radius: 0;
  -o-border-bottom-left-radius: 5px;
  -o-border-bottom-right-radius: 5px;
  -ms-border-top-left-radius: 0;
  -ms-border-top-right-radius: 0;
  -ms-border-bottom-left-radius: 5px;
  -ms-border-bottom-right-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=rgba($shadowColor, $shadowOpacity)";
  /*IE 8*/
  -moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
  /*FF 3.5+*/
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
  /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
  /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=rgba($shadowColor, $shadowOpacity));
  /*IE 5.5-7*/
}
.page h1 {
  font-size: 1.65em;
  border-bottom: 1px solid #999;
  padding: 0 0 20px;
  margin: 0 0 20px;
}

.content {
  padding: 20px;
}

.box {
  float: left;
  width: 48%;
  padding-top: 48%;
  margin: 1%;
  border: 1px dotted #ccc;
  background: #fff;
}

@media screen and (min-width: 768px) {
  .box {
    width: 24%;
    padding-top: 24%;
    margin: 0.5%;
  }
}
@media screen and (min-width: 1180px) {
  #mainContainer {
    padding: 40px 0 80px;
  }

  .wrapper {
    width: 980px;
  }

  nav {
    float: left;
    position: relative;
    margin: 0;
  }
  nav .menu {
    position: relative;
    width: 200px;
    overflow: auto;
  }

  .page {
    position: relative;
    margin: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
  }
  .page #home {
    width: 780px;
    float: right;
  }
}
.dontMove {
  display: block;
  position: fixed;
}

Comments