Question

您好我有一个问题，我需要一些指导/帮助来创建菜单，如果屏幕太小而无法显示原始菜单，则该菜单将替换为按钮。我知道Bootstrap会为你做这个，但是由于实现限制，我无法使用该库。因此，我查看了Bootstrap的功能，我试图模仿，但我仍然需要一些帮助来最终确定它。

我有以下HTML代码：

<div class="navbar navbar-default main-nav">
    <div class="container">
        <div class="navbar-header" tabindex="-1">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-nav" aria-expanded="false">
              <span class="sr-only">Mobile navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" tabindex="-1">
            <div class="nav navbar-nav" tabindex="-1">
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="home_button not_active" href="#"></a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">My data</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a href="#">Menu 1</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">Submenu1</a>
                        <a href="#">Submenu2</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="active" href="#">Menu 2</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">submenu1</a>
                        <a href="#">submenu2</a>
                    </div>
                </div>
                <a href="#">FAQ</a>
                <a href="#">Contact</a>
                <a href="#">Logout</a></div>
        </div>
    </div>
</div>

可在此处看到：JSFIDDLE。现在，无论何时调整屏幕大小，都会出现一个按钮，无论何时单击它，菜单都是垂直创建的而不是水平创建的。

这很完美，但是当我将屏幕调整为大屏幕尺寸（我使用媒体查询）时我需要做什么，我想将当前的垂直实现重置为原始的水平实现。

正如我之前所说，我使用媒体查询来显示/隐藏按钮：

/* Media Queries */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
    .navbar {
        border-radius: 0;
    }
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-header {
        float: left;
    }
    .navbar-toggle {
        display: none;
    }
    .container>.navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

}

Answer 1

首先，这是创建菜单的一种可怕方式。

但这是一个修复，为max-width:

添加另一个@media查询

@media (max-width:768px) {
.show-menu .navbar-nav a, .show-menu .menuitem_wrapper {
  width:100%;
}
  .show-menu {
        display: block !important;
}
}

编辑：同时将addClass更改为toggleClass -

$(".navbar-collapse").toggleClass('show-menu');

模拟引导程序菜单功能

1 个答案: