<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TableAutoList.aspx.cs"
Inherits="AjaxDEMO.TableAutoList" %>
<!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>
<title>鼠标移到导航上 显示下拉菜单功能 </title>
<script type="text/javascript">
function setList(control)
{
var child = document.getElementById("setChild");
var td2 = document.getElementById(control);
var t=td2.offsetTop;
var l=td2.offsetLeft;
child.style.position="relative" ;
child.style.left = l;
child.style.top = t ;
child.style.display="block";
// var t=document.getElementById("set").offsetTop;
// var l=document.getElementById("set").offsetLeft;
// alert(l);
}
function outList()
{
document.getElementById("setChild").style.display="none";
}
</script>
</head>
<body>
<form method="post" action="TableAutoList.aspx" id="form1">
<div>
<table id="navigation">
<tr>
<td id="index">
<a id="A" title="首页" href="DropAutoList.aspx">首页</a>
</td>
<td id="set" onmousemove="setList('set')" onmouseout="outList()">
项目1
</td>
<td id="Td3">
<a href="DropAutoList.aspx" onmousemove="setList('Td3')" onmouseout="outList()">项目2</a>
</td>
<td id="Td4">
<a href="DropAutoList.aspx" onmousemove="setList('Td4')" onmouseout="outList()">项目3</a>
</td>
<td id="Td5">
<a href="DropAutoList.aspx" onmousemove="setList('Td5')" onmouseout="outList()">项目4</a>
</td>
<td id="Td6">
<a href="DropAutoList.aspx" onmousemove="setList('Td6')" onmouseout="outList()">项目5</a>
</td>
<td id="Td2" onmousemove="setList('Td2')" onmouseout="outList()">
项目6
</td>
</tr>
</table>
</div>
<div id="setChild" style="display: none">
<table>
<tr>
<td>
条幅1
</td>
</tr>
<tr>
<td>
条幅2
</td>
</tr>
<tr>
<td>
条幅3
</td>
</tr>
<tr>
<td>
条幅4
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
分享到：
相关推荐
Jquery鼠标悬停滑动下拉菜单代码是一款蓝色风格样式的jquery导航菜单。
主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
鼠标移到主导航菜单上即可显示其子下拉菜单，非常流行的样式
js 实现 鼠标移到下拉框时自动全部打开! 值得下载看看!资源免费,大家分享!!
这款菜单是这样的：当你把鼠标移在按钮上的时候，点击按钮，会向下拉出一个带图形（图标）的菜单，图形可以起到美化菜单的作用，让菜单不再单调，变得更美观实用。此款下拉菜单也有助于你研究jquery动画的生成原理。
主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下
jquery缓冲下拉导航菜单特效是一款带有下拉二级栏目的一级栏目的右边显示向下的箭头按钮，鼠标移到箭头按钮上才滑动下拉显示二级导航栏目。功能简单而且实用通过CSS样式与jquery代码的结合来实现。
<TITLE> 二级下拉特效 ; charset=utf-8" http-equiv=Content-Type> <META name=GENERATOR content="MSHTML 8.00.6001.19222"></HEAD> <li><a class="topa" href="http://www. .com">首页</a></li> ...
利用jquery+jdMenu实现浮动式、下拉式菜单，当鼠标移到菜单上面时，会向下或向右弹出子菜单
一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图，如下： 在这个案例主要用到的知识有：设置...
asp.net利用.net控件实现下拉导航菜单的制作 今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下： 将鼠标移到父菜单上弹出3个子菜单，而且每个子菜单都有超链接。
JavaScript写的模仿《穿越火线》官网导航菜单，与以往下拉菜单不同的是，这次鼠标移到按钮上后，全部二级栏目都会显示出来，清晰美观
使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果。 1、下拉菜单的实现 当鼠标移入指定元素时，显示下拉菜单。代码如下： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head>...
jquery缓冲下拉导航菜单特效是一款带有下拉二级栏目的一级栏目的右边显示向下的箭头按钮，鼠标移到箭头按钮上才滑动下拉显示二级导航栏目。功能简单而且实用通过CSS样式与jquery代码的结合来实现。
今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下： 将鼠标移到父菜单上弹出3个子菜单，而且每个子菜单都有超链接。 以下是我自己做的代码： 代码如下: <asp:Menu ID=”Menu1″ runat=”server” ...
33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用Banner大图片横向切换效果 36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色...
例如,当显示第四张图片时，右侧的数字4变为白色，背景变为橙色，并且当鼠标移到某个数字按钮上时，左侧显示对应的图片，并且数字按钮的字体颜色变为白色，数字按钮的背景颜色变为橙色 5、Tab切换特效,使最新上架内容...
鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView某一行时改变该行的背景色方法二 GridView实现删除时弹出确认对话框 GridView实现自动编号 GridView实现自定义时间货币等字符串格式 GridView...
菜单可通过键盘正确访问，并且像已建立的桌面应用程序菜单一样具有优美的外观，例如行为良好的子菜单，即使用户在向子菜单的下拉菜单移动时将鼠标短暂移至其他菜单项上，这些菜单仍保持打开状态。 此项目与其他...
用于QTreeView、QTableView、QTreeWidget、QTableWidget的定制QHeaderView，实现类似Windows资源管理器中标题栏的效果：鼠标移到标题栏显示箭头按钮，点击后显示下拉菜单，菜单支持多选checkbox。可方便的显示/隐藏...