css实现二级菜单

Jaden 发布于2019-08-30 11:23 / 3545人阅读

摘要：不多废话，先上预览这一次还是使用的选中与否来实现展开收起二级菜单的。另外怎么上次图大佬告诉我一下吧。

不多废话，先上预览
https://codepen.io/Ritr/pen/W...
这一次还是使用的选中与否来实现展开、收起二级菜单的。

第一步：初始化

默认二级菜单的li高度为0

选择一级菜单时，将二级菜单高度设置为20px

这样设置是为了方便我们以后添加动画效果

html

css

/* 初始化 */
*{
  margin:0;
  padding:0
}
.container{
  width:500px;
  margin:0 auto;
  text-align:center;
}
.menu{
  width:200px;
  display:inline-block;
}
li{
  list-style:none;
  cursor:pointer;
  text-align:left;
  text-indent:5px;
}
.main-menu{
  background:#0099CC;
  margin:1px 0;
}
.sub-menu{
  background:#00CCFF;
  margin:1px 0;
  overflow:hidden;
  height:0;
}
.sub-menu.checked{
  height:20px;
}

效果图

第二步：选中checkbox时展开二级菜单，取消选择时收起二级菜单

划重点--注意label和input之间的位置
html

css

/* 第二步 */
.ck:checked + .sub-menu-container .sub-menu{
  height:20px;
}

效果图

看起来跟第一步没什么变化

第三步优化

将label设置成和一级菜单同样大小，隐藏checkbox，添加动画
html

css

.menu-label{
  display:inline-block;
  width:100%;
  cursor:pointer;
}


/* 隐藏checkbox */
.ck-finished{
  display:none;
}
.ck-finished:checked + .sub-menu-container .sub-menu-finished{
  height:20px;
}
.sub-menu-finished{
  background:#00CCFF;
  margin:1px 0;
  overflow:hidden;
  height:0;
  transition:all 0.4s;/* 添加动画 */
}

效果图

哈哈，变化不大。还是需要你点击预览一下的。
另外怎么上次gif图？大佬告诉我一下吧。

云服务器 GPU云服务器二级菜单 div+css导航菜单二级导航菜单二级联动菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114961.html

CSS学习笔记(九) 界面组件之导航菜单

摘要：为了让包围列表项，没有使用，而是使用了，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示它们最终会显示在父元素的外面，结果会导致溢出而被隐藏。它与父元素之间的间隙，实际上下拉菜单中第一个链接的边框。菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表（li）是块级元素...

pingink 2019-08-28 18:03 评论0 收藏0
前端入门教程——纯css制作二级菜单

摘要：首先，需要声明的是本教程是写给初级者参考的，如果您已经有一定的基础请直接忽略吧二级菜单是网站开发中很常见的功能模块，但是对于初级者来说却还是有些困难，下面我就拿几个常见的案例来讲好了。首先，需要声明的是本教程是写给初级者参考的，如果您已经有一定的基础请直接忽略吧二级菜单是网站开发中很常见的功能模块，但是对于初级者来说却还是有些困难，下面我就拿几个常见的案例来讲好了。鼠标滑过显示显...

freecode 2019-08-29 12:18 评论0 收藏0
前端入门教程——纯css制作二级菜单

摘要：首先，需要声明的是本教程是写给初级者参考的，如果您已经有一定的基础请直接忽略吧二级菜单是网站开发中很常见的功能模块，但是对于初级者来说却还是有些困难，下面我就拿几个常见的案例来讲好了。首先，需要声明的是本教程是写给初级者参考的，如果您已经有一定的基础请直接忽略吧二级菜单是网站开发中很常见的功能模块，但是对于初级者来说却还是有些困难，下面我就拿几个常见的案例来讲好了。鼠标滑过显示显...

vslam 2019-08-01 16:35 评论0 收藏0
实现二级菜单的滑动出现与消失(解决dispaly与transition冲突问题)

摘要：解决与冲突的问题思路因为和有冲突只要就不起作用在开始变为然后设置为秒后在改变其他的如或等可以过渡的在最后用监听一次过渡结束事件链接演示代码如下实现二级菜单的滑动出现与消失加到属性里加到属性里这段用写在的属性上方便进行修改作解决transition与display冲突的问题思路: 因为transition和display有冲突,只要dispaly,transition就不起作用,在...

fnngj 2019-08-22 18:03 评论0 收藏0
Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard d

摘要：但是有边框，不好看啊再次美化使用使用图标库安装这里主要贴一下的改动，其他的代码就不贴了看下效果图标什么的都有了。另外文件需要加上看看效果点击菜单，路径跳转，并且每次都是单独去加载路由的文件。做完这个demo后，我体会到，Vue组件化，webpack, Vue-router等，并不是很难学习，你需要的只是拿起斧头的勇气在做demo的过程中，我遇到一个问题，就是vue-router懒加载...

Near_Li 2019-08-21 17:38 评论0 收藏0