web开发左侧手风琴导航栏

最新推荐文章于 2024-05-12 10:31:27 发布
最新推荐文章于 2024-05-12 10:31:27 发布
阅读量1.7k 收藏 37
点赞数 2
分类专栏： Python 文章标签： 前端 css django 导航栏 手风琴
原文链接：https://blog.csdn.net/lhb1032352370/article/details/83654216
版权

存在问题：
开发业务系统时，需要导航栏，此导航栏要能折叠而且还要美观。

解决方案：
引用自：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>

注：
还有一个没有源码，但效果展示挺好看的导航，
地址为：http://100sucai.com/demos.php?id=1520835808
在这里插入图片描述
另一个效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>综合信息</title>
<style>
html,body {
	width: 100%;
	height: 100%;
	font-family: "Microsoft Yahei", "SimSun", Arial;
	font-size:12px;
	overflow:hidden;
}
body,h3,ul,li {
	margin: 0;
	padding: 0;
}
h3,th{
	font-weight:normal;
}
.ul,ul li {
	list-style-type: none;
}
a{
	text-decoration: none;
}

.header {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 0;
	/*以上设置是重点必须的*/
	line-height: 50px;
}

.header h3 {
	margin-left: 12px;
	color: #0075C7;
}

.mainBox {
	width: 100%;
	position: absolute;
	top: 50px;
	bottom: 0;
	/*以上设置是重点必须的*/
}

.mainBox .leftBox {
	height: 100%;
	width: 240px;
	float: left;
	overflow: auto;
	/*以上设置是重点必须的*/
	background: #f8f8ee;
	font-size: 12px;
	font-family: "Microsoft Yahei", "SimSun", Arial;
	border-right: 1px solid #D9D9D9;
	border-top: 1px solid #D9D9D9;
}

.menuItem a,.menuItem a:visited {
	padding-left: 20px;
	width: 220px;
	height: 32px;
	background-color: #f8f8f8;
	border-bottom: solid 1px #EAEAEA;
	border-top: solid 1px #FFFFFF;
	display: block;
	line-height: 32px;
	color: #000000;
}

.menuItem a:hover,.menuItem a:active {
	background: #f2f2f2;
	color: #0075c7;
}

.menuItem img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 10px;
}

.mainBox .rightBox {
	height: 100%;
	margin-left: 241px;
	/*以上设置是重点必须的*/
	padding-right: 1px;
	padding-left: 1px;
	border-left: 1px solid #E6E6E6;
	border-top: 1px solid #D9D9D9;
	overflow: auto;
}

.slideBtn {
	cursor: pointer;
	width: 1em;
	position: absolute;
	top: 40%;
	left: 1;
	display: block;
}


</style>
<script type="text/javascript"
	src="jquery.js"></script>
</head>

<body>
	<div class="header">
		<h3>
			综合信息
		</h3>
	</div>
	<div class="mainBox">
		<div class="leftBox">
			<div class="menuItem zzjg">
				<a href="zhxx.jsp?type=zzjg">组织机构</a>
			</div>
			<div class="menuItem ygfc">
				<a href="zhxx.jsp?type=ygfc">员工风采</a>
			</div>
			<div class="menuItem wghf">
				<a href="zhxx.jsp?type=wghf">网格划分</a>
			</div>
			<div class="menuItem xxyd">
				<a href="zhxx.jsp?type=xxyd">学习园地</a>
			</div>
			<div class="menuItem tzgg">
				<a href="zhxx.jsp?type=tzgg">通知公告</a>
			</div>
			<div class="menuItem xwzx">
				<a href="http://www.baidu.com"
					target="_blank">新闻资讯</a>
			</div>
		</div>
    </div>
	</body>
