Question

我是Stackoverflow和Bootstrap的新手。我希望我以正确的方式提出这个问题。

我想要实现的是一个移动应用程序，如左侧带有汉堡包的导航菜单和右侧的下拉菜单，类似于带有三个点的Android应用程序，显示其他菜单选项，如顶部固定导航栏上的设置

通过使用jasny bootstrap offcanvas，我能够正确地实现汉堡包。这也有一些问题，它不会在大屏幕上显示顶部栏。我得到了正确的设置菜单，但它没有崩溃，顶部栏不是静态的。这是我到现在为止的代码。应用样式菜单

</head>
<body>
    <nav class="navmenu navmenu-default navmenu-fixed-left offcanvas">
        <a class="navmenu-brand" href="#">App Style Menu</a>
        <ul class="nav navmenu-nav">
            <li class="active"><a href="#">About</a></li>
        </ul>
        <ul class="nav navmenu-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Flow Properties<b class="caret"></b></a>
                <ul class="dropdown-menu navmenu-nav">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                </ul>
            </li>
        </ul>

        <ul class="nav navmenu-nav">
            <li><a href="#">Item 4</a></li>
        </ul>
    </nav>

    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">App Nav</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="#">settings</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jasny-bootstrap.min.js"></script>
</body>
</html>

请帮我解决这个问题

左边是汉堡包的自助导航，右边是下拉菜单

0 个答案: