利用JavaScript+DIV+CSS实现下拉菜单。当鼠标移动到菜单选项的时候显示对应的DIV：function show(menu)。当鼠标移出的时候隐藏所有的DIV：function hide(...

最新推荐文章于 2022-07-20 18:54:00 发布
最新推荐文章于 2022-07-20 18:54:00 发布
阅读量677 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liao-pxsoftware15/p/7636035.html
版权

<!--程序ch02_11_Menu.html-->
<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" align="center">
<td width="120"onMouseMove="show('menu1')" onMouseOut="hide()">系列课程</td>
<td width="120"onMouseMove="show('menu2')" onMouseOut="hide()">教学课件</td>
<td width="120"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:120;
visibility:hidden">
<span>c++程序设计</span><br>
<span>java程序设计</span><br>
<span>c#程序设计</span><br>
</div>
<div id="menu2"onMouseMove="show('menu2')" onMouseOut="hide()"
style="background:#9999FF;position:absolute;left:137;top:38;width:120;
visibility:hidden">
<span>c++课件</span><br>
<span>java课件</span><br>
<span>c#课件</span><br>
</div>
<div id="menu3"onMouseMove="show('menu3')" onMouseOut="hide()"
style="background:#9999FF;position:absolute;left:260;top:38;width:120;
visibility:hidden">
<span>c++大纲</span><br>
<span>java大纲</span><br>
<span>c#大纲</span><br>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/liao-pxsoftware15/p/7636035.html

weixin_33720452
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下拉菜单 方法实例
weixin_30241919的博客
10-28 121
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style> /* css*/ #body{ float: left; } #xialakuang{ ...
利用JavaScript+CSS+DIV实现下拉菜单源代码
User20190527的博客
02-02 326
课堂作业：利用JavaScript+CSS+DIV实现下拉菜单 源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜单演示</title> <style type="text/css"> #con { width: 800px; height: 400px; margin: 100px auto;
CSS/Javascript/jQuery实现IE678兼容下拉菜单效果，子菜单不消失办法
xit6482的专栏
12-14 680
一般结构如上，由于a标签中无法嵌套a标签，故ul.sub需要和主菜单a平级。 由于IE6无法支持li:hover，故纯css无法实现，需要用上js 代码写好测试时发现，鼠标经过主菜单li后二级菜单显示，但鼠标一旦离开li，二级菜单就会消失 解决办法： 首先、确保子菜单与主菜单之间无空隙； 其次、确保子菜单ul有background（颜色随意），如果backgrou
mm_menu.js（实现鼠标移入横向显示二级菜单效果）
【平平】的CSDN空间
04-18 1032
mm_menu.js（实现鼠标移入横向显示二级菜单效果）<br />  /**<br /> * mm_menu 20MAR2002 Version 6.0<br /> * Andy Finnell, March 2002<br /> * Copyright (c) 2000-2002 Macromedia, Inc.<br /> *<br /> * based on menu.js<br /> * by gary smith, July 1997<br /> * Copy
鼠标在菜单上移动时显示菜单提示
唸 尐 憂 的 天 空
08-22 1032
标  题: 鼠标在菜单上移动时显示菜单提示 1. 建立工程, 窗体名: Form1 ==> Label控件, 名称: lblStatus                             ==> 建立菜单若干      2. 加入一个模块  窗体中代码:  Private Sub Form_Load()     origWndProc = SetWindowLong(hwnd,
Jquery+div+css鼠标经过下拉菜单
08-04
当鼠标移到`.menu-item`上时，`.find('.submenu')`会选择该菜单项下的子菜单，并调用`.show()`方法使其显示。当鼠标离开时，下拉菜单再次隐藏。 总之，“Jquery+div+css鼠标经过下拉菜单”是一个利用jQuery的事件...
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
10-26
当鼠标移动到某个菜单项上时，`show()`函数会被调用，显示对应的子菜单，并将其定位到菜单项下方。如果之前有一个打开的子菜单，`show()`会先将其隐藏，然后再显示新的子菜单。 ```javascript var cm = null; ...
DIV+CSS+jQ实现省市联动可扩展
09-02
在这个案例中，`<div>`被用来创建一个绝对定位的下拉菜单，用于显示省市列表。通过设置`position`为`absolute`，我们可以精确控制下拉菜单的位置。`width`和`height`属性用于设定菜单的尺寸，而`max-height`属性则...
Bootstrap实现下拉菜单效果
09-02
- **事件监听**：可以通过 JavaScript 监听 `show.bs.dropdown` 和 `hide.bs.dropdown` 事件，以在下拉菜单展开或关闭时执行自定义操作。 5. **响应式行为** Bootstrap 的下拉菜单是响应式的，这意味着在较小的...
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
09-02
在Bootstrap框架中，创建一个交互式的用户界面，如点击下拉菜单项后显示或隐藏不同的输入框，可以增强用户体验并使界面更加灵活。本示例介绍如何实现这一功能，特别是当用户点击下拉菜单的A选项时显示文本输入框，而...
html+css+js实现二级菜单鼠标移动效果
Ariel的博客
10-24 3528
效果图： 大体思路： 鼠标移至头像时，二级菜单出现，鼠标移至二级菜单，可以对子菜单进行选择，鼠标移出子菜单，子菜单消失。 子菜单使用position：absolute绝对定位到父级菜单下方。 &amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt; &amp;amp;lt;img src=&amp;quot;img/index/head.png&amp
Html中鼠标悬停显示二级菜单的两种方法
热门推荐
八十年代的金坛县。
01-20 2万+
charset="UTF-8"> type="text/css"> ul{ list-style: none; float: left; } li{ display: none; } type="text/javascript"> function disp(){ for(var i = 0; i3; i++){ document
【前端积累】二级菜单，鼠标滑过的时候子菜单显示，当鼠标离开的时候子菜单隐藏...
weixin_34075268的博客
11-07 2858
<!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> <...
js实现鼠标放在一级菜单，下滑出二级菜单
dongciqiu0026的博客
10-23 2062
初始状态 鼠标放在tab4上 实现的代码如下 <html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } ...
JavaScript HTML CSS显示隐藏二级菜单（下拉菜单）
qq_44829011的博客
05-15 8120
一级菜单效果如图一所示 按键选项一 至 选项四是一级菜单 当点击选项一时 弹出二级菜单 效果如图二所示（其余一级菜单也有对应的二级菜单） html构造 <body> <div> <ul id='ul_0'> <li><a οnclick="javascript:Foo(); return false;" href="#">二级菜单</a> </li> <li
element Select选择器 通过js自动展开下拉框
weixin_44260928的博客
07-20 5392
element的select的点击事件为toggleMenu函数，我们可以通过调用这个函数触发下拉框的显示。
jquery实现动态菜单
jubincn的专栏
08-23 6700
jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多，都是采用JavaScript操作css的方式。其具体步骤可以分为以下几步：创建一个含有要表达的菜单的html页面 jquery示例2：jquery菜单 我是菜单1 我是子菜单1
JS(javascript)API案例:网页导航栏的下拉菜单效果如何实现？当鼠标移动到列表项上时出现下拉菜单！
Cone0212的博客
04-21 1731
ffsfsf
使用HTML+CSS实现鼠标划过的二级菜单栏
Superman_xing的博客
05-21 2055
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; body{ text-align:center; } .menuDiv{ border:1px solid #aac; overflow:hidden; display:inline-block; } .menuD...
用javascript+css制作下拉菜单
最新发布
06-28
下拉菜单是一种常见的网页菜单形式，可以通过JavaScript和CSS来制作。具体步骤如下： 1. HTML结构：在HTML中创建一个包含下拉菜单的容器，如下所示： ``` <div class="dropdown"> 下拉菜单 <div class="dropdown...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值