具有固定位置的可滚动菜单

时间：2017-09-09 08:08:09

标签： jquery html css

是的，我知道，这个问题已被多次询问，我已阅读所有帖子。不幸的是，建议的解决方案不适用于我的情况。我有一个固定位置的顶部栏，当点击链接时会出现几个隐藏的菜单。菜单也是固定的。

如果这些菜单不适合窗口，我需要这些菜单是可以扫描的。同时，如果菜单打开，我想禁用主窗口的滚动和滚动。

在Jsfiddle示例中，Menu1不适合窗口，需要一个scroolbar。 Menu2适合窗口，不需要滚动条。

Jsfiddle

enter image description here 

$(document.body).on("click", "#menu1", function(e) {
  e.preventDefault();
  $("#bmen").css("display", "none");
  $("#amen").toggle();
});
$(document.body).on("click", "#menu2", function(e) {
  e.preventDefault();
  $("#amen").css("display", "none");
  $("#bmen").toggle();
});
body {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #333;
  font-size: 100%;
}

.menuwrap {
  width: 100%;
  position: fixed;
  background: black;
  z-index: 1000;
}

.menu {
  background: grey;
  color: white;
  padding: 10px;
  max-width: 400px;
  margin: 0;
  margin: 0 auto;
}

.table {
  display: table;
  table-layout: auto;
  table-layout: fixed;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.maincontainer {
  padding: 10px;
  max-width: 400px;
  background: #c0c0c0;
  margin-right: auto;
  margin-left: auto;
}

.menu-end {
  padding-top: 36px;
}

.hidden {
  background: grey;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#amen,
#bmen {
  margin: 0 auto;
  max-width: 420px;
  display: none;
}

.amen1,
.bmen1 {
  position: absolute;
  padding: 0 10px;
  top: 36px;
  background: #D3D3D3;
  max-width: 420px;
  width: 100%;
  box-sizing: border-box;
}

.righti {
  top: 36px;
  background: #CECECE;
  width: 100%;
  box-sizing: border-box;
}

.righti ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.righti li {
  border-bottom: 1px solid #dedede;
  float: left;
  width: 100%;
  font-weight: bold;
}

.righti li a {
  color: #000;
  text-decoration: none;
  font-size: 13px;
  float: left;
  display: block;
  padding: 10px 0;
  width: 100%;
}

.righti li a:hover {
  color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menuwrap">
  <div class="menu">
    <div class="table">
      <div class="table-row">
        <div class="table-cell">
          <a id="menu1" href="#">Menu1</a>
        </div>
        <div class="table-cell">
          <a id="menu2" href="#">Menu2</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="hidden">
  <div id="amen">
    <div class="amen1 righti">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li><a href="#">12</a></li>
        <li><a href="#">13</a></li>
        <li><a href="#">14</a></li>
        <li><a href="#">15</a></li>
        <li><a href="#">16</a></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">21</a></li>
        <li><a href="#">22</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">23</a></li>
        <li><a href="#">24</a></li>
        <li><a href="#">25</a></li>
        <li><a href="#">26</a></li>
        <li><a href="#">27</a></li>
        <li><a href="#">28</a></li>
        <li><a href="#">29</a></li>
        <li><a href="#">30</a></li>
        <li><a href="#">31</a></li>
        <li><a href="#">32</a></li>
        <li><a href="#">33</a></li>
        <li><a href="#">34</a></li>
        <li><a href="#">35</a></li>
      </ul>
    </div>
  </div>

  <div id="bmen">
    <div class="bmen1 righti">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>
  </div>


</div>



<div class="menu-end"></div>


<div class="maincontainer">
  Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>

1 个答案:

答案 0 :(得分：0)

由于你的代码让我疯了，我只想告诉你要走的路： 首先确保你的身体没有设置边距和填充，然后<div class="maincontainer"></div>内的 PLACE EVERY 菜单
然后用position: relative;或position: absolute;设置每个菜单CSS，它们与我的例子相同。

menu-container的CSS解释：
使用参数calc()来中心（水平）我使用transform: translate()的菜单容器（你可以使用50% - 400px/2，它会更动态），这意味着浏览器将此解释为＆＃34;将当前窗口宽度的元素50%向右移动，然后向左移动元素大小的一半（不动态，因为我们将宽度设置为{{1} }）＆＃34;
其余部分遵循相同的逻辑。

做一些研究并尝试真正理解这些答案（我很确定他们确实回答了你的问题），这是人们在学习开发时遇到的最常见问题之一网站。

＆＃13;
＆＃13; 
400px
＆＃13; 
body {
    margin: 0;
    padding: 0;
}
.menu-container {
    left: calc(50% - 400px / 2);
    max-height: calc(100% - 36px);
    max-width: 400px;
    overflow: auto;
    padding: 0;
    position: fixed;
    top: 36px;
}

.menuwrap {
    background: hsl(0, 0%, 0%) none repeat scroll 0 0;
    height: 36px;
    position: fixed;
    width: 100%;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题