Bootstrap Snippet myimpact 2-level menu using HTML CSS Javascript

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="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="/Default.aspx">Home</a>
                        </li>
                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#">
                                Data Amendment
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-submenu">
                                    <a>Publications Management</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/FilterPublications.aspx">Manage Bib and Full Text Data</a>
                                        </li>
                                        <li>
                                            <a href="/Publications/OpenAccessList">Manage Publications Open Access</a>
                                        </li>
                                        <li>
                                            <a href="/WOSQuery.aspx">Edit WoS Query</a>
                                        </li>
                                        <li>
                                            <a href="/OverrideLibraryPublicationsLock.aspx">Override Library Publications Lock</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="/DataAmendmentRequests/ManageResearchDataAmendmentRequests.aspx">Research Projects</a>
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
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
  log('click');
});
function log(msg) {
  $('#logger').add('<p>'+msg+'</p>');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"myimpact 2-level menu"
Bootstrap 3.3.0 Snippet by rogersillito

Related: See More

Questions / Comments:

"myimpact 2-level menu" Bootstrap 3.3.0 Snippet by rogersillito

Related: See More

Questions / Comments:

"myimpact 2-level menu"
Bootstrap 3.3.0 Snippet by rogersillito