<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<!-- Navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.freetimelearning.com/"><img src="images/Free-Time-Learning.png" alt="Free Time Learning"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Left nav -->
<ul class="nav navbar-nav">
<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">BOOTSTRAP</a></li>
<li><a href="http://www.freetimelearning.com/jquery-tutorial.php">JQUERY</a></li>
<li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">ANGULARJS</a></li>
<li><a href="http://www.freetimelearning.com/java-tutorial.php">JAVA</a></li>
<li><a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a></li>
<li><a href="http://www.freetimelearning.com/python-tutorial.php">PYTHON</a></li>
<li><a href="#">DROPDOWN <span class="caret"></span></a>
<ul class="dropdown-menu">
<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 Sub Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Sub Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
<li><a href="#">Menu item 7</a></li>
</ul>
</li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
</ul>
<!-- Right nav -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">DROPDOWN <span class="caret"></span></a>
<ul class="dropdown-menu">
<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 Sub Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li><a href="">My ACCOUNT <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">My Profile</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
<li><a href="http://www.freetimelearning.com/contact-us.php">CONTACT</a></li>
</ul>
</div>
</div>
</div>.navbar-nav:not(.sm-collapsible) ul .caret {
position: absolute;
right: 0;
margin-top: 6px;
margin-right: 15px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px dashed;
}
.navbar-nav:not(.sm-collapsible) ul a.has-submenu {
padding-right: 30px;
}
.navbar-brand{ padding:5px 15px !important;}
.navbar-nav.sm-collapsible .caret, .navbar-nav.sm-collapsible ul .caret {
position: absolute;
right: 0;
margin: -3px 15px 0 0;
padding: 0;
width: 32px;
height: 26px;
line-height: 24px;
text-align: center;
border-width: 1px;
border-style: solid;
}
.navbar-nav.sm-collapsible .caret:before {
content: '+';
font-family: monospace;
font-weight: bold;
}
.navbar-nav.sm-collapsible .open > a > .caret:before {
content: '-';
}
.navbar-nav.sm-collapsible a.has-submenu {
padding-right: 50px;
}
/* revert to Bootstrap's default carets in collapsible mode when the "data-sm-skip-collapsible-behavior" attribute is set to the ul.navbar-nav */
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret, .navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] ul .caret {
position: static;
margin: 0 0 0 2px;
padding: 0;
width: 0;
height: 0;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-bottom: 0;
border-left: 4px solid transparent;
}
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret:before {
content: '' !important;
}
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] a.has-submenu {
padding-right: 15px;
}
/* scrolling arrows for tall menus */
.navbar-nav span.scroll-up, .navbar-nav span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
height: 20px;
overflow: hidden;
text-align: center;
}
.navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-top: 7px dashed transparent;
border-right: 7px dashed transparent;
border-bottom: 7px solid;
border-left: 7px dashed transparent;
}
.navbar-nav span.scroll-down-arrow {
top: 6px;
border-top: 7px solid;
border-right: 7px dashed transparent;
border-bottom: 7px dashed transparent;
border-left: 7px dashed transparent;
}
/* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */
.navbar-nav.sm-collapsible ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul .dropdown-menu .dropdown-header {
padding-left: 35px;
}
.navbar-nav.sm-collapsible ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul .dropdown-menu .dropdown-header {
padding-left: 45px;
}
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu .dropdown-header {
padding-left: 55px;
}
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu .dropdown-header {
padding-left: 65px;
}
/* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */
.navbar-nav .dropdown-menu > li > a {
white-space: normal;
}
.navbar-nav ul.sm-nowrap > li > a {
white-space: nowrap;
}
.navbar-nav.sm-collapsible ul.sm-nowrap > li > a {
white-space: normal;
}
/* fix .navbar-right subs alignment */
.navbar-right ul.dropdown-menu {
left: 0;
right: auto;
}
.clearfix{ clear:both;}
.ftl{ font-size:16px; font-style:italic; padding:100px 0px; font-weight:bold; margin:0px auto; text-align:center;}
.ftl a{ color:#09C; text-decoration:none;}
.ftl a:hover{ color:#999;}/*** www.freetimelearning.com ***/
(function(t) {
"function" == typeof define && define.amd ? define(["jquery", "jquery.smartmenus"], t) : "object" == typeof module && "object" == typeof module.exports ? module.exports = t(require("jquery")) : t(jQuery)
})(function(t) {
return t.extend(t.SmartMenus.Bootstrap = {}, {
keydownFix: !1,
init: function() {
var e = t("ul.navbar-nav:not([data-sm-skip])");
e.each(function() {
function e() {
o.find("a.current").parent().addClass("active"), o.find("a.has-submenu").each(function() {
var e = t(this);
e.is('[data-toggle="dropdown"]') && e.dataSM("bs-data-toggle-dropdown", !0).removeAttr("data-toggle"), e.is('[role="button"]') && e.dataSM("bs-role-button", !0).removeAttr("role")
})
}
function s() {
o.find("a.current").parent().removeClass("active"), o.find("a.has-submenu").each(function() {
var e = t(this);
e.dataSM("bs-data-toggle-dropdown") && e.attr("data-toggle", "dropdown").removeDataSM("bs-data-toggle-dropdown"), e.dataSM("bs-role-button") && e.attr("role", "button").removeDataSM("bs-role-button")
})
}
function i(t) {
var e = a.getViewportWidth();
if (e != n || t) {
var s = o.find(".caret");
a.isCollapsible() ? (o.addClass("sm-collapsible"), o.is("[data-sm-skip-collapsible-behavior]") || s.addClass("navbar-toggle sub-arrow")) : (o.removeClass("sm-collapsible"), o.is("[data-sm-skip-collapsible-behavior]") || s.removeClass("navbar-toggle sub-arrow")), n = e
}
}
var o = t(this),
a = o.data("smartmenus");
if (!a) {
o.smartmenus({
subMenusSubOffsetX: 2,
subMenusSubOffsetY: -6,
subIndicators: !1,
collapsibleShowFunction: null,
collapsibleHideFunction: null,
rightToLeftSubMenus: o.hasClass("navbar-right"),
bottomToTopSubMenus: o.closest(".navbar").hasClass("navbar-fixed-bottom")
}).bind({
"show.smapi": function(e, s) {
var i = t(s),
o = i.dataSM("scroll-arrows");
o && o.css("background-color", t(document.body).css("background-color")), i.parent().addClass("open")
},
"hide.smapi": function(e, s) {
t(s).parent().removeClass("open")
}
}), e(), a = o.data("smartmenus"), a.isCollapsible = function() {
return !/^(left|right)$/.test(this.$firstLink.parent().css("float"))
}, a.refresh = function() {
t.SmartMenus.prototype.refresh.call(this), e(), i(!0)
}, a.destroy = function(e) {
s(), t.SmartMenus.prototype.destroy.call(this, e)
}, o.is("[data-sm-skip-collapsible-behavior]") && o.bind({
"click.smapi": function(e, s) {
if (a.isCollapsible()) {
var i = t(s),
o = i.parent().dataSM("sub");
if (o && o.dataSM("shown-before") && o.is(":visible")) return a.itemActivate(i), a.menuHide(o), !1
}
}
});
var n;
i(), t(window).bind("resize.smartmenus" + a.rootId, i)
}
}), e.length && !t.SmartMenus.Bootstrap.keydownFix && (t(document).off("keydown.bs.dropdown.data-api", ".dropdown-menu"), t.fn.dropdown && t.fn.dropdown.Constructor && t(document).on("keydown.bs.dropdown.data-api", '.dropdown-menu:not([id^="sm-"])', t.fn.dropdown.Constructor.prototype.keydown), t.SmartMenus.Bootstrap.keydownFix = !0)
}
}), t(t.SmartMenus.Bootstrap.init), t
});