html – 如何在bootstrap中添加汉堡菜单

我需要一些帮助bootstrap导航。我想通过手机上的汉堡包图标切换。

这里是代码:http://codepen.io/sadman/pen/hfGwv

HTML代码:

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    </div>
</nav>

我的自定义CSS:

.navbar, .navbar-inverse {
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    min-height: 80px;
}

.nav li {
    display: inline;
    color: white;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
    font-family: Lato;
    font-size: 1.7em;
    font-weight: 300;
    padding: 30px 25px 33px 25px;
}

.navbar-inverse .navbar-nav li a:hover {
    background-color: #444444;
    transition: 0.7s all linear;
    height: 100%;
}
所有你需要做的是阅读getbootstrap.com上的代码:

Codepen

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
http://stackoverflow.com/questions/26317679/how-to-add-hamburger-menu-in-bootstrap

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 如何在bootstrap中添加汉堡菜单