"Bootstrap dropdown sub menu"
Bootstrap 3.2.0 Snippet by betdream

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="//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 ---------->
<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="#Anasayfa" class="active" id="home" menuid="0" followlink="true" >ANA SAYFA</a></li>
<li class="fadeInDown animated d2"><a href="#Hakkimizda" menuid="1" followlink="true">HAKKIMIZDA</a></li>
<li class="dropdown fadeInDown animated d3">
<a href="#" class="trigger right-caret">HİZMETLERİMİZ</a>
<ul class="firstlevel dropdown-menu sub-menu" style="display: none;">
<li class="twolevel">
<a class="trigger right-caret">KURUMSAL FİNANSMAN</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>
<li><a href="#" menuid="223" followlink="true">DANIŞMANLIK</a></li>
</ul>
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
body{background:#686464}
.brand{font-size:34px; color:#aaa3a3 !important; padding-left:15px;}
/* Navbar */
.navbar-inner {
margin-top: -1px;
background: #fff;
box-shadow: none;
border: none;
height: 75px;
}
.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 {
background: #a1a1a1 !important;
color: #fff !important;
}
.navbar .nav > li > a {
color: #aaa3a3 !important;
float: none;
height: 100%;
line-height: 70px;
padding: 0 15px;
text-decoration: none;
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


Questions / Comments: