<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="side-menu" class="move-me" >
<div id="inner"> <hr class="hr-set" />
<span class="logo-text" >COMPANY NAME </span> <i class="menu-close-icon glyphicon glyphicon-align-justify"></i>
<hr class="hr-set-two" />
<ul>
<li>
<a href="#" > <i class="menu-close-icon glyphicon glyphicon-home"></i> Home</a>
</li>
<li>
<a href="#" > <i class="menu-close-icon glyphicon glyphicon-th"></i> Features</a>
</li>
<li>
<a href="#" > <i class="menu-close-icon glyphicon glyphicon-time"></i> Pricing</a>
</li>
<li>
<a href="#sekcija" ><i class="menu-close-icon glyphicon glyphicon-align-justify"></i> Pricing</a>
</li>
<li>
<a href="#" > <i class="menu-close-icon glyphicon glyphicon-map-marker"></i> Contact</a>
</li>
</ul>
</div>
</div>
<!-- SIDE MENU SECTION END-->
<div class="container">
<div class="row">
<div class="col-md-6">
<h1> <strong> <i class="menu-open-icon glyphicon glyphicon-align-justify"></i> </strong></h1>
</div>
<div class="col-md-6" >
<p id="#sekcija1" class=" p-set">Please Click on the <strong> side menu icon </strong>to see the effect of dropping menu
Hope you will enjoy this snipppet, for more go to
<a href="#sekcija" style="text-decoration:none;color:#000">HTMLAdmin.com </a> <br>
Special Thanks to Bootsnipp
</p>
</div>
<div class="row">
<div class="col-md-6" >
<p id="#sekcija3" class=" p-set">Please Click on the <strong> side menu icon </strong>to see the effect of dropping menu
Hope you will enjoy this snipppet, for more go to
<a href="http://htmladmin.com/" target="_blank" style="text-decoration:none;color:#000">HTMLAdmin.com </a> <br>
Special Thanks to Bootsnipp
</p>
</div>
<div class="col-md-6" >
<p id="#sekcija2" class=" p-set">Please Click on the <strong> side menu icon </strong>to see the effect of dropping menu
Hope you will enjoy this snipppet, for more go to
<a href="http://htmladmin.com/" target="_blank" style="text-decoration:none;color:#000">HTMLAdmin.com </a> <br>
Special Thanks to Bootsnipp
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" >
<p id="#sekcija33" class=" p-set">Please Click on the <strong> side menu icon </strong>to see the effect of dropping menu
Hope you will enjoy this snipppet, for more go to
<a href="http://htmladmin.com/" target="_blank" style="text-decoration:none;color:#000">HTMLAdmin.com </a> <br>
Special Thanks to Bootsnipp
</p>
</div>
<div class="col-md-6" >
<p id="#sekcija" class=" p-set">Please Click on the <strong> side menu icon </strong>to see the effect of dropping menu
Hope you will enjoy this snipppet, for more go to
<a href="http://htmladmin.com/" target="_blank" style="text-decoration:none;color:#000">HTMLAdmin.com </a> <br>
Special Thanks to Bootsnipp
</p>
</div>
</div>
</div>
</div>
/* =============================================================
GENERAL STYLES
============================================================ */
body {
background-color:#1DA69C;
}
.p-set
{
padding-top:120px;
line-height:30px;
color:#fff;
font-size:16px;
}
.hr-set {
border-top:1px solid rgba(0, 0, 0, 0)!important;
margin-bottom:20px;
}
.hr-set-two {
border-top:1px solid rgba(0, 0, 0, 0.05)!important;
margin-bottom:5px;
}
/* =============================================================
SIDE MENU STYLES
============================================================ */
#side-menu {
height:100%;
position:fixed;
top:-100%;
background-color:rgba(255,0,255,0.8);
color:#fff;
z-index:999;
overflow:auto;
max-width:100%;
width:100%;
padding:10%;
text-align:center;
}
#inner{
background-color:#178dcd;
}
#side-menu ul {
list-style:none;
padding:0px;
}
#side-menu ul li {
border-bottom:1px solid rgba(95, 87, 88, 0.2);
padding: 20px 25px;
display:inline-block;
}
#side-menu ul li a i {
padding-right:10px;
}
#side-menu ul li a,#side-menu ul li a:hover {
color:#fff;
text-decoration:none;
font-size: 16px;
}
.logo-text {
padding: 20px 30px;
cursor: pointer;
font-size:20px;
font-weight:900;
}
.menu-close-icon {
padding:0px 10px;
cursor: pointer;
color:#000;
font-size:25px;
}
.menu-open-icon {
cursor:pointer;
color:#fff;
padding:20px 30px;
padding:20px 25px;
position:fixed;
}
.intro-txt {
padding:20px;
}
//SIDE MENU SCRIPTS
$(document).ready(function () {
$('.menu-close-icon').click(function (e) {
$('#side-menu').animate({ opacity: '0' });
$('#side-menu').animate({ top: '-100%' });
});
$('.menu-open-icon').click(function (e) {
e.preventDefault();
$('#side-menu').animate({ left: '0px', top: '0px' });
$('#side-menu').animate({ opacity: '1' });
});
});
