如何滚动移动设备中粘性和固定菜单的子菜单

时间：2016-03-29 10:19:28

标签： android jquery html css css3

我为移动设备制作了一个粘性菜单。一切都还可以，但是关于从视口中溢出的子菜单存在问题，并且在滚动时，只是文档主体滚动并且菜单的隐藏部分保持在视口之外。我使用overflow:scroll作为容器，但我无法修复它。 

section {
  height:200px;
  width:100%;
  margin:0;
  padding:0;
}
.p1 {background:#656161}
.p2 {background:#87E857}
.p3 {background:#E28EBC}
.p4 {background:#DBDE46}
.p5 {background:#57BCEF}
.p6 {background:#ff0000}
ul {
  list-style:none;
  margin:0;
  padding:0;
}
nav {
  position:fixed;
  top:0;
  left:0;
  background:#73CADB;
  width:100%;
  height:38px;
}

nav ul > li {
  float:left;
  width:150px;
  position:relative;
  padding:10px;
  background: #73CADB;
  border-right:1px solid #fff;
  -webkit-transition:all .3s ease;
  transition:all .3s ease;
}
nav ul > li i{
  position:absolute;
  right:20px;
}
nav ul > li:hover,
nav ul > li.hovered{
  background: #E6A735;
}

nav ul > li a{
  text-decoration:none;
  color:#fff;
}
nav ul > li > ul{
  position:absolute;
  width:70%;
  top:38px;
  left:0px;
}
nav ul > li > ul li{
  display:block;
}
<body>
  <nav>
    <ul>
      <li><a href="#">link</a></li>
      <li class="hovered"><a href="#">link <i class="fa fa-caret-down"></i></a>
        <ul>
          <li><a href="#">sublink1</a></li>
          <li><a href="#">sublink2</a></li>
          <li><a href="#">sublink3</a></li>
          <li><a href="#">sublink4</a></li>
          <li><a href="#">sublink5</a></li>
          <li><a href="#">sublink6</a></li>
          <li><a href="#">sublink7</a></li>
          <li><a href="#">sublink8</a></li>
          <li><a href="#">sublink9</a></li>
          <li><a href="#">sublink10</a></li>
          <li><a href="#">sublink11</a></li>
          <li><a href="#">sublink12</a></li>
          <li><a href="#">sublink13</a></li>
          <li><a href="#">sublink14</a></li>
          <li><a href="#">sublink15</a></li>
          <li><a href="#">sublink16</a></li>
          <li><a href="#">sublink17</a></li>
          <li><a href="#">sublink18</a></li>
          <li><a href="#">sublink19</a></li>
          <li><a href="#">sublink20</a></li>
          <li><a href="#">sublink21</a></li>
          <li><a href="#">sublink22</a></li>
          <li><a href="#">sublink23</a></li>
          <li><a href="#">sublink24</a></li>
          <li><a href="#">sublink25</a></li>
          <li><a href="#">sublink26</a></li>
          <li><a href="#">sublink27</a></li>
          <li><a href="#">sublink28</a></li>
          <li><a href="#">sublink29</a></li>
          <li><a href="#">sublink30</a></li>
          <li><a href="#">sublink31</a></li>
          <li><a href="#">sublink32</a></li>
          <li><a href="#">sublink33</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <section class="p1"></section>
  <section class="p2"></section>
  <section class="p3"></section>
  <section class="p4"></section>
  <section class="p5"></section>
  <section class="p6"></section>
</body>

这是小提琴：

https://jsfiddle.net/3ewatm9d/3/

1 个答案:

答案 0 :(得分：1)

向元素添加一些max-height，以便它可以达到溢出限制。 

nav ul > li > ul{
  position:absolute;
  width:70%;
  top:38px;
  left:0px;
  max-height: 200px;
  overflow:auto;
  width:auto;
}


section {
  height:200px;
  width:100%;
  margin:0;
  padding:0;
}
.p1 {background:#656161}
.p2 {background:#87E857}
.p3 {background:#E28EBC}
.p4 {background:#DBDE46}
.p5 {background:#57BCEF}
.p6 {background:#ff0000}
ul {
  list-style:none;
  margin:0;
  padding:0;
}
nav {
  position:fixed;
  top:0;
  left:0;
  background:#73CADB;
  width:100%;
  height:38px;
}

nav ul > li {
  float:left;
  width:150px;
  position:relative;
  padding:10px;
  background: #73CADB;
  border-right:1px solid #fff;
  -webkit-transition:all .3s ease;
  transition:all .3s ease;
}
nav ul > li i{
  position:absolute;
  right:20px;
}
nav ul > li:hover,
nav ul > li.hovered{
  background: #E6A735;
}

nav ul > li a{
  text-decoration:none;
  color:#fff;
}
nav ul > li > ul{
  position:absolute;
  width:70%;
  top:38px;
  left:0px;
  max-height: 150px;
  overflow:auto;
  width:auto;
}
nav ul > li > ul li{
  display:block;
}
<body>
  <nav>
    <ul>
      <li><a href="#">link</a></li>
      <li class="hovered"><a href="#">link <i class="fa fa-caret-down"></i></a>
        <ul>
          <li><a href="#">sublink1</a></li>
          <li><a href="#">sublink2</a></li>
          <li><a href="#">sublink3</a></li>
          <li><a href="#">sublink4</a></li>
          <li><a href="#">sublink5</a></li>
          <li><a href="#">sublink6</a></li>
          <li><a href="#">sublink7</a></li>
          <li><a href="#">sublink8</a></li>
          <li><a href="#">sublink9</a></li>
          <li><a href="#">sublink10</a></li>
          <li><a href="#">sublink11</a></li>
          <li><a href="#">sublink12</a></li>
          <li><a href="#">sublink13</a></li>
          <li><a href="#">sublink14</a></li>
          <li><a href="#">sublink15</a></li>
          <li><a href="#">sublink16</a></li>
          <li><a href="#">sublink17</a></li>
          <li><a href="#">sublink18</a></li>
          <li><a href="#">sublink19</a></li>
          <li><a href="#">sublink20</a></li>
          <li><a href="#">sublink21</a></li>
          <li><a href="#">sublink22</a></li>
          <li><a href="#">sublink23</a></li>
          <li><a href="#">sublink24</a></li>
          <li><a href="#">sublink25</a></li>
          <li><a href="#">sublink26</a></li>
          <li><a href="#">sublink27</a></li>
          <li><a href="#">sublink28</a></li>
          <li><a href="#">sublink29</a></li>
          <li><a href="#">sublink30</a></li>
          <li><a href="#">sublink31</a></li>
          <li><a href="#">sublink32</a></li>
          <li><a href="#">sublink33</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <section class="p1"></section>
  <section class="p2"></section>
  <section class="p3"></section>
  <section class="p4"></section>
  <section class="p5"></section>
  <section class="p6"></section>
</body>

相关问题
最新问题