用層模擬下拉菜單(JS下拉菜單)

最新推荐文章于 2024-02-09 17:33:18 发布
最新推荐文章于 2024-02-09 17:33:18 发布
阅读量1.2k 收藏
点赞数
分类专栏： Script 文章标签： menu function vbscript border javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xndiy07/article/details/3519900
版权

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>MENU TEST</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
 if(v=='show')
    {
       //alert(document.all(obj.id+'_25175').href);
    var pos=GetObjPos(document.all(obj.id+'_K'));
       //alert(pos.x);
       obj.style.left=pos.x;
       obj.style.top=pos.y+26;
    }
 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<script type="text/javascript">
function CPos(x, y)
{
    this.x = x;
    this.y = y;
}
//获取控件的位置
function GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
   
    var target = target.offsetParent;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
       
        target = target.offsetParent
    }
   
    return pos;
}
</script>
</head>

<body>
<div id="menu1" style="position:absolute; left:14px; top:114px; width:200; height:150; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')">
  <table width="200" height="150"  border="0" cellpadding="5" cellspacing="1" bgcolor="#C4EAFF">
    <tr>
      <td valign="top" bgcolor="#FFFFFF">
   <p><a href="#">0000000000000000</a></p>
      <p>2222222222</p>
      <p>3333333333333333</p>
      <p>44444444444444444</p></td>
    </tr>
  </table>
</div>
<table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="21"><img src="/images/2-2_05.jpg" width="21" height="31" alt="" /></td>
        <td background="/images/2-2_06.jpg"><div align="center"><strong>
  <a href="#">首页</a>&nbsp;|&nbsp;
  <a id="menu1_K" name="menu1_K" onMouseOver="MM_showHideLayers('menu1','','show')" href="#">公司简介</a>&nbsp;|&nbsp;
  <a href="#">信息专栏</a>&nbsp;|&nbsp;
  <a href="#">对外交流</a>
  </strong></div></td>
        <td width="17"><img src="/images/2-2_08.jpg" width="17" height="31" alt="" /></td>
      </tr>
</table>
</body>
</html>

