html简单的折叠菜单

最新推荐文章于 2024-06-14 20:04:03 发布
最新推荐文章于 2024-06-14 20:04:03 发布
阅读量1.1w 收藏 42
点赞数 8
分类专栏： 量化交易系统 web开发 量化交易系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuxian2009/article/details/98032622
版权

大道至简。html+css+一个简单的JavaScript函数，实现的折叠菜单。

功能：

1.鼠标放置在菜单选项，具有变化；

2.实现一级菜单，二级菜单；

3.一级菜单收起来时，前面是“+”，展开时，前面是“-”；

效果图：

直接贴贴贴代码：

zhedie_menu.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
	<style>
	*{margin:0;padding:0;}
	
	div{
		font-size:1.5em;
		color:red; 
		background-color: #dfdfdf; 
		border: 0 solid #1892B5; 
		padding: 0px
		margin: 0px;
	}
	
	a:link,a:visited
	{
		display:block;
		color:#000000;
		background-color:#dfdfdf;
		width:200px;
		text-align:left;
		padding:4px;
		text-decoration:none;
	}
	a:hover,a:active
	{
		background-color:#dfdfdf;
		font-weight:bold;
	}
	</style>
	<link href="/static/css/style2.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<script type="text/javascript">
		function show(parentid,childid) {
			var parent = document.getElementById(parentid)
			var child=document.getElementById(childid);
			if (child.style.display == "none") {     
			    child.style.display = "";
				if(parentid=="id_menu_realtime")
				{
					parent.innerHTML = "- 实时监控"
				}
				else if(parentid=="id_menu_backtest")
				{
					parent.innerHTML = "- 历史回测"
				}
			}
			else{     
			    child.style.display = "none"; 
				if(parentid=="id_menu_realtime")
				{
					parent.innerHTML = "+ 实时监控"
				}
				else if(parentid=="id_menu_backtest")
				{
					parent.innerHTML = "+ 历史回测"
				}			   
			}
		}
	</script>

	<ul id="sellist">
		<div id="realtime" style="color:blue" onclick="show('id_menu_realtime','child_realtime')" >
		<li><a id="id_menu_realtime" href="#">+ 实时监控</a></li>
		</div> 
		<div id="child_realtime" style="display:none"> 
				<li><a href="/query_bt_w" target="iframeContent">&nbsp;&nbsp;W底</a></li>
				<li><a href="/static/xxx.html" target="iframeContent">&nbsp;&nbsp;突破</a></li>
				<li><a href="/static/xxxxx.html" target="iframeContent">&nbsp;&nbsp;热点概念</a></li>
		</div>
	</ul>
		
	<ul id="sellist">
		<div id="backtest" style="color:blue" onclick="show('id_menu_backtest','child_backtest')" > 
		<li><a id="id_menu_backtest" href="#">+ 历史回测</a></li>
		</div> 
		<div id="child_backtest" style="display:none"> 
				<li><a href="/xxxx" target="iframeContent">&nbsp;&nbsp;W底</a></li>
				<li><a href="/static/xxxxxxxx.html" target="iframeContent">&nbsp;&nbsp;突破</a></li>
		</div>
	</ul>

</body>
</html>

style2.css

#sellist li
  {
	text-decoration: none;
	list-style: none;
	display:block;	
	margin:1px;
	text-align:left;
  }

 

 

