【如何使用CSS实现下拉响应式导航栏并且有滑动效果 _导航栏】

如何使用CSS实现下拉响应式导航栏并且有滑动效果

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

导航栏

详细描述

截图

代码

<nav>
    <div class="nav clearfix">
      <div class="nav-header">
        <div class="nav-logo">
          <img src="./resource/jnshu-logo.png">
        </div>
      </div>
      <div class="list-wrapper">
        <input type="checkbox" class="input-btn" id="nav-button" checked>
        <label class="nav-btn" for="nav-button">
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
        </label>
        <ul>
          <li class="home">
            <a href="">首页</a>
          </li>
          <li class="recommand">
            <a href="">推荐</a>
          </li>
          <li class="regarding">
            <a href="">关于</a>
          </li>
          <li class="help">
            <a href="">帮助</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

编辑于2024-11-24

时间排序

热门排序

[成都|荣耀师兄]JS-胡力耘
1

通过display属性设置为none，再通过一个label标签控制display属性的转换的确可以实现下拉列表的出现与消失。但是没有过渡的效果。

要实现过渡的效果，必须采用设置margin为负值的方法来隐藏下拉列表。

基本思路：

通过设置下拉列表框容器overflow为hidden，然后控制内部的ul的margin设置为负，那么ul可以在外部父元素的盒子内上下移动并且外部容器的高度也会跟随内部元素的位置进行变动。
再通过设置过渡属性transition就可以实现过渡效果。

代码如下：

.list-wrapper{
overflow: hidden;
}
input:checked ~ ul {
margin-top: -18rem;
}
ul {
transition: margin-top 1s ease;
}

查看全部>

编辑于2018-06-15

去第页