xndiy07
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript模拟下拉菜单代码
10-30
在JavaScript编程中，模拟下拉菜单是一项常见的任务，特别是在网页设计和开发中。这个场景中，作者面临的需求是在一个非Windows主题风格的项目中创建一个自定义的下拉菜单。以下将详细介绍如何使用JavaScript实现...
【JS】模拟下拉菜单
xxxxxwxx的博客
08-22 976
鼠标点击时，下拉菜单出现鼠标划过或按键盘上下箭头时，选中的菜单背景色变化，选项内容显示在输入框内鼠标点击或按下回车或空格键时，对应的内容显示在输入框内且下拉菜单消失。
JS--模拟下拉菜单
万国
02-28 173
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS--模拟下拉菜单</title> <style type="text/css"> #box { width: 220px; height: 30px; margin...
js实现下拉菜单
weixin_62485207的博客
08-23 854
运用jQuery方便快捷的实现下拉菜单。
Js模拟下拉框（select-option）的实现
最新发布
weixin_42017221的博客
02-09 458
【代码】Js模拟下拉框（select-option）的实现。
用js来模拟下拉菜单
xxgTX的博客
10-15 970
我们在网站上看到的下拉菜单，有些是通过js来模拟的，那么怎么模拟呢，可以借鉴一下以下思路： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cont{wid...
js模拟点击select下拉菜单列表代码
11-19
本文将详细讲解如何使用JavaScript来模拟点击一个`<select>`元素，从而展示其下拉菜单列表。`<select>`是HTML中用于创建下拉列表的标签，用户通常需要点击才能展开选项，但有时为了实现特定的交互效果，我们可能需要...
js+CSS实现模拟华丽的select控件下拉菜单效果
10-23
主要介绍了js+CSS模拟select控件下拉菜单效果,通过javascript鼠标事件结合css控制实现select下拉菜单效果,整体效果华丽美观,需要的朋友可以参考下
JS模拟bootstrap下拉菜单效果实例
10-22
主要介绍了JS模拟bootstrap下拉菜单效果,结合完整实例形式分析了javascript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS模拟下拉选项框
11-16
js模拟select下拉菜单控件的代码(多种样式)，需要的朋友可以参考一下
js实现树型下拉菜单
11-07
用js实现树型下拉菜单
JS模拟select下拉菜单
10-29
JS模拟select下拉菜单
使用js实现简单的下拉菜单
qq_52622178的博客
08-05 5590
全部代码如下，详细注释已在代码注释中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
运用js简单模拟下拉菜单
old_village的博客
02-12 887
在各个网站上，基本上点击导航栏中的标签都会弹出下拉菜单，这里用js代码简单的实现一下： 第一步：先对要隐藏的下拉菜单进行设置 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp
js模拟的下拉菜单-----起飞
XixiziMeng的博客
01-05 191
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .select{width: 200
原生JS实现下拉菜单操作
qq_64469057的博客
12-21 2439
原生js
使用js模拟下拉菜单-鼠标-键盘
weixin_45195822的博客
08-31 385
使用js模拟下拉菜单 我们都知道HTML的原生下拉菜单的样式很单一，不美观，且有些样式难以修改，我们可以通过js模拟一个下拉菜单，这样就会比较方便操作它的样式了。 这里我们使用ul来模拟下拉框： <div class="box"> <span>空当接龙</span> <ul> <li ...
js模仿下拉菜单制作
鲸落鹿林
09-01 929
简单下拉菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
html下拉列表插件,js+CSS实现模拟华丽的select下拉菜单效果
05-11
这里给出一个简单的实现，使用了jQuery和CSS来模拟下拉菜单效果。 HTML代码： ``` <div class="custom-select"> <select> <option value="">请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select> </div> ``` CSS代码： ``` .custom-select { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.5; color: #333; } .custom-select select { display: none; } .custom-select::after { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); content: "\f107"; font-family: "FontAwesome"; font-size: 14px; color: #999; pointer-events: none; } .custom-select.open::after { content: "\f106"; color: #666; } .custom-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; display: none; max-height: 240px; overflow-y: auto; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .custom-select.open .custom-select-dropdown { display: block; } .custom-select-dropdown-option { padding: 8px 12px; font-size: 14px; line-height: 1.5; color: #333; cursor: pointer; } .custom-select-dropdown-option:hover { background-color: #f5f5f5; } ``` JavaScript代码： ``` $(document).on("click", function(e) { var $target = $(e.target); if ($target.closest(".custom-select").length) { $target.closest(".custom-select").toggleClass("open"); } else { $(".custom-select").removeClass("open"); } }); $(".custom-select select").on("change", function() { var text = $(this).find("option:selected").text(); $(this).closest(".custom-select").find(".custom-select-text").text(text); }); $(".custom-select select").each(function() { var $this = $(this), numberOfOptions = $(this).children("option").length; $this.addClass("s-hidden"); $this.wrap('<div class="custom-select"></div>'); $this.after('<div class="custom-select-text">' + $this.children("option").eq(0).text() + '</div>'); var $dropdown = $('<div class="custom-select-dropdown"></div>'); for (var i = 0; i < numberOfOptions; i++) { $dropdown.append('<div class="custom-select-dropdown-option">' + $this.children("option").eq(i).text() + '</div>'); } $this.after($dropdown); }); ``` 这段代码的实现原理是： 1. 隐藏原生的下拉菜单，并在其外部包裹一个自定义的容器。 2. 在容器中添加一个显示当前选项的文本框，以及一个下拉菜单容器。 3. 遍历所有选项，把它们添加到下拉菜单容器中。 4. 绑定点击事件，让点击自定义下拉菜单的容器时，切换下拉菜单的显示状态。 5. 绑定下拉菜单选项的点击事件，让其选中对应的选项，并更新文本框的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值