zhuxian2009
关注
  • 8
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯html折叠文字代码,不用JS，教你只用纯HTML做出几个实用网页效果
weixin_39664431的博客
05-30 1186
不用JS，教你只用纯HTML做出几个实用网页效果在我们以往看到的页面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我将介绍如何使用纯HTML打造属于自己的实用效果。1.折叠手风琴使用Details和Summary标签可以创建没有JavaScript代码的可折叠手风琴。效果：HTMLLanguages UsedThis page was written in HTML and CSS. T...
HTML折叠菜单
热门推荐
rnaissance的博客
05-24 3万+
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var itemHeight = 40; var dividerHeight = 1;function openMenu(obj) { menuTitleId = obj.i
基于jQuery实现简单的折叠菜单效果
12-28
本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： Html代码如下： <div class=box> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a></li> </ul> <p>菜单二</p> <ul> <li><a>2222</a></li> <li><a>2222</a></li> <li><a>2222</a></li> </ul> <p>菜单三</p>
HTML jquery实现左侧菜单折叠
01-17
HTML jquery实现左侧菜单折叠，简单易学，适合新手。。。
【CSS】text-decoration属性的功能以及属性值
最新发布
读心悦
06-14 512
例如，使用 line-through 来表示已删除或不再有效的文本是合适的，但随意使用它可能会导致混淆。同样，blink 值由于可能引起的可访问性问题，通常不建议使用。但请注意，这个效果在不同浏览器中的支持程度不同，且可能对用户体验产生负面影响，因此不建议使用。是 CSS 中的一个属性，用于添加或删除文本的装饰效果。它主要应用于文本元素，如段落、标题等，以改变其外观。这是一种较为特殊的装饰效果，可以用于强调文本。通过组合这些属性值，可以实现更复杂的文本装饰效果。这是最常见的装饰效果之一，常用于链接。
为什么html中没有折叠效果,css3折叠效果
weixin_35965648的博客
05-31 346
在开发过程中，经常会遇到一些交互效果，今天所联系的便是一个类似折纸的折叠效果，查看效果.说到折纸，我们先看下图这是我第一时间想到的大体思路，如果能让这6个面连续的变化角度到0不就可以了吗，运用css3 transition或animation毫无压力~~要实现上图的这种效果，设置不同rotateX值及父元素的perspective即可，可是在实际写出来之后却发现这样并不可行，不论我们设置trans...
WEB HTML 二级菜单 折叠展开菜单
小西瓜吖的博客
03-16 1万+
WEB，HTML，二级菜单，折叠展开 一、效果图： 二、完整代码： 直接复制 浏览器打开即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- JS --> <script language="javascript"&g
html内容折叠,HTML+CSS入门 文本折叠详解
weixin_42501077的博客
05-30 3334
本篇教程介绍了HTML+CSS入门 文本折叠详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<先看效果：收缩状态展开状态源代码：html>文本折叠测试.a-text{font-size:20px;color:#b30000;cursor:pointer;}.a-text:hover{color:red;}.p1{font-size:16px;c...
点击折叠菜单（HTML/CSS/JS）
weixin_52120405的博客
03-09 2727
HTML <ul class="menu"> <li> <h3>HTML</h3> <p>超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> </li> <li>
通过HTML+CSS实现折叠样式完整代码
qq_17189095的博客
07-17 1154
通过html+css实现折叠样式。
Html菜单折叠
BoBrother的博客
10-11 3158
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jQuery 折叠菜单 * { margin:0px; padding:0px; } body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:1
简单的js展开菜单
Junit的博客
07-30 1382
简单的js展开菜单 &lt;%@ page language="java" import="java.util.*" contentType="text/html"     pageEncoding="UTF-8"%&gt; &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&
jQuery创建折叠式菜单
10-16
总的来说，利用 jQuery 创建折叠式菜单是一个既简单又实用的过程，通过结合 HTML 结构、jQuery 事件处理和 CSS 样式，可以轻松实现各种定制化的菜单效果。对于前端开发者来说，掌握这种技术有助于提升网站或应用的...
JSON无限折叠菜单编写实例
10-26
总的来说，JSON无限折叠菜单的实现涉及了JSON数据解析、HTML结构生成以及交互效果的处理。通过这样的方法，我们可以将菜单的定义与页面的呈现逻辑分离，使得菜单的维护和扩展更加灵活。无论是在电子商务网站、内容...
html5菜单折纸效果
09-28
HTML5菜单的折纸效果是一种视觉上的创新设计，它通过CSS3的3D转换和过渡效果来模拟纸张折叠和展开的动作，为用户界面增添了动态和趣味性。在本示例中，这种效果被用于创建一个类似猎豹浏览器安装过程中用户须知的...
CSS+jQuery实现简单的折叠菜单
11-28
废话不多说了，直接给大家...折叠菜单</title> <style> body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ text-decoration:none; color:white; } .types ul{ d
【vue+scss】实现伸缩菜单，可以展开折叠，淡入淡出动画效果
PolarisWay的博客
03-30 955
这是一个可以实现伸缩菜单，展开折叠菜单，具有淡入淡出动画效果的vue组件
HTML+jQuery折叠菜单
lq24244的博客
04-20 528
点击一级菜单则展开二级菜单 展开收起动画效果 完整代码,需要引入jQuery.JS文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } .nav { list
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标
互联网编程爱好者
03-10 8689
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标 bootstrap的折叠代码如下 <div class="accordion" id="accordionExample"> <div class="card"> <!-- 重点是在这里的parent-nav 和 collapsed类标签 --> <div class=...
html 小三角折叠菜单
05-28
可以使用HTML和CSS实现小三角折叠菜单。具体实现步骤如下： 1. 创建HTML菜单结构，使用<ul>和<li>标签来创建菜单列表。 2. 在<li>标签中添加一个<a>标签，来定义每个菜单项的链接。 3. 在每个菜单项后添加一个<span>标签，并设置其class属性为“arrow”，来创建小三角。 4. 使用CSS来控制菜单的样式，包括菜单项和小三角的颜色、大小和位置等。 5. 使用JavaScript来实现菜单的折叠和展开功能。 示例代码如下： HTML代码： ``` <ul class="menu"> <li><a href="#">菜单项1</a><span class="arrow"></span> <ul class="sub-menu"> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> </ul> </li> <li><a href="#">菜单项2</a><span class="arrow"></span> <ul class="sub-menu"> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> </ul> </li> <li><a href="#">菜单项3</a><span class="arrow"></span> <ul class="sub-menu"> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> </ul> </li> </ul> ``` CSS代码： ``` .menu > li { position: relative; display: inline-block; padding: 5px 10px; background-color: #eee; } .menu > li > a { color: #333; text-decoration: none; } .menu > li > .arrow { position: absolute; top: 50%; right: 10px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #333 transparent transparent transparent; } .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: #eee; } .sub-menu > li { display: block; width: 100%; padding: 5px 10px; } .sub-menu > li > a { color: #333; text-decoration: none; } .menu > li:hover > .sub-menu { display: block; } ``` JavaScript代码： ``` var arrows = document.getElementsByClassName("arrow"); for (var i = 0; i < arrows.length; i++) { arrows[i].addEventListener("click", function() { var subMenu = this.parentElement.querySelector(".sub-menu"); if (subMenu.style.display == "block") { subMenu.style.display = "none"; } else { subMenu.style.display = "block"; } }); } ``` 这样就可以创建一个简单的小三角折叠菜单，点击菜单项的小三角可以展开或折叠子菜单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值