Question

我有一个＆＃34;标准＆＃34;导航菜单，在悬停时显示其下的子菜单，如https://jsfiddle.net/z6vur05u/

而不是菜单下的下拉菜单，我需要在向下移动导航的同时从页面顶部推送子菜单。最近的例子就是http://callmenick.com/_development/slide-push-menus/（最佳效果），但我根本无法让它发挥作用..

代码非常简单，清洁版本在这里：

<div id="menu-wrapper">

  <ul class="nav">
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Parent</a></li>
  </ul>

</div>

如果有人可以提供帮助，那就意味着很多！我玩绝对/相对定位，但我没有走远，所以任何帮助将不胜感激！

Answer 1

好的，我添加了几行CSS，结果可以看到here。

<强> CSS

.nav > li > div {
    [..]
    height: 0; /*added a height*/
    [..]
    top: 0px; /*changed this from 50 to 0*/
    [..]
}

.nav > li { /*completely new selector, but probably already available somewhere*/
    margin-top: 0; /*since the menu has to start at the top*/
    transition: margin-top .3s ease .15s;/*same animation as the rest, but only margin-top*/
}

.nav:hover > li { /*completely new selector, but probably already available somewhere*/
    margin-top: 250px;/*same height as the menu*/

}

.nav > li:hover > div {
    [..]
    height: 250px; /*so it animates from 0 to 250px*/
}

有了这个，你就有了一个良好的开端。你只需添加一些jQuery或JS来检查菜单点是否有子菜单。如果是，请添加悬停内容，如果不是，则不添加。现在它会对每个菜单点的悬停产生影响。

Answer 2

这是小提琴：JSBIN

添加jquery
从position:relative类

.nav

将position:relative改为班级position:absolute的{{1}}
将以下类与属性一起添加到css

.nav > li > div

4.在你的html文件中添加这段Jquery

.hovered {
margin-top:215px;
transition: all 1s;
}

从顶部而不是下拉列表展开子菜单

2 个答案: