javascript-下拉菜单的实现

最新推荐文章于 2022-08-11 20:11:04 发布
最新推荐文章于 2022-08-11 20:11:04 发布
阅读量517 收藏
点赞数
分类专栏： JavaScript
<html>
<head>
<title>下拉菜单示例</title>
<script language="javascript">
//当鼠标移到菜单选项的时候显示对应的DIV
function show(menu)
{
document.getElementById(menu).style.visibility="visible";
}
//当鼠标移出的时候隐藏所有的DIV
function hide()
{
document.getElementById("menu1").style.visibility="hidden";
document.getElementById("menu2").style.visibility="hidden";
document.getElementById("menu3").style.visibility="hidden";
}
</script>
</head>
<body>
<table>
<tr bgcolor="#9999FF">
<td width="80" onMouseMove="show('menu1')" onMouseOut="hide()">菜单一</td>
<td width="80" onMouseMove="show('menu2')" onMouseOut="hide()">菜单二</td>
<td width="80" onMouseMove="show('menu3')" onMouseOut="hide()">菜单三</td>
</tr>
</table>
<div id="menu1" onMouseMove="show('menu1')"
onMouseOut="hide()" style="background:#9999FF;position:absolute;left=12;top=38;width=80;
visibility=hidden">
<span>子菜单一</span><br>
<span>子菜单二</span><br>
<span>子菜单三</span><br>
</div>
<div id="menu2" onMouseMove="show('menu2')"
onMouseOut="hide()" style="background:#9999FF;position:absolute;left=95;top=38;width=80;
visibility=hidden">
<span >子菜单一</span><br>
<span>子菜单二</span><br>
<span>子菜单三</span><br>
</div>
<div id="menu3" onMouseMove="show('menu3')"
onMouseOut="hide()" style="background:#9999FF;position:absolute;left=180;top=38;width=80;
visibility=hidden">
<span >子菜单一</span><br>
<span>子菜单二</span><br>
<span>子菜单三</span><br>
</div>
</body>
</html>
IT技术与企业应用结合的爱好者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端入门篇（四十六）JS应用1二级下拉菜单问题记录
m0_63174811的博客
04-02 697
讨论2：将底部的边框设置为none，并加高菜单的高度（从42px加为43px），遮住li边框的下边缘（毛刺）也将悬浮时的下边框去掉，以符合下拉菜单最终的效果.nav-list {background-color: #808080;height: 43px;}.nav-list > li > a {color: #fff;display: block;height: 42px;line-height: 42px;font-size: 18px;padding: 0 12px;border:1px solid
原生JavaScript技术，jQuery实现下拉菜单
weixin_46433198的博客
07-28 1475
利用onMouseOver 和 onMouseOut 事件来触发一个自定义的 change() 函数，实现了鼠标悬停时显示下拉菜单，鼠标移出时隐藏下拉菜单的效果。我是小p，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！onMouseOver 和 onMouseOut 事件所含不同参数决定了他们各自实现的效果不同。作为选择器，在函数中选中对应元素。来决定何时显示，何时隐藏下拉菜单。设置下拉菜单div的样式是否可见。实现下拉菜单的下滑与收起。
设置下拉菜单的几种方法
BambooStrip的博客
08-11 2401
下拉菜单实现方法
用Javascript实现下拉菜单
茂茂的博客
01-28 3154
用Javascript实现下拉菜单 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 下拉菜单，或者侧拉菜单在实际开发当中非常的实用 最近学到了这里那就上传博客分享一下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。 那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()
JavaScript 下拉菜单实现代码
10-29
至此，一个基本的JavaScript和CSS下拉菜单就实现了。用户只需将鼠标悬停在主菜单上，就可以看到对应的子菜单出现。这种交互方式简洁高效，是网页导航设计中的常见手法。 为了在实际项目中应用这个下拉菜单，可以将...
JavaScript模拟下拉菜单代码
10-30
在JavaScript编程中，模拟...总结来说，这个JavaScript模拟下拉菜单的案例涵盖了HTML结构、CSS样式设计以及JavaScript交互实现。通过这样的实践，开发者可以更好地理解和掌握Web前端开发中的动态交互和响应式设计技术。
JavaScript简单下拉菜单实例代码
10-23
JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航结构，通常用于网站的顶部导航栏。在这个实例中，我们将探讨如何使用JavaScript和CSS来创建一个简单的下拉菜单，并实现渐显效果。 首先，HTML结构是...
CSS+JavaScript分别实现下拉菜单效果
02-15
利用CSS和JavaScript分别实现简单的下拉框效果，简单实用，容易上手
利用JavaScript实现下拉菜单
勤能补拙
01-14 6343
实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。 CSS： * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; } #list { width: 300px; margin: 50px; fon...
下拉菜单
03-07
点击出现下拉菜单
ul下拉菜单
11-15
五种实用简洁的系统头部下拉菜单框，使用ul列表实现。
js实现简单的导航下拉菜单
qq_29026593的博客
12-19 5737
div class="navigation_bg">                 li id="nav1">a class="aNav" href='/shyf201507217894/index.aspx'>首页a>li>           li id="nav2" name="公司简介">              a class="aNav" h
javascript设置下拉菜单注意事项
一个真正靠自己的人才会懂得珍惜什么
08-28 2170
一个下拉菜单搞了我整整3天都没有解决，问了很多人，发了很多贴，都没有我想要的那种效果，一个是代码太多，烦琐，不知道为什么就要实现一个显示和隐藏菜单这么简单的功能都要写那么复杂。我个人是比较反感的。所以经过我几天的实践，终于把问题给解决了。主要原因是层的问题，不是javascript代码问题. //显示菜单function setDivDisplay(divName) {    var v =
JavaScript案例——实现下拉菜单
wing_annuan的博客
11-26 987
可以利用键盘上下键进行选取，回车键进行选中 思路： 1、获取网页元素 2、输入框获取焦点时显示下拉菜单 3、输入框失去焦点时隐藏下拉菜单 4、键盘上下方向键选择下拉菜单 5、回车键把当前选中菜单文字写入输入框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...
js代码实现下拉菜单
u011927449的博客
12-13 2065
效果 js代码： <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = li.getElements...
网 页 中 下 拉 菜 单 的 设 计
zl198183的专栏
10-22 2125
在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清晰，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。 　　下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包
磁力链磁力链磁力链.txt
最新发布
07-22
磁力链
javascript实现下拉菜单效果
03-29
以下是一个简单的HTML和JavaScript代码示例，用于实现下拉菜单效果： HTML代码： ``` ()" class="dropbtn">下拉菜单 <div id="myDropdown" class="dropdown-content"> 选项1 选项2 选项3 ``` CSS代码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值