记录web中常见的几种菜单效果

小咪咪 2022-06-15 23:45 153阅读 0赞

## 1.折叠菜单： ##

html部分：

<div id="tab">
    			<h3><span>+</span>这是第一项</h3>
    			<div>这是第一项的内容</div>
    			<h3><span>-</span>这是第二项</h3>
    			<div style="display: block;">这是第二项的内容</div>
    			<h3><span>+</span>这是第三项</h3>
    			<div>这是第三项的内容</div>
    			<h3><span>+</span>这是第四项</h3>
    			<div>这是第四项的内容</div>
    		</div>

js部分：

var myhs = document.getElementById("tab").getElementsByTagName("h3");
    			console.log(myhs.length);
    			for(var i = 0; i < myhs.length; i++) {
    				myhs[i].onclick = function() {
    					if(this.nextSibling.nextSibling.style.display == "block") {
    						this.nextSibling.nextSibling.style.display = "none";
    						this.firstChild.innerHTML = "+";
    					} else {
    						this.nextSibling.nextSibling.style.display = "block";
    						this.firstChild.innerHTML = "-";
    					}
    				}
    			}

## 2.滑动门菜单 ##

html部分：

<div id="tab">
    			<ul>
    				<li style="background: red;" οnmοuseοver="myGame(0)">第一项</li>
    				<li οnmοuseοver="myGame(1)">第二项</li>
    				<li οnmοuseοver="myGame(2)">第三项</li>
    				<li οnmοuseοver="myGame(3)">第四项</li>
    			</ul>
    			<div style="display:block;">第一项</div>
    			<div>第二项</div>
    			<div>第三项</div>
    			<div>第四项</div>
    		</div>

js部分：

var mylis=document.getElementById("tab").getElementsByTagName("li");
    			var mydivs=document.getElementById("tab").getElementsByTagName("div");
    			function myGame(v){
    				for(var i=0;i<mydivs.length;i++){
    					mydivs[i].style.display="none";
    					mylis[i].style.background="yellow";
    				}
    				mydivs[v].style.display="block";
    				mylis[v].style.background="red";
    			}

## 3.下拉菜单 ##

html部分：

<div class="nav">
    				<ul id="myulOne">
    					<li>
    						<a href="#">首页</a>
    						<div>
    							<p><a href="#">第一项</a></p>
    							<p><a href="#">第一项</a></p>
    							<p><a href="#">第一项</a></p>
    							<p><a href="#">第一项</a></p>
    						</div>
    					</li>
    					<li>
    						<a href="#">新品推荐</a>
    						<div>
    							<p><a href="#">第二项</a></p>
    							<p><a href="#">第二项</a></p>
    							<p><a href="#">第二项</a></p>
    							<p><a href="#">第二项</a></p>
    						</div>
    					</li>
    					<li>
    						<a href="#">品牌分类</a>
    						<div>
    							<p><a href="#">第三项</a></p>
    							<p><a href="#">第三项</a></p>
    							<p><a href="#">第三项</a></p>
    							<p><a href="#">第三项</a></p>
    						</div>
    					</li>
    					<li>
    						<a href="#">品质服务</a>
    						<div>
    							<p><a href="#">第四项</a></p>
    							<p><a href="#">第四项</a></p>
    							<p><a href="#">第四项</a></p>
    							<p><a href="#">第四项</a></p>
    						</div>
    					</li>
    					<li>
    						<a href="#">顾客之声</a>
    						<div>
    							<p><a href="#">第五项</a></p>
    							<p><a href="#">第五项</a></p>
    							<p><a href="#">第五项</a></p>
    							<p><a href="#">第五项</a></p>
    						</div>
    					</li>
    					<li>
    						<a href="#">联系我们</a>
    						<div>
    							<p><a href="#">第六项</a></p>
    							<p><a href="#">第六项</a></p>
    							<p><a href="#">第六项</a></p>
    							<p><a href="#">第六项</a></p>
    						</div>
    					</li>	
    				</ul>
    			</div>

js部分：

var myukOne = document.getElementById("myulOne");
    var myLiOne = myukOne.getElementsByTagName("li");
    for(var i = 0; i < myLiOne.length; i++) {
    	delSpaceText(myLiOne[i]); //删除空白节点
    	myLiOne[i].onmouseover = function() {
    		this.lastChild.style.display = "block";
    	}
    	myLiOne[i].onmouseout = function() {
    		this.lastChild.style.display = "none";
    	}
    }

其实这些还是很简单的，基本上都是利用dom事件和dom节点就可以完成，可以做个参考，以此慢慢写出更加好的菜单效果。

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关常见的几种Web安全问题测试简介

Web项目比较常见的安全问题 1.XSS(CrossSite Script)跨站脚本攻击 XSS(CrossSite Script)跨站脚本攻击。它指的是恶意攻击者往We

╰半夏微凉°/ 2024年03月26日 23:11/ 0 赞/ 47 阅读

相关常见的几种编码

1、编码的作用 1.编码是系统惟一识别每个、某类信息的依据; 2.编码是进行信息分类、校核、合计、检索的关键字; 3.编码可克服项目参差不齐的缺点,节省内存与外存空间;

ゞ浴缸里的玫瑰/ 2023年10月04日 20:40/ 0 赞/ 57 阅读

相关几种常见的列表菜单

要想出现下拉菜单或二级嵌套一般是在列表li中的<a></a>之后再添加一个div或ul或dl <li> <a>链接</a> \{<div></div>\}或

- 日理万妓/ 2022年09月25日 10:29/ 0 赞/ 156 阅读

相关常见的几种字符集

github地址： [https://github.com/longyu109][https_github.com_longyu109] 常见的字符集有ASCII码，U

分手后的思念是犯贱/ 2022年08月18日 15:23/ 0 赞/ 260 阅读

相关 keil中常见的几种警告

keil中常见的几种警告，固然，相对于错误的，警告的程度不及错误的严重性，有时候忽略，会出现意想不到的错误。先看看常见的几种错误，分析出来现的原因。 1. Warni

爱被打了一巴掌/ 2022年06月18日 10:24/ 0 赞/ 271 阅读

相关记录web中常见的几种菜单效果

1.折叠菜单： html部分：  <div id="tab"> <h3><span>+</span>这是第一项<

小咪咪/ 2022年06月15日 23:45/ 0 赞/ 154 阅读

相关常见的几种RuntimeException

一般面试中java Exception（runtimeException ）是必会被问到的问题常见的异常列出四五种，是基本要求。更多的。。。。需要注意积累了常见的

你的名字/ 2022年06月09日 03:44/ 0 赞/ 216 阅读

相关 Java中常见的几种异常

1.NullPointerException——空指针异常当应用程序试图在需要对象的地方使用 `null` 时，抛出该异常。这种情况包括：调用 `null` 对象

Dear 丶/ 2022年05月17日 02:58/ 0 赞/ 252 阅读

相关 java-web系列（四）---几种常见的加密算法

前言这个项目的github地址：[extensible项目的github地址][extensible_github] extensible项目当前功能模块如下： [

深碍√TFBOYSˉ_/ 2022年05月14日 09:07/ 0 赞/ 388 阅读

相关常见的几种web api 接口加密签名模式

1、最简单的固态签名 sign = xxxxxx 的模式，通常配合time()时间戳传递，一般用来做为普通接口不涉及安全性的接口。 2、动态签名这种常规的：

傷城~/ 2021年07月17日 01:04/ 0 赞/ 910 阅读