JS实现的竖向折叠菜单代码
本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考，具体如下：
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-hxzd-menu-demo/
具体代码如下：
<!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 language = JavaScript>
function showmenu(id) {
var list = document.getElementById("list"+id);
var menu = document.getElementById("menu"+id)
if (list.style.display=="none") {
document.getElementById("list"+id).style.display="block";
menu.className = "title1";
}else {
document.getElementById("list"+id).style.display="none";
menu.className = "title";
}
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
#nav{margin:10px;text-align:center;line-height:25px;width:200px;}
.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
-->
</style>
</head>
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu('1') ">Ajax下载</div>
<div id="list1" class="content" style="display:none">
<ul>
<li>jQuery</li>
<li>Extjs</li>
<li>Mootools</li>
</ul>
</div>
<div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍JS+CSS实现的竖向简洁折叠菜单效果代码，包括了JS+CSS实现的竖向简洁折叠菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码。分享给大家供大家参考，具体如下： 这是一款JS+CSS竖向简洁的折叠菜单，支持三级分类，红色垂直型，个人感觉非常棒，希望大家喜欢。 运行效果截图如下： 在线演示地址如下： http://demo
-
本文向大家介绍js实现精美的银灰色竖排折叠菜单，包括了js实现精美的银灰色竖排折叠菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现精美的银灰色竖排折叠菜单。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍JS实现带有3D立体感的银灰色竖排折叠菜单代码，包括了JS实现带有3D立体感的银灰色竖排折叠菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现带有3D立体感的银灰色竖排折叠菜单代码。分享给大家供大家参考，具体如下： 这是一款超酷的可以用到网页左侧的银灰色竖排多级折叠菜单，可以自己为菜单加一个背景，CSS中预留有代码，这是比较标准和经典的一款后台管理模式的菜单，D
-
本文向大家介绍js实现简单折叠、展开菜单的方法，包括了js实现简单折叠、展开菜单的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单折叠、展开菜单的方法。分享给大家供大家参考。具体如下： 这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，CSS没有做美化，如果想用的朋友就自己美化吧。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js
-
本文向大家介绍JQuery实现折叠式菜单的详细代码，包括了JQuery实现折叠式菜单的详细代码的使用技巧和注意事项，需要的朋友参考一下 两种风格： 1：点菜单项，每个子菜单项都可显示 运行结果图： 2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏 运行结果图： 总结 到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索呐喊教程以前的文章或
-
本文向大家介绍JS实现仿QQ效果的三级竖向菜单，包括了JS实现仿QQ效果的三级竖向菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现仿QQ效果的三级竖向菜单。分享给大家供大家参考。具体如下： 这是一款仿QQ的三级菜单，竖向三级，两级的比较多见，三级的不多哦，不过本菜单三级菜单没有美化，你需要自己再美化一下。 运行效果截图如下： 在线演示地址如下： http://demo.jb51