JS 实现折叠式菜单
来源：互联网 发布：数据库管理员工作业绩 编辑：程序博客网 时间：2024/04/30 14:34
最近在做一个网站系统， 参考网站上面有一个折叠式的菜单， 觉得好玩查看了一下它的源代码学习了一个。
以下是我的源代码：
<html>
<head>
<title>折叠式菜单</title>
<style type="text/css">
<!--
/*设置菜单样式*/
.menuHead{font-weight: bold; font-size : larger ; background-color : #9999ff ;}
.menuChoices{background-color:#cc99ff; width : 180px ;}
.menu a{color:#000000; text-decoration : none ;}
.munu a:hover{text-decoration:underline;}
/*菜单定位*/
#menu1 {position:absolute; top : 80px ; left : 10px ; width : 200px ;}
#menu2 {position:absolute; top : 80px ; left : 230px ; width : 200px ;}
#menu3 {position:absolute; top : 80px ; left : 450px ; width : 180px ;}
-->
</style>
<script type="text/javascript">
<!--
(document.getElementById ? DOMCapable=true :DOMCapable=false);
function hide(menuName){
if(DOMCapable){ //仅对DOM浏览器隐藏菜单
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility='hidden';
}
}
function show(menuName){
if(DOMCapable){
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility='visible';
}
}
//-->
</script>
</head>
<body>
<center><h1>折叠式下拉菜单</h1></center>
<!-- 使用onmouseover和mouseout来控制菜单显示和隐藏-->
<div id="menu1" class="menu" onmouseover="show('menu1');" onmouseout="hide('menu1');">
<!--显示菜单-->
<div class="menuHead" >搜索引擎站点</div>
<div id="menu1choices" class="menuChoices">
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
</div>
</div>
<!--使用onmouseover和mouseout来控制菜单显示和隐藏-->
<div id="menu2" class="menu" onmouseover="show('menu2');" onmouseout="hide('menu2');">
<div class="menuHead" >电子商务站点</div>
<div id="menu2choices" class="menuChoices">
<a href="http://www.baidu.com">百度<br>
<a href="http://www.sina.com">百度<br>
<a href="http://www.sina.com">百度<br>
<a href="http://www.sina.com">百度<br>
<a href="http://www.sina.com">百度<br>
</div>
</div>
<!--使用onmouseover和mouseout来控制菜单显示和隐藏-->
<div id="menu3" class="menu" onmouseover="show('menu3');" onmouseout="hide('menu3');">
<div class="menuHead" >教务站点</div>
<div id="menu3choices" class="menuChoices">
<a href="http://www.baidu.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
</div>
</div>
<script type="text/javascript">
<!--
if(DOMCapable){ //不对JS以及旧版本浏览器隐藏菜单
hide("menu1");
hide("menu2");
hide("menu3");
}
//-->
</script>
</body>
</html>
- JS 实现折叠式菜单
- JS实现折叠式导航菜单
- spry框架实现折叠式菜单
- Jquery实现导航菜单折叠式效果
- jquery实现折叠式（手拉风琴）菜单
- 创建折叠式导航菜单
- 折叠式侧滑菜单
- 折叠式的菜单
- 折叠式列表菜单模板设计
- javascript之折叠式二级菜单
- 使用CoordinatorLayout实现折叠式ToolBar
- javascript实例教程(3) 创建折叠式导航菜单
- Javascript实例教程(2) 创建折叠式导航菜单
- Javascript实例教程(2) 创建折叠式导航菜单
- jquery制作折叠式菜单（Accordion）
- 网页底部圆形可折叠式导航菜单
- js实现弹出式菜单
- JS实现菜单样式
- （转帖）关于程序发展的一些看法
- (转帖)ServletContext与ServletConfig的简单介绍
- 不能重载的字符串
- 第四课 枚举法
- 在校生如何开始学习数据库（四） oracle创建oracle数据库对象
- JS 实现折叠式菜单
- 怎样应用数据库？
- 全球论坛联盟
- 新手来啦 努力ing
- 趣味理解ADO.NET对象模型
- 计数器模块
- 其实很多男孩都不知道
- 真正爱你的女孩
- 真正爱你的男孩
