jQuery Plugin Sidr

index.html

<!-- You need to follow the template of plugin to create html code -->

<!-- The link to show/hide slideout menu -->
<!-- Note href point to the actual slideout menu -->
<header>
<nav>
<ul class="main_menu">
  <li class="logo"><a href="#">Aranca</a></li>
  <li class="sidr__menu"><a id="simple-menu" href="#sidr"><i class="fa fa-bars"></i></a></li>
  <li class="home"><a href="#"><i class="fa fa-home"></i></a></li>
  <li class="contact"><a href="#"><i class="fa fa-envelope"></i></a></li>
    <li class="linkedin hidden-xs"><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li class="twitter hidden-xs"><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li class="fb hidden-xs"><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</nav>
</header>
<div class="clearfix">
</div>
 
<!-- The slideout menu itself -->
<div id="sidr">
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde non, distinctio aspernatur vel minima. Numquam sit alias harum a saepe odit cupiditate molestias aperiam cumque. Dolore enim, debitis. Quasi, amet.</p>
</div>
 
<!-- Load jQuery library first -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>

<!-- Load plugin library. You can Google plugin and usually you can find library on internet at http://www.jsdelivr.com/ or https://cdnjs.com/ or https://developers.google.com/speed/libraries/  -->
<script src="https://cdn.jsdelivr.net/jquery.sidr/1.2.1/jquery.sidr.js"></script>

jQuery Plugin Sidr.markdown

jQuery Plugin Sidr

Forked from Fei Luo's Pen jQuery Plugin Sidr.

A Pen by Amit Erandole on CodePen.

License.

script.js

// activate sidr plugin, note the id selector
$('#simple-menu').sidr({
  side: 'right'
});

style.css

/* Load sidr CSS file */
@import url("https://cdn.jsdelivr.net/jquery.sidr/1.2.1/stylesheets/jquery.sidr.dark.css");

.main_menu {
  position: fixed;
  width: 100%;
  min-height: 40px;
  background: brown;
}

.main_menu li {
  float: right;
  list-style: none;
  padding: 0 10px;
  line-height: 40px;
}

.main_menu .logo {
  float: left;
}

.main_menu li a {
  color: white;
}

.content {
  padding-top: 50px;;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />