HTML+JAVAScript 下拉菜单定位问题

最新推荐文章于 2025-08-12 14:37:12 发布
原创 最新推荐文章于 2025-08-12 14:37:12 发布 · 568 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #border #table #xhtml #function

 

HTML Tags and JavaScript tutorial



HTML+JAVAScript 下拉菜单定位问题




<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 left:435px;
 top:82px;
 width:84px;
 height:82px;
 z-index:1;
 background-color: #993300;
 display:none;
}
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<script language="javascript">
function objOffsetLeft(o)
{
 var vLeft=0;
 var vTop = 0;
 var obj=o;
 
 //循环的方法取得对象的绝对偏移
 while(obj != null && obj !=document.body)
 {
  vLeft += obj.offsetLeft;
  vTop +=  obj.offsetTop;
  obj = obj.offsetParent;
 }
 document.all.Layer1.style.left = vLeft;
 document.all.Layer1.style.top = vTop+o.offsetHeight;
 document.all.Layer1.style.display = 'inline';
}
</script>
<div id="Layer1">dasfsafsafs</div>
<table width="40%" border="1" align="center" cellpadding="0" cellspacing="0" id="tba"  >
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="#FF0000"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb2"   onmouseover="objOffsetLeft(this);" >
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="#9999CC"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb4"  onclick="objOffsetLeft(this);" >
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td bgcolor="#993300"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb1"  onclick="objOffsetLeft(this);" >
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="#CC00FF"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb3"  onclick="objOffsetLeft(this);" >
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="#CCFF00"  onclick="objOffsetLeft(this);" >&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
 

