js+css二级菜单制作方法

最新推荐文章于 2024-03-25 14:12:31 发布
最新推荐文章于 2024-03-25 14:12:31 发布
阅读量627 收藏
点赞数
分类专栏： 广州网站建设 广州网站推广 建网站 文章标签： css border function xhtml float html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q869711327/article/details/6895673
版权 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级菜单</title>
<script>
//alert("二级菜单");
function ad(re){
	
	var wq = document.getElementById("qqs").getElementsByTagName("ul")
	if(re==1){
		
			wq(0).style.display="block";
			wq(1).style.display="none";
			wq(2).style.display="none";
	
	}
		
	else if(re==2){
	
			
		wq(1).style.display="block";
		wq(0).style.display="none";
		wq(2).style.display="none";
	}
	else if(re==3){
	
		wq(2).style.display="block";
		wq(1).style.display="none";
		wq(0).style.display="none";
	}
}

function dda(){
	
	var wq = document.getElementById("qqs").getElementsByTagName("ul")
	wq(2).style.display="none";
	wq(1).style.display="none";
	wq(0).style.display="none";
}

</script>
</head>

<body  style="padding:0 0 0 50px; margin:0px; width:980px;">
<style>
a{color:#FFF; text-decoration:none; display:block;}
#aqq li:hover{background:#F00; color:#FFF;}
li:hover{background:#F00; color:#000;}
ul{list-style:none; padding:0px; margin:0px;}
#aqq li{float:left; width:80px; height:25px; background:#CCC; text-align:center; line-height:25px; border:#000 1px solid;}
#qqs{clear:both;}
#qqs ul{float:left; width:80px; background:#930; color:#FFF; display:none;}
#qqs li{border:#FF0 1px solid; widows:80px; text-align:center; height:15px; line-height:15px;} 
</style>

<h4 id="aqq" >
 <ul >

   <li onmouseover="ad(1);" >菜单一</li>
   <li onmouseover="ad(2);">菜单二</li>
   <li onmouseover="ad(3);">菜单三</li>
   <li>菜单四</li>
   <li>菜单五</li>
   <li>菜单六</li>

 </ul>
</h4>

<div id="qqs"  >
 <ul id="qqs1">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>

   <li>5</li>
 </ul>
 <ul id="qqs2" style=" position:relative; left:83px;">
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>

    <li>五</li>
 </ul>
  <ul id="qqs2" style=" position:relative; left:+165px;"  >
    <li>壹</li>
    <li>贰</li>
    <li>叁</li>
    <li>肆</li>

    <li><a href="http://www.itleon.net">伍</a></li>
 </ul>
</div> 
 
</body>
</html>
q869711327
关注
专栏目录
仿CmsEasy网站横向二级JS+CSS导航菜单
06-06
3. **JavaScript逻辑**：用JS来监听一级菜单的悬停事件，当事件触发时，改变二级菜单的显示状态。例如： ```javascript var menuItems = document.querySelectorAll('.primary-menu li'); for (var i = 0; i ; i+...
分别用css、JS、jQuery实现二级菜单、三级菜单
SmileRM的博客
12-19 1万+
先看一下效果图，再决定是否接着往下看二级菜单的实现，先编写HTML结构<ul class="t1 fl"> <li>一级菜单 <ul class="t2"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul cla
原生 HTML/CSS/JS 实现右键菜单和二级菜单
最新发布
胡海龙
03-25 1743
本文详细的演示了如何通过原生HTML/CSS/JS来实现一个右键菜单，菜单具有分组和二级菜单，文章附有详细代码和演示网址。感兴趣的小伙伴快来查看吧。
html css js实现二级菜单,JS+CSS实现简单的二级下拉导航菜单效果
weixin_27059669的博客
06-26 1483
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://w...
js的二级菜单
weixin_46564011的博客
01-22 1395
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的二级菜单</title> <style> *{ padding:0; margin: 0; } .king_box{ width: 100%; .
JS二级菜单
xing942012的博客
11-26 2128
我们使用HTML+css+js来写出二级菜单的简易效果 首先来看HTML的代码，这个没什么好说的 <div class="box"> <div class="topbox"> <ul> <li class="bgc">春雨</li> <li>夏风</li> <li>秋雾</li> <li>冬雪</li> &l
JS+CSS简单树形菜单实现方法
10-23
例如，一级菜单、二级菜单和三级菜单可以通过不同的CSS类来区分，并设定相应的样式。 在提供的代码示例中，可以看到HTML结构主要由`<ul>`和`<li>`标签构成，它们代表了树形菜单的层级关系。`<a>`标签用于创建可点击...
JavaScript+CSS实现的可折叠二级菜单实例
10-22
根据提供的文件内容，我们将探讨使用JavaScript和CSS实现的可折叠二级菜单的知识点。这种菜单是一种常见的网页交互组件，允许用户通过点击一级菜单项来展开或折叠其子菜单项。 ### 关键知识点 1. **页面结构**：在...
JS+CSS实现TreeMenu二级树形菜单完整实例
10-23
根据提供的文件信息，我们可以提炼出以下关于使用JavaScript (JS)和层叠样式表 (CSS) 实现二级树形菜单 (TreeMenu) 的知识点。 ### 标题知识点 - **JS实现TreeMenu二级树形菜单**：这一知识点涉及使用JavaScript来...
JS+CSS实现简单的二级下拉导航菜单效果
10-23
本文介绍的是如何使用JavaScript和CSS实现一个简单的二级下拉导航菜单效果。这种效果是网页设计中常见的交互功能，用于提升用户体验，使其能够更直观地找到需要的信息。二级下拉菜单通常具有一个一级菜单项和若干个...
js制作的简易二级菜单
02-13
使用javascript制作简易的二级菜单，比较全面，想制作菜单的不同效果可以修改里面的css样式
JavaScript实现二级菜单
weixin_43729867的博客
02-13 2911
第一次尝试使用JS实现一个二级菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
js怎么实现二级菜单
qq_60504665的博客
11-18 1224
其中，HTML 文件是页面的基础结构，CSS 文件是用来美化页面的样式，JavaScript 文件则是用来实现菜单的交互效果的。在 HTML 文件中，需要创建一个菜单容器元素，在该元素下创建一级菜单项元素，每个一级菜单项元素下面再添加二级菜单项元素。在 JavaScript 文件中，则需要实现菜单的交互效果，包括鼠标悬停/离开时的效果等。的样式设置了二级菜单项内部文本的样式，以及背景颜色、文字颜色等样式设置。在 CSS 文件中，通过给菜单项元素设置合适的样式来美化菜单的外观。
JavaScript实现下拉二级菜单详解
qq_40641206的博客
02-13 5038
下拉菜单最终效果如图： 实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果 初始时可以改变 1.display：none;使其隐藏 2.height：0px;改变高度使其隐藏 –>加上下面代码可以实现菜单的上升下拉逐渐出现动画效果 transition: height 2s ease; 3.opacity：0；改变透明度使其隐藏 –>加上...
教你用纯JS实现二级菜单
贪吃ღ大魔王
04-22 2347
js点击出现二级菜单，点击二级菜单主菜单换成二级菜单 点击出现二级菜单 <style> *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red;
JavaScript实现二级联动下拉菜单(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 762
JavaScript实现二级联动下拉菜单(附完整源码)
JavaScript学习笔记：二级菜单-完成基本功能
薛定谔的猫
10-08 377
发现一个很神奇的事情，就是当class为collapsed，菜单就会折叠起来。它是将高度设置为25px，那么别的就看不见了，所以叠起来了。但存在问题，当关闭了第一个再次点击，就无法打开了。需求：同时只能有一个打开。...
最简单的纯js实现点击展开二级菜单功能
热门推荐
well2049的博客
05-16 2万+
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下： 如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这
练手小案例：用js实现二级导航
hu_666666的博客
12-25 1432
一分钟学会使用HTML5+CSS3+JS实现二级导航效果，绝对的干货满满！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值