侧边手风琴导航栏

最新推荐文章于 2023-02-04 17:09:32 发布
最新推荐文章于 2023-02-04 17:09:32 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 练习 文章标签： 前端 javascript html5  css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhb1032352370/article/details/83654216
版权 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>侧边手风琴导航栏</title>
  <style type=text/css>
     *{
	     margin: 0;
		 padding: 0;
	 }
     html,body{
	     height: 100%;
	 }
	 .wrap{
	     height: 100%;
		 width: 260px;
		 background-color: #363a45;
		 text-align: center;
		 color: #fff;
	 }
	 .header{
		 height: 60px;
		 background-color: #44495a;
		 font-size: 20px;
		 line-height: 60px;
	 }
	 .nav{
	     width: 250px;
         margin: 10px 5px;
	 }
	 .nav-list h2{
	     position:relative;
	     padding: 15px 0;
		 background-color: #3889d4;
		 font-size: 15px;
	 }
	 .nav-list h2:hover{
	     background-color: RoyalBlue;
		 color: #cdcdcd;
	 }
	 .nav-list h2.on{                    /*设置h2点击后类on属性，点击后h2颜色变化*/
	     background-color: #393c4a;
	 }
	 .nav-list i{
	     position:absolute;
		 right: 10px;
		 top: 16px;
		 border: 8px solid transparent;
		 border-left-color: #fff;
		 transform-origin: 1px 7px;   /*设置小三角旋转基点*/
		 transition: .8s;    /*旋转过渡时间*/
	 }
	 .nav-list i.on{               /*设置点击后添加的类on属性（小三角旋转角度）*/
	     transform: rotate(90deg);   
	 }
	 .hide{
	     height: 0;
		 overflow: hidden;
		 margin-bottom: 5px;
		 transition: 1s;
	 }
	 .hide h5{
	     padding: 10px 0;
		 background-color: #282c3a;
		 border-bottom: 1px solid #42495d;
	 }
	 .hide h5:hover{
	 	background-color: #03B9FA;
	 }
</style>
 </head>
 <body>
     <div class="wrap">
         <div class="header">大标题</div>
	     <div class="nav">
             <ul>
	             <li class="nav-list">
			         <h2><div></div>
					     分类标题一
					     <i></i>
					 </h2>
				     <div class="hide">
					     <h5>小标题1</h5>
						 <h5>小标题2</h5>
						 <h5>小标题3</h5>
						 <h5>小标题4</h5>
						 <h5>小标题5</h5>
						 <h5>小标题6</h5>
					 </div>
			     </li>
				 <li class="nav-list">
			         <h2>分类标题二
					     <i></i>    <!--制作小三角-->
					 </h2>
				     <div class="hide">
					     <h5>小标题1</h5>
						 <h5>小标题2</h5>
						 <h5>小标题3</h5>
						 <h5>小标题4</h5>
						 <h5>小标题5</h5>
						 <h5>小标题6</h5>
					 </div>
			     </li>
				 <li class="nav-list">
			         <h2>分类标题三
					     <i></i>
					 </h2>
				     <div class="hide">
					     <h5>小标题1</h5>
						 <h5>小标题2</h5>
						 <h5>小标题3</h5>
						 <h5>小标题4</h5>
						 <h5>小标题5</h5>
						 <h5>小标题6</h5>
					 </div>
			     </li>
             </ul>
	     </div>
     </div>
	 <script>
	     var aList = document.querySelectorAll('.nav-list h2');    //依次获取需要h2，.hide,i标签
		 var aHide = document.querySelectorAll('.hide');
		 var oIcon = document.querySelectorAll('.nav-list i');
		 var lastIndex = 0;    //自定义变量监控点击后的下标
		 for(var i=0;i<aList.length;i++){
             aList[i].index = i;  //自定义属性保存下标
		     aList[i].onclick = function() {
				 //判断是否二次点击同一栏
				 if(aHide[this.index].style.height =='' || aHide[this.index].style.height == '0px'){
				 aHide[lastIndex].style.height = '0';
				 aList[lastIndex].className = '';
				 oIcon[lastIndex].className = '';
				 //设置当前样式
		         aHide[this.index].style.height = '235px';
			     aList[this.index].className = 'on';            //点击后为h2添加class = 'on'
				 oIcon[this.index].className = 'on';
				 }
				  else{
				     aHide[this.index].style.height = '0';
				     aList[this.index].className = '';
				     oIcon[this.index].className = '';
				  }
				 lastIndex = this.index; // 保存当前下标
		 }
		 }
	 </script>
 </body>
