js-鼠标经过显示下拉菜单

本文介绍使用JavaScript控制二级下拉菜单的显示与隐藏。通过onmouseover和onmouseout事件触发,控制CSS样式display属性,实现菜单的展开与收起效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在网页中,下拉菜单的样式非常多,这里介绍一下如何用js代码来控制

分析:1、效果:控制样式display的显示和隐藏

          2、事件:当鼠标经过时onmouseover和当鼠标移出时onmouseout

          3、获取元素:DOM文档对象模型:赋予js控制结构和样式的能力。document.getElementById();获取 元素 通过 id;


如上图所示,鼠标经过一级菜单的时候,二级下拉菜单显示出来:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>二级下拉菜单</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

list-style: none;

}

#one>li{

width: 80px;

height: 40px;

margin: 2px;

background: #d8d8d8;

float: left;

text-align: center;

line-height: 40px;

}

.two{

width: 80px;

height: 160px;

background: #666;

display: none;

}

</style>

<script type="text/javascript">

window.onload=function(){

var oUl=document.getElementById('one');

var aLi=oUl.children;//获取第一级菜单的四个子标签

for (i=0;i<aLi.length;i++) {

aLi[i].onmouseover=function(){

this.children[0].style.display='block';

};

aLi[i].onmouseout=function(){

this.children[0].style.display='none';

};

}

};

</script>

</head>

<body>

<ul id="one">

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

</ul>

</body>

</html>


以上代码还可以整理一下,实现各种炫酷的下拉菜单,

1、通过控制二级下拉菜单的高度从0到它本身的height(还可以加上缓冲运动的效果和渐隐渐现的效果);

2、通过控制二级下拉菜单的宽度从0到它本身的width(还可以加上缓冲运动的效果和渐隐渐现的效果);

3、通过控制二级下拉菜单的位置从频幕左侧运动过来或从屏幕上方往下运动;

4、通过控制二级下拉菜单的透明度opacity的值从0到1(即渐隐渐现)

等等;

.......

.......

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值