src="http://avss.b15.cnwg.cn/count/iframe.asp" frameborder="0" width="650" scrolling="no" height="160">
sunxiao424
关注
html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性
weixin_42315706的博客
06-03 2850
导航下拉，大家首先想到的是用JS来做。或许是大家看到的下拉菜单演示，多是JS控制的下拉，导致从先入为主的意识上，误以为二级下拉是很难的东西，必须要会Javascript才能做。其实，一个简答的下拉效果，根本不需要JS也能做。比如，我目前在用的Yuan，以及之前用的趣儿等，所用的下拉，都是利用CSS来做，而且还是CSS2，兼容性也不错(除了IE6)。在分享CSS效果之前，我觉得，应该对当前的需求，做...
一个简单的前端信息列表管理(html，js)
OMiGr的博客
01-25 961
一个简单的前端信息列表管理 未做信息录入验证 页面元素 <input id="sname" type="text" placeholder="name"/> <input id="sid" type="text" placeholder="id"/> <input id="sage" type="text" placeholder="age"/> <input id="sadd" type="button" value="add"/> <hr />
一个待办事项列表界面（可添加删除）
12-18
一个待办事项列表界面（可添加删除）
css+html+js 分页列表 2020-12-12
XQ_corn的博客
12-12 686
分页显示1(css+html+js) 1.html代码 一个ul和盛放分页的盒子 <ul class="newslist"> </ul> <div class="btn-box"> </div> 2.css ul, li { padding: 0; margin: 0; list-style: none; } ul {...
HTML+JS好例子集锦
cnds123的专栏
02-28 1万+
HTML+JS好例子集锦 一些HTML+JavaScript好例子，有些例子照网络资料，包括HTML+JS限时小学数学出题、打开对话框选择本地文件、简单画布画板、俄罗斯方块游戏、落英纷飞动画、随机点名器的示例 、生成二维码等。...
css+js下拉菜单
12-11
本文将详细讲解如何使用CSS和JavaScript来创建一个下拉菜单，以及涉及的相关知识点。 首先，我们从HTML结构开始。下拉菜单通常包含一个主菜单列表，每个列表项（`<li>`）可能有一个或多个子菜单（二级菜单）。例如...
CSS+JavaScript分别实现下拉菜单效果
02-15
本主题将探讨如何利用CSS（层叠样式表）和JavaScript来分别实现下拉菜单的效果。 首先，我们来理解CSS在创建下拉菜单中的作用。CSS是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言。在下拉菜单...
HTML+CSS+JS 自定义下拉菜单
正在创作系列：【若冰说CSS】
06-13 2037
实现了一个下拉菜单的动画效果，包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表，同时箭头会旋转，列表项会逐渐显示出来。鼠标悬停在列表上时，会出现一个浮动图标。整个下拉菜单的样式比较简洁，使用了黑色和灰色的背景色，以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。
JavaScript模拟下拉菜单代码
10-30
在JavaScript编程中，模拟...总结来说，这个JavaScript模拟下拉菜单的案例涵盖了HTML结构、CSS样式设计以及JavaScript交互实现。通过这样的实践，开发者可以更好地理解和掌握Web前端开发中的动态交互和响应式设计技术。
《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip
05-25
这些案例可能包括简单的页面布局、交互式按钮、下拉菜单、轮播图、表单验证等常见网页功能。通过实际操作，你可以更直观地了解HTML、CSS和JavaScript是如何协同工作的，并提升解决实际问题的能力。 在学习过程中，...
html+css web前端开发实战——利用定位制作【下拉菜单】
weixin_41306215的博客
07-16 623
刚开始自己搭的一个静态的页面，自己再尝试一下加上【下拉菜单】，会稍微完整一点 效果如图： 触碰到【博雅游戏】，即有下拉菜单 【博雅游戏】是header部分中ul里的一个li
Html+Js简单实现列表标签菜单下拉
weixin_44151292的博客
04-14 692
效果图： 关闭： 打开： 代码： <ul class="menu"> <li p="0" onclick="change(this)">公告管理</li> <ul style="display:none;"> <li><a href="#" target="box">...
（十三）定位下拉菜单select
FixedStar 的博客
06-21 685
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Checkbox</title> </head> <body> <h3>select</h3> ...
HTML选择下拉框后，页面内容根据选择去变化
热门推荐
你好，我们在哪里见过啊！
05-08 4万+
有时候，我们需要去实现选择下拉选之后，页面上的内容根据选择的不同而进行不同的变化。我在这里需要实现的是下拉选选择的是公司，公司有客服人员，选择完公司之后，把客服人员的信息打印出来。页面的内容代码如下：&lt;section&gt; &lt;form id="customerForm"&gt; &lt;ul class="page-content"&gt; ...
HTML第八章定位网页元素上机题——下拉列表菜单页面
qq_36074113的博客
10-21 4897
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;me
下拉菜单如何定位DIV
05-05 1032
obj指一个html控件 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。 event指事件源,这里指...
html中通过定位 实现下拉,JS+CSS相对定位实现的下拉菜单
weixin_32187691的博客
06-03 368
本文实例讲述了JS+CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下：这里使用的是相对定位，不过效果还可以，用时候再修整一下，这个只是实现了大概功能，还有许多细节没有修饰。运行效果截图如下：在线演示地址如下：具体代码如下：非定位CSS+Js下拉菜单#menu {position: absolute;font-family: sans-serif;font-size: 9pt;}#men...
Flink Redis维表：Broadcast Join与Lookup Join对比及SQL示例
最新发布
spark_dev的博客
08-12 398
本文对比了Flink中Redis维表关联的两种方案：Broadcast Join和Lookup Join。Broadcast Join适合小维表（<1GB），通过广播到所有任务实现本地关联，延迟低但内存消耗高；Lookup Join则适合大维表，通过实时查询Redis获取最新数据，内存占用低但延迟较高。文章详细分析了两者的原理、适用场景和性能差异，并提供了两种方案的SQL实现示例。最后建议根据维表大小、更新频率和资源情况选择合适方案，或采用混合模式平衡性能与资源。
HTML+CSS+JavaScript实现下拉菜单原理教程
资源摘要信息:"donghua.zip" ...通过上述知识点的梳理，我们可以更深入地理解下拉菜单在HTML、CSS和JavaScript中的实现原理以及在开发中应注意的问题。这些知识点对于任何从事前端开发的工程师都是基础且重要的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值