javaScript制作下拉表格
2011-06-02 22:49
225 查看
制作网页菜单时,我想把鼠标移过来,出现一下拉表格,在表格内选一个超链接,如何实现
JSP实现的,如果想改变网格布局用或者颜色什么的用css自己慢慢调吧。
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#" class="STYLE1">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a>|<a href="#">栏目1->菜单2</a>
<a href="#">栏目1->菜单3</a>
<a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
<li><a href="#">栏目2->菜单5</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3</a>
<ul>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单1</a>
<ul>
<li><a href="#">菜单1->子菜单1</a></li>
<li><a href="#">菜单1->子菜单2</a></li>
<li><a href="#">菜单1->子菜单3</a></li>
<li><a href="#">菜单1->子菜单4</a></li>
</ul>
</li>
<li><a href="#">栏目3->菜单2</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单3</a>
<ul>
<li><a href="#">菜单3->子菜单1</a></li>
<li><a href="#">菜单3->子菜单2</a></li>
<li><a href="#">菜单3->子菜单3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
相关文章推荐
- javaScript制作下拉表格
- 使用EXCEL 2007制作表格时,在下拉过程中使表头固定不动 冻结窗格(转载)
- JavaScript制作表格
- Javascript调用XML制作连动下拉列表框
- Javascript 调用XML制作连动下拉框
- 用JavaScript制作关联下拉选择框
- javascript编程小练习--制作一个表格,动态增加删除显示班级的学生信息。
- Javascript调用XML制作连动下拉框
- 制作一个表格,显示班级的学生信息——javascript
- javascript结合Ajax制作的可编辑表格代码
- 在使用jQuery+HTML+Javascript的简单例子---很容易的制作双色表格
- Office 学习之路 --------excel 控件+函数制作动态表格
- javaScript实现网页表格打印功能
- JavaScript动态操作表格,添加,删除行、列及单元格
- 制作一个漂亮的表格
- WinForm DataGridView制作表格
- html5+javascript制作简易画板
- [ChneChen的技术心得][THML代码]1px边框表格制作谈
- 页面表格实现不刷新排序 - javaScript
- javascript全选反选全不选各种选最简单的制作方法