位置粘滞，子菜单不滚动

时间：2017-10-30 13:59:52

标签： html css twitter-bootstrap twitter-bootstrap-4

我正在使用bootstrap v-4 beta2，我想用子菜单创建粘性顶级菜单。一切都在桌面上工作，但是当我在手机上点击打开子菜单时，我看不到整个子菜单，当我滚动整个网站而不是菜单时。我发现我必须用li.dropdown做一些事情 - 当我添加位置绝对时它有点乱，但我看到了菜单。但我不能得到我应该做的。这是代码：

＆＃13;
＆＃13; 
li.dropdown:hover>.dropdown-menu {
  display: block;
}

li.dropdown {
  position: static;
}

.multi-columns {
  width: 100%;
}
＆＃13; 
<div class="nav-wrapper sticky-top">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light text-uppercase">
      <a class="navbar-brand" href="/"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Blog</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="eshop.html">E-shop</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu multi-columns">
              <div class="row">
                <div class="col-md-3">
                  <h3 class="h5">Blog</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-md-3">
                  <h3 class="h5">Blog 2</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-md-3">
                  <h3 class="h5">Blog 3</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-md-3">
                  <h3 class="h5">Blog 4</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <form action="" class="form-inline">
          <select class="select2 form-control" style="width: 100%;">
    
              </select>
        </form>
      </div>
    </nav>
    <!-- /.nav -->
  </div>
  <!-- /.container -->
</div>
<!-- /.nav-wrapper -->
＆＃13;
＆＃13;
＆＃13;

当我在桌面上时，我将鼠标悬停在＆＃34;下拉＆＃34;它会显示但是当我将鼠标放在子菜单上时它会消失。我应该使用margin-top移动子菜单：-10px或smh吗？或者有任何解决方案吗？

修改

主要的是子菜单大于视口，然后我就不能滚动

了

3 个答案:

答案 0 :(得分：1)

请参阅以下解决方案：

https://jsfiddle.net/ard5rg6f/1/

当菜单打开时，我使用了几行jQuery将class添加到sticky div。

$(document).ready(function() {
            $('#navbarNav').on('shown.bs.collapse', function () {
                $('.nav-wrapper.sticky-top').addClass('menu-opened');
            });
            $('#navbarNav').on('hidden.bs.collapse', function () {
                $('.nav-wrapper.sticky-top').removeClass('menu-opened');
            });
        });

并删除了下拉菜单的位置绝对属性，并添加了滚动到粘性div。

.nav-wrapper.sticky-top {
            position: fixed;
        }
        .nav-wrapper.sticky-top.menu-opened {
            overflow: scroll;
            height: 100vh;
        }
        .dropdown-menu {
            display: block;
            position: inherit;
        }

答案 1 :(得分：1)

如果您需要子菜单想要在内容中滚动，那么您需要指定max-height和overflow: scroll;。

您还需要在col-md-3部门内将col-lg-3更改为dropdown-menu multi-columns。

<强> CSS 

@media (max-width: 991px){
.multi-columns{
  max-height: 300px;
  overflow: auto;
     }
  }

Demo Snippet： 

li.dropdown:hover>.dropdown-menu {
  display: block;
}

li.dropdown {
  position: static;
}

.multi-columns {
  width: 100%;
}
@media (max-width: 991px){
.multi-columns{
  max-height: 300px;
  overflow: auto;
     }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<div class="nav-wrapper sticky-top">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light text-uppercase">
      <a class="navbar-brand" href="/"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Blog</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="eshop.html">E-shop</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu multi-columns">
              <div class="row">
                <div class="col-lg-3">
                  <h3 class="h5">Blog</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-lg-3">
                  <h3 class="h5">Blog 2</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-lg-3">
                  <h3 class="h5">Blog 3</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-lg-3">
                  <h3 class="h5">Blog 4</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <form action="" class="form-inline">
          <select class="select2 form-control" style="width: 100%;">
    
              </select>
        </form>
      </div>
    </nav>
    <!-- /.nav -->
  </div>
  <!-- /.container -->
</div>
<!-- /.nav-wrapper -->

希望这可以帮到你。 Codepen demo link. 感谢。

答案 2 :(得分：0)

如果您想要导航汉堡按钮“坚持”在滚动时在网站上，您需要将其定位为固定。

编辑：我忘记了子菜单，但是在启用移动模式的chrome devtools中，这很好用。单击子菜单会打开菜单，然后再次单击它，将其关闭。

＆＃13;
＆＃13; 
li.dropdown:hover>.dropdown-menu {
  display: block;
}

li.dropdown {
  position: static;
}

.multi-columns {
  width: 100%;
}

.body {
  height: 1000px;
}

.nav-wrapper.sticky-top {
  position: fixed;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="body">
  <div class="container">
    <div class="nav-wrapper sticky-top">
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light text-uppercase">
          <a class="navbar-brand" href="/"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="blog.html">Blog</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="eshop.html">E-shop</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu multi-columns">
                  <div class="row">
                    <div class="col-md-3">
                      <h3 class="h5">Blog</h3>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                    <div class="col-md-3">
                      <h3 class="h5">Blog 2</h3>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                    <div class="col-md-3">
                      <h3 class="h5">Blog 3</h3>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                    <div class="col-md-3">
                      <h3 class="h5">Blog 4</h3>
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <form action="" class="form-inline">
              <select class="select2 form-control" style="width: 100%;">

          </select>
            </form>
          </div>
        </nav>
        <!-- /.nav -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.nav-wrapper -->
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题