"stickydropdown"
Bootstrap 3.3.0 Snippet by sanjay84

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 class="header_top"></div>
<div class="menu">
<header class="container">
<div class="navbar navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="closepage" menuid="0" class="brand" href="#" followlink="true">
LOGO</a>
</div>
<div class="collapse navbar-collapse pull-right" id="main-menu">
<ul class="nav">
<li class="fadeInDown animated d1 "><a href="#" class="active" id="home" menuid="0" followlink="true" >Home</a></li>
<li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">About</a></li>
<li class="dropdown fadeInDown animated d3">
<a href="#" class="trigger right-caret">Service</a>
<ul class="firstlevel dropdown-menu sub-menu" style="display: none;">
<li class="twolevel">
<a class="trigger right-caret">Email Support</a>
<!-- <ul class="thirdlevel dropdown-menu sub-menu" style="margin-left: -563px; display: none;">
<li><a href="#" menuid="220" followlink="true">ŞİRKET BİRLEŞME & SATIN ALMA</a></li>
<li><a href="#" menuid="221" followlink="true">HALKA ARZ</a></li>
<li><a href="#" menuid="222" followlink="true">TAHVİL/BONO İHRACI</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.header_top{
width:100%;
height:10px;
background:#00e3ff;
}
.menu{
width:100%;
background:#fff;
box-shadow:0 3px 3px rgba(146,146,146,1.00);
}
.slider{
width:100%;
}
.navbar-inner {
margin-top: 0;
background: #fff;
box-shadow: none;
border: none;
height: 55px;
}
.navbar-inner .brand {
margin-top: 14px;
display: block;
}
.navbar .nav > li {
float: left;
height: 75px !important;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:active,
.navbar .nav > li > a:focus,
.navbar .nav > li > a.active,
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .active-menu {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
$("#main-menu").on("mouseenter", ".dropdown", function () {
$(this).find(".firstlevel").parent().addClass("active");
$(this).find(".firstlevel").show();
$(this).on("mouseleave", function () {
$(this).find(".firstlevel").hide();
$(this).find(".firstlevel").parent().removeClass("active");
});
});
$("#main-menu").on("mouseenter", ".twolevel", function () {
var ww = $(window).width();
var $menuItem = $(this).find(".thirdlevel");
var $firstLevel = $(".firstlevel");
var mw = $menuItem.width() + $firstLevel.offset().left + $firstLevel.width();
var marginLeft = 0 - ($menuItem.width() + $firstLevel.width());
if (ww < mw)
{
$menuItem.css("margin-left", marginLeft);
}
$menuItem.css("display", "block");
$(this).on("mouseleave", function () {
$(this).find(".thirdlevel").css("display", "none");
});
});
});
$(function () {
$(".dropdown-menu > li > a.trigger").on("click", function (e) {
var current = $(this).next();
var grandparent = $(this).parent().parent();
if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Pro

Questions / Comments: