Bootstrap Snippet Bootstrap dropdown sub menu using HTML CSS jQuery

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

"Bootstrap dropdown sub menu"
Bootstrap 3.2.0 Snippet by betdream

Related: See More

Questions / Comments:

"Bootstrap dropdown sub menu" Bootstrap 3.2.0 Snippet by betdream

Related: See More

Questions / Comments:

"Bootstrap dropdown sub menu"
Bootstrap 3.2.0 Snippet by betdream