手写口风琴全动态左侧导航栏

效果图

用到知识简单js，css3

- 设计思路

1.div居中
2.ul li
3.显示隐藏
4.三角设计
5.伪元素前后加三角

第一步

         <!-- first --><li class="item"><a href="#" class="btn">line_1</a><div class="show_menu"><a href="#">itme_1</a><a href="#">itme_2</a><a href="#">itme_3</a></div></li>

需要解决的问题：a标签转换为块级元素，给a标签加width用padding上下撑起15px;弹性布局div居中

* {margin: 0;padding: 0;text-decoration: none;   list-style:none
}
html,body {background-color:#fcdc29;width: 100%;height: 100%;display: flex;align-items: center; /*侧边居中*/justify-content: center;/*实现中心位置居中，不是边角居中*/
}

接下来设计三角形

  div {width: 0px;height: 0px;border: 15px solid #ccc;border-left: 15px solid red;border-top: 15px solid blue;border-right: 15px solid yellow;border-bottom: 15px solid green;}

如果我们给div设置了这个样式会在页面显示

当我们需要哪个方向三角形时候只需要将其他方向color设置为transparent（透明）

首先我们给line加一个下三角

.btn::before{content:'';/*必须写*/position: absolute;width:0;height:0;bottom:-20px;right:15px;border:10px solid transparent;border-top:10px solid #ff6f61;
}

下面是全部css代码

* {margin: 0;padding: 0;text-decoration: none;   list-style:none
}
html,body {background-color:#fcdc29;width: 100%;height: 100%;display: flex;align-items: center; /*侧边居中*/justify-content: center;
}
.item {border-bottom: 1px solid #ef584a;overflow: hidden;
}
.menu {display: block;width: 250px;border-radius: 10px;overflow: hidden
}
.btn {display: block;position: relative;color: #fff;background-color: #ff6f61;padding: 15px 20px;
}/*三角形*/
.btn::before{content:'';position: absolute;width:0;height:0;bottom:-20px;right:15px;border:10px solid transparent;border-top:10px solid #ff6f61;
}
/*下拉*/
.show_menu  {background: #273057;display: none;transition:display 0.5s;
}
.show .show_menu {display:block;
}
.show_menu a {position: relative;display: block;color: #fff;padding: 15px 20px;font-size: 13px;border-bottom: 1px solid #394c7f;
}.show_menu a::before,
.show_menu a::after {position: absolute;content:'';width:0;height:0;top:0;opacity:0;transition:opacity 0.3s;
}
.show_menu a::before {left: 0;
}
.show_menu a::after {right: 0;
}
.show_menu a:hover::before{opacity: 1;border-top: 24px solid transparent;border-left: 11px solid #fcdc29;border-bottom: 24px solid transparent;
}
.show_menu a:hover::after {opacity: 1;border-top: 24px solid transparent;border-right: 11px solid #fcdc29;border-bottom: 24px solid transparent;
}
.show_menu a:hover {background: #273057;background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);transition: all 0.3s;
}

js 代码

 var btn = document.getElementsByClassName('btn');var len = btn.length;for (var i = 0; i < len; i++) {btn[i].onclick = function () {var li = this.parentNode;var show = document.getElementsByClassName('show')[0];if (show) {show.classList.remove('show');}li.classList.add('show');}}var menu = document.getElementsByClassName('menu')[0];menu.onmouseleave = function () {var show = document.getElementsByClassName('show')[0];if (show) {show.classList.remove('show');}};

上面代码中如果我们不给a标签加relative定位不能看到效果
因为伪元素的absolute定位
absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位

relative也一样，但是遵循对象不可重叠

最后我们看一下效果

手写口风琴全动态左侧导航栏相关推荐

uniapp手写购物车单选全选反选
uniapp手写购物车单选全选反选这里是用图片切换的方法显示没有用到 checkbox 单选选项图片判断切换全选选项图片判断切换这里是用图片切换的方法显示没有用到 checkbox ...
微信小程序购物车和左侧导航栏
先上实现图话不多说,直接上代码 cars.js // const arr = require("../../utils/data"); // pages/cars/cars.j ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
基于CarSystemUI实现左侧导航栏NavigationBar及下拉面板定制开发1——Android10智能座舱
文章目录前言一.需求说明二.修改方案 1.基于需求的两种设计构想 2.修改正确的高度及宽度三.CarSystemUI 1.CarOS框架关于CarSystemUI的介绍 2.替换CarSyst ...
后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
转载：Android (争取做到)最全的底部导航栏实现方法
原文出处标题:Android (争取做到)最全的底部导航栏实现方法作者:野狼谷原文链接:Android (争取做到)最全的底部导航栏实现方法 - 野狼谷 - 博客园前言本文(争取做到)And ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
区块链商品溯源系统左侧导航栏+右侧加载页面ajax html
纯前端页面,项目应该部署到服务器上,ajax跨域问题得到解决,无聊的毕业前实习. 网页是参考网上的原型设计效果: 代码: html <!DOCTYPE html> <html la ...

手写口风琴全动态左侧导航栏

效果图

用到知识简单js，css3

- 设计思路

手写口风琴全动态左侧导航栏相关推荐

最新文章

热门文章