</html>
沐风ol
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
WEB前端网页设计-Bootstrap5 侧边栏导航（Offcanvas）& JavaScript 事件
君逍遥o
05-02 5040
WEB前端网页设计-Bootstrap5 侧边栏导航（Offcanvas）& JavaScript 事件
H5+CSS3实现简单的导航条
weixin_38694789的博客
04-20 8121
效果： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <style> .btns{ /*border: black solid 1px;*/ background-color...
html侧边导航栏折叠,HTML侧面导航栏
weixin_39894104的博客
06-03 2190
ul li {list-style: none;}body,html {width: 100%;height: 100%;}* {margin: 0;padding: 0;}.headder {width: 100%;height: 8%;background-color: #1D8FF0;text-align: center;margin-top: auto;display: flex;/*实现...
html中关于侧边导航栏和导航栏的编写
xxxmou的博客
02-04 7572
关于侧边导航栏和下拉菜单纯css编写
Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
默林工作室
09-02 2515
Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>我们接着再继续学习动态面板的应用，本篇课程我们来讲解一下，如何运用动态面板绘制导航菜单栏的手风琴效果。我们还是先来看看完成效果图，大家可以看到，手风琴菜单的交互主要包括：①点击菜单1~3时，可展开或收起内容区域；②点击收起菜单1~2时，其余下方菜单均向上移动；③点击展开菜单1~3时，其余菜单均收起（即手风琴效果）。菜单初稿一如既往，这里提前把菜单初稿准备好了。下面来给大家讲解一下手风琴效果的实现步骤。
Vue实现侧边菜单栏手风琴效果实例代码
08-27
手风琴效果可以应用于侧边菜单栏、导航栏、树形菜单等各种场景。 Vue 实现手风琴效果 要实现手风琴效果，需要使用 Vue 的模板语法和指令。在本实例代码中，我们使用了 Vue 的模板语法来定义菜单项，并使用 `v-for`...
jquery-手写-多级可拓展竖手风琴导航
10-25
手风琴导航是一种收放式的导航栏设计，通常用于显示多级菜单。其特点是只显示一级菜单项，当用户点击某个一级菜单时，相应的二级菜单会展开，其他二级菜单则会自动收缩。这种设计尤其适用于左侧导航，因为可以节省...
jq手风琴特效
05-27
这种布局方式在有限的空间内展示大量信息时特别有用，比如在导航菜单、FAQ页面或内容丰富的侧边栏中。 实现jq手风琴特效主要涉及以下知识点： 1. **jQuery选择器**：首先，你需要了解如何使用jQuery选择器来选取...
导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效
12-03
本文将深入探讨“导航菜单”、“下拉菜单”、“手风琴菜单”以及它们在JavaScript（JS）和jQuery中的实现，同时也会介绍相关的特效。 首先，让我们了解“导航菜单”。导航菜单通常位于网页的顶部或侧边，它列出了...
js导航条写的几种导航条
12-30
在网页设计中，导航条是不可或缺的部分，它帮助用户在网站间轻松地浏览和定位。JavaScript（简称JS）被广泛用于实现动态、交互式的导航条效果，为用户提供更丰富的用户体验。以下将详细介绍标题和描述中提到的几种JS...
侧边导航栏（抽屉式设计）界面 (html + css)
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
web前端学习日志——手风琴导航栏
weixin_41022751的博客
06-03 811
手风琴导航栏是比较常见的一种导航栏样式，点击列表项可以下拉出二级列表，点击其他列表，又可把该列表收起。这样的列表设计使得人机交互性更强，分享自己参考网络自己写的一个手风琴导航栏效果。下面贴效果图： 一个列表包含三个部分，图标+列表名+动态下拉图标。点击其中一项弹出二级列表： 再点击另一项，弹出的下拉二级列表会收起。 最关键的是js部分，代码涉及很多细节，由于初学，所以注释比较详细： //window.onload() 方法用于在网页加载完毕后立刻执行的操作 window.onload=function
左侧导航手风琴
weixin_54420874的博客
12-28 250
注意看红色箭头，共有11个步骤，按顺序操作下去 1、打开VS，新建(ctrl+n)选择html语言，英文状态下的感叹号按tab键。保存到桌面。首先就是熟悉不陌生的<div>标签，给了个类，类名为“container”<div>嵌套<div>。里面的<div>也有个类，类名为“rightNav”这些类名可随便起，只要合乎常理即可。第二个<div>里面给了个<a>标签，超链接标签。<a>标签中间又加着个<em>标签
手风琴导航栏的实现
weixin_30552811的博客
12-10 295
附上一个手风琴导航栏切换代码，因为博客园的缘故，一些css样式重置被屏蔽了，导致ul向右偏移了部分 数码产品 手机 电脑 mp3 平板 收音机 服装鞋帽 男装 女装 童装 箱包 鞋 日化产品 护手霜 护肤 美白 祛痘 去...
html5学习之侧边栏实现
qdudz的专栏
10-11 3万+
设置布局 隐藏显示侧边栏 添加菜单内容 为菜单列表添加事件 设置active菜单 设置默认选中菜单 设置viewport 使用媒体查询 打算学习一些html5的知识，暂时不使用jquery.js，计划做一个侧边栏，侧边栏可以隐藏，点击侧边栏中的菜单改变content中的内容。--------------------------------- header ------------------
五分钟用HTML+CSS设计一个可隐藏的侧边导航栏（sidebar）
热门推荐
Bobdragery的博客
06-03 3万+
准备工作 1、矢量图标网站https://ionicons.com/ 2、配色网站https://flatuicolors.com/ 3、jQuery-cdn <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 成品效果截图 展开后： 展开前： 废话不不多说上代码： htm...
左侧手风琴下拉菜单导航(网页常用功能）
weixin_33854644的博客
03-16 820
效果如下： 代码如下： html: <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="author" Content="li"> <meta name="renderer" content="webkit"> <meta http-eq...
HTML5+CSS3小实例：后台管理系统的侧边导航栏
艾恩小灰灰的博客
05-23 2571
HTML5+CSS3做一个后台管理系统的侧边导航栏，点击三条杠，可以收起或展开侧边导航栏。收起时，图标变大，文本在图标下方，管理员头像右侧的欢迎语隐藏；展开时图标变小，文本在图标的右侧显示，管理员头像右侧的欢迎语显示。切换过程伴有过渡动画，右侧内容区可以放自己的内容。 效果： 源码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/ht...
html侧边抽屉式导航栏
最新发布
04-18
很高兴回答您的问题。侧边抽屉式导航栏通常使用HTML、CSS和JavaScript来实现。HTML负责页面的结构和内容，CSS负责样式和布局，JavaScript负责控制交互和动态效果。用户点击导航栏按钮时，JavaScript会处理并展开或收起侧边抽屉式导航栏。如果您需要更详细的实现步骤或示例代码，可以通过搜索引擎或相关技术文档获取更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值