<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<div id="ftl_menu">
<h2>Free Time Learning</h2>
</div>
<div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>Tutorials </h2>
<ul>
<li>
<a href="#"><i class="fa fa-book"></i>Frontend</a>
<ul>
<li>
<a href="#"><i class="fa fa-book"></i>HTML</a>
<ul>
<li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/html/html-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>HTML5</a>
<ul>
<li><a href="http://www.freetimelearning.com/html5-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/html5/html5-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>CSS</a>
<ul>
<li><a href="http://www.freetimelearning.com/css-basic-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>CSS3</a>
<ul>
<li><a href="http://www.freetimelearning.com/css3-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/css3/css3-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>JavaScript</a>
<ul>
<li><a href="http://www.freetimelearning.com/javascript-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>jQuery</a>
<ul>
<li><a href="http://www.freetimelearning.com/jquery-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Bootstrap</a>
<ul>
<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>AngularJS</a>
<ul>
<li><a href="http://www.freetimelearning.com/angularjs-tutorial.php" target="_blank">Tutorial</a></li>
<li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php" target="_blank">Examples</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Backend</a>
<ul>
<li><a href="http://www.freetimelearning.com/java-tutorial.php" target="_blank">Java</a></li>
<li><a href="http://www.freetimelearning.com/php-tutorial.php" target="_blank">PHP</a> </li>
<li><a href="http://www.freetimelearning.com/python-tutorial.php" target="_blank">Python</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Examples</a>
<ul>
<li><a href="http://www.freetimelearning.com/html/html-examples.php" target="_blank">HTML Examples</a></li>
<li><a href="http://www.freetimelearning.com/html5/html5-examples.php" target="_blank">HTML5 Examples</a></li>
<li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php" target="_blank">CSS Examples</a></li>
<li><a href="http://www.freetimelearning.com/css3/css3-examples.php" target="_blank">CSS3 Examples</a></li>
<li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php" target="_blank">JavaScript Examples</a></li>
<li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php" target="_blank">jQuery Examples</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php" target="_blank">Bootstrap Examples</a></li>
<li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php" target="_blank">AngularJS Examples</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-gear"></i>Sample Menu</a>
<ul>
<li><a href="#"><i class="fa fa-gears"></i>Sample Menu</a>
<ul>
<li><a href="#"><i class="fa fa-check"></i>Sample Sub Menu</a>
<ul>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-check"></i>Sample Sub Menu</a>
<ul>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li> <a href="http://www.freetimelearning.com/contact-us.php" target="_blank">Contact Us</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-8/js/modernizr.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-8/js/jquery_menu.js"></script>body {
margin: 0;
padding: 0;
background:#F2F2F2;
}
#ftl_menu {
position: absolute;
padding:20px 0px;
font-weight:bold;
left: 300px;
color:#FC0;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.3em;
z-index: 1;
}
.ftl_push_menu {
position: absolute;
overflow: hidden;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.ftl_push_menu .levelHolderClass {
position: absolute;
overflow: hidden;
top: 0;
background:#FC0;
width: auto;
min-height: 100%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
zoom: 1;
}
.ftl_push_menu .ltr {
margin-left: -100%;
left: 0;
-moz-box-shadow: 5px 0 5px -5px #1f4164;
-webkit-box-shadow: 5px 0 5px -5px #1f4164;
box-shadow: 5px 0 5px -5px #1f4164;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2);
}
.ftl_push_menu .rtl {
margin-right: -100%;
right: 0;
-moz-box-shadow: 5px 0 5px 5px #1f4164;
-webkit-box-shadow: 5px 0 5px 5px #1f4164;
box-shadow: 5px 0 5px 5px #1f4164;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2);
}
.ftl_push_menu .multilevelpushmenu_inactive {
background: #FC0;
}
.ftl_push_menu h2 {
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
color: #1f4164;
padding: 0 .4em 0 .4em;
}
.ftl_push_menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.ftl_push_menu li {
cursor: pointer;
border-top: 1px solid #295685;
padding: .4em .4em .4em .4em;
}
.ftl_push_menu li:last-child {
border-bottom: 1px solid #295685;
}
.ftl_push_menu li:hover {
background-color:#DDBC00;
}
.ftl_push_menu a {
display: block;
outline: none;
overflow: hidden;
font-size: 1em;
line-height: 1em;
padding: .2em .2em;
text-decoration: none;
color: #fff;
}
.ftl_push_menu a:hover {
color: #ffe;
}
.ftl_push_menu .backItemClass {
display: block;
padding: .4em .4em .4em .4em;
background:#F90;
border-top: 1px solid #FC0;
}
.ftl_push_menu .floatRight {
float: right;
}
.ftl_push_menu .floatLeft {
float: left;
}
.ftl_push_menu .cursorPointer {
cursor: pointer;
}
.ftl_push_menu .iconSpacing_ltr {
padding: 0 .4em 0 0;
}
.ftl_push_menu .iconSpacing_rtl {
padding: 0 0 0 .4em;
}$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#ftl_menu' )]
});
});