coberup
关注
  • 2
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中如何实现手风琴效果（俗称二级菜单）
weixin_44049725的博客
12-25 1898
在前段开发中，有时候我们需要用到手风琴效果，那么如何实现我们直接上代码进行分析。 首先构建页面结构： <ul id="wapper"> <li class="list">手机品牌 //第一层菜单第一项 <ul class="two"> //第二层菜单 <li>华为</li> <li>小米<...
jquery实现垂直手风琴导航栏
10-15
而垂直手风琴导航栏是一种节省空间的交互式导航方式，尤其适用于内容丰富的网站或需要层次结构展示的页面。本文将深入讲解如何使用jQuery来实现一个垂直手风琴导航栏。 首先，我们需要创建HTML结构。在示例中，`...
手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作
weixin_30539835的博客
07-19 117
一、手风琴菜单效果图及代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手风琴效果制作</title> 6 <link rel=...
超实用！2024年必看的10个导航栏设计
aimeeth的博客
04-19 967
如果说到UI设计中最常用的组件，一定有导航栏。对一个网站/APP来说，导航栏就像旅途中的指南针，告诉用户现在在哪里，可以到哪里去。一个直观、易用的导航栏能显著提升用户体验，增加网站的点击率和浏览量。不过，设计一个优秀的导航栏并没有想象中那么简单。本文，笔者将分享如何设计出一个用户体验极佳的导航栏，并为大家展示一些优秀的导航栏设计案例，希望能对你有所帮助。
web入门——导航栏
最新发布
阿常的博客
05-12 828
本专栏内容代码来自《响应式web（HTML5+CSS3+Bootstrap）》教材，一步步实现网页的导航栏。
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 4864
html+css+javascript+echarts设计的demo，快来学习吧
HTML和CSS+JS创建手风琴式菜单
Aruko的博客
08-08 1172
HTML部分(含JS) CSS部分（选择器部分和阿里图标库部分） 如下所示的简易手风琴菜单 HTML部分 我是在JSP页面上写的 注：JavaScript的代码是我直接找的别人的，我并没有学过JS所以也不懂 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html> <head> <me
静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...
weixin_35319943的博客
05-30 1790
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码，分享给大家，具体如下:PC端移动端代码左侧导航*{margin:0;padding:0;}#header{width: 100%;height: 60px;background: #fff;position: fixed;top: 0;}#header .dh_btn{width: 60px;height: 60px;b...
js左侧三级菜单导航代码
weixin_30245867的博客
07-07 891
效果演示： 实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:l...
jQuery插件 手风琴左侧竖向导航栏
05-19
而“jQuery插件 - 手风琴左侧竖向导航栏”则是一种特别有效的设计模式，它提高了用户体验，使得有限的空间可以展示更多的内容。下面将详细阐述这种插件的工作原理、实现方法以及其优点。 首先，jQuery是一种广泛...
jQuery手风琴式左侧栏导航菜单代码
06-05
在网页设计中，创建一个互动性强且用户友好的界面至关重要，而jQuery手风琴式左侧栏导航菜单就是实现这一目标的有效工具。这个代码实例提供了一种优雅的方式，使得左侧栏菜单能够以手风琴样式进行滑动切换，既节省...
精美左侧导航菜单栏
11-16
精美的左侧导航菜单，漂亮，简洁，下载直接可以展示的！！
9种html5+css3隐藏侧边栏导航菜单动画效果
12-03
9种html5+css3隐藏侧边栏导航菜单动画效果
js左侧风琴式导航栏
03-02
javacript左侧风琴式导航栏,即下即用。
web前端开发-手风琴
03-15
在Web前端开发中，"手风琴"是一种常见的交互组件，它通常用于展示有限空间内的大量内容。手风琴效果允许用户逐个展开或关闭内容区域，以保持页面的整洁和易于导航。这种设计模式在许多网站和应用程序中都能看到，如...
原生JavaScript手风琴导航栏
04-11
通过原生JavaScript实现手风琴样式的导航栏，可自动伸缩.
前端项目实战之Web端常见的侧边导航栏组件封装
yiguoxiaohai的博客
10-14 1142
前端B端开发，web常常会用到导航栏，下面进行封装
左侧手风琴下拉菜单导航(网页常用功能）
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...
rp学习1---web页面左侧导航栏收缩
wjgccsdn的博客
12-04 834
一、首先使用几个矩形框将所有的导航栏按照需要和层级画出来，如下： 二、将父菜单和子菜单分别转化为动态面板，具体转化动态面板方式如下： 选择要转为面板的部分，如两个子菜单（鼠标画框框住两个菜单即可，会将框内的所有内容作为一个面板），右击 三、选择父菜单，创建鼠标单击时的case 四、按下F5即可预览实际效果了 ...
asp.net顶部导航栏
08-30
ASP.NET 中实现顶部导航栏有多种方法，这里我给你介绍一种常见的做法： 1. 首先，在 ASP.NET 的页面上创建一个顶部导航栏的容器，可以使用 HTML 的 `<nav>` 元素或者 `<div>` 元素等来实现，例如： ```html <nav class="top-nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> ``` 2. 然后，可以在页面的头部引入 CSS 文件来设置顶部导航栏的样式，例如： ```html <link rel="stylesheet" href="styles.css"> ``` 3. 在 styles.css 文件中定义顶部导航栏的样式，例如： ```css .top-nav { background-color: #333; color: #fff; } .top-nav ul { list-style-type: none; margin: 0; padding: 0; } .top-nav li { display: inline-block; margin-right: 10px; } .top-nav li a { text-decoration: none; color: #fff; } .top-nav li a:hover { color: #ff0000; } ``` 这样就可以实现一个简单的顶部导航栏。你还可以根据自己的需求进行进一步的样式调整和功能扩展，比如添加下拉菜单、响应式设计等。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值