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

最新推荐文章于 2023-04-11 21:42:57 发布

原创最新推荐文章于 2023-04-11 21:42:57 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web前端菜鸟入门 #html

本文介绍了web前端开发中常见的三种菜单效果：折叠菜单，提供空间节省的导航；滑动门菜单，通过部分显示子菜单增加视觉吸引力；以及下拉菜单，用于层次分明的导航结构。适合初学者了解和实践。

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;" onmouseover="myGame(0)">第一项</li>
				<li onmouseover="myGame(1)">第二项</li>
				<li onmouseover="myGame(2)">第三项</li>
				<li onmouseover="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节点就可以完成，可以做个参考，以此慢慢写出更加好的菜单效果。