Bootstrap Snippet full width dropdown toggle 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.open > .dropdown-menu,.nav> li:hover .dropdown-menu {
    display: inline-block;
    text-align: center;
}
.dropdown-menu > li{
    display: inline-block;
}
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    color: inherit;
    text-decoration: none;
    background-color: inherit;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    
    $('li.dropdown > a').each(function () {
        var scroll = $(this).offset().left;
        $(this).next('.dropdown-menu').css({
          'width': '100vw',
          'padding-top': '1em',
          'padding-bottom': '1em',
          'left': '-' + scroll + 'px'
        });
    });
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"full width dropdown toggle"
Bootstrap 3.0.0 Snippet by Arashi

Related: See More

Questions / Comments:

"full width dropdown toggle" Bootstrap 3.0.0 Snippet by Arashi

Related: See More

Questions / Comments:

"full width dropdown toggle"
Bootstrap 3.0.0 Snippet by Arashi