如何做首页的悬浮导航菜单?

jmyz_0455 2016-04-02 10:35:39
我需要在网页顶部的菜单栏中添加一个按钮,点击这个按钮时会弹出一个悬浮框,其内容是固定的,不需要用到数据绑定或Ajax。这个悬浮框的位置就紧紧贴在按钮下面。

效果类似于CSDN顶部菜单,只不过我不是把鼠标放上去的时候就有悬浮框,而是点击的时候才有。我一开始的时候用的是div来做,display用于控制显示或隐藏,但发现了三个问题:

一、由于顶部的菜单栏是个母版页,所以不知道是不是这样的原因,导致了这个悬浮的div总是跟内容页的内容叠在一起,即便给悬浮框设置了z-index也没用,能不能让这个悬浮的div紧跟按钮下面又能显示时置于页面最上层呢?

二、有可能是问题一的缘故,我在悬浮框设置了鼠标离开事件,但是鼠标没移动到到div本身,而是移动到div的填充内容(padding)后离开,也会触发鼠标离开事件,能不能让鼠标移动事件更加准确呢?

三、作为HTML标签的li标签,怎样才能在被点击的时候,会触发像.NET服务器控件的鼠标点击事件(OnClientClick()),请问怎么添加这个点击事件呢?我主要是想在点击不同li时在后台触发不同的鼠标点击事件。

这两个问题求解,以下是相关代码,谢谢。


<input type="button" id="btnth" runat="server" class="topth" onclick="display('divth')" value="按钮"/>
<div id="divth" style="display:none;" class="ndiv" onmouseout="hide('divth')">
<ul>
<li><a>选择项</a></li>
<li><a>选择项</a></li>
<li><a>选择项</a></li>
</ul>
</div>


function display(id)
{
document.getElementById(id).style.display="block";
}
function hide(id)
{
document.getElementById(id).style.display = "none";
}


.ndiv
{
margin-top: -10px;
padding-right: 10px;
width: 136px;
height: 110px;
float: right;
z-index:999;
}

.ndiv ul
{
list-style-type:none;
background-color:White;
}

.ndiv ul li
{
text-align:center;
display: block;
}

.ndiv ul li:hover
{
background-color:Gray;
}

没邀请人就不小心按了回车提交,有什么办法继续邀人嚒?
...全文
394 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
範先森 2016-04-03
  • 打赏
  • 举报
回复
在你需要下拉的地方再放一个<ul>标签,标签display: none;然后那块DIV加个hover属性,当鼠标移上的时候<ul>属性display: block;大概就这么做,具体样式可以自己设置

62,242

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