JS实例之左侧菜单下拉效果,实现左侧菜单栏点击打开关闭效果

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 *{margin:0px auto; padding:0px;}
 6 #wai{width:200px; height:500px; margin-top:100px;}
 7
 8 .list{width:200px; height:20px; background-color:#999; text-align:center; line-height:20px; vertical-align:middle; color:#FFF; margin:2px;}
 9
10 .erji{width:200px; height:40px;}
11
12 .xiala{width:200px; height:20px; background-color:white; text-align:center; line-height:20px; vertical-align:middle; color:black;}
13 </style>
14 </head>
15
16 <body>
17 <div id="wai">
18     <div class="list" onclick="show(‘xinwen‘)" >点开</div>
19     <div class="erji" id="xinwen" style="display:none">
20         <div class="xiala">新闻</div>
21         <div class="xiala">图片</div>
22     </div>
23
24     <div class="list" onclick="show(‘junshi‘)" >点开</div>
25     <div class="erji" id="junshi" style="display:none">
26         <div class="xiala">军事</div>
27         <div class="xiala">科技</div>
28     </div>
29
30     <div class="list" onclick="show(‘meishi‘)" >点开</div>
31     <div class="erji" id="meishi" style="display:none">
32         <div class="xiala">美食</div>
33         <div class="xiala">旅游</div>
34     </div>
35
36     <div class="list" onclick="show(‘jiating‘)" >点开</div>
37     <div class="erji" id="jiating" style="display:none">
38         <div class="xiala">家庭</div>
39         <div class="xiala">宠物</div>
40     </div>
41 </div>
42
43 </body>
44 <script type="text/javascript">
45
46 function show(id){
47     var a=document.getElementById(id);
48     if(a.style.display=="none"){
49         a.style.display ="block";
50     }else{
51         a.style.display ="none";
52     }
53 }
54
55 </script>
56 </html>

时间: 06-20

JS实例之左侧菜单下拉效果,实现左侧菜单栏点击打开关闭效果的相关文章

JS横向延时2级下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS横向延时2级下拉菜单</title> <style> body{ font-size: 12px; color: #333;} body, ul,h2{ margin:0;padding:0;} li { list-style:none;}

Android UI设计之&lt;十&gt;自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

分别用js 和 html/css实现下拉菜单特效

在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现: 1.用js来实现此效果: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">

一点点关于JS的东西:EasyUI布局+下拉框之个人简单使用

根据项目需要,自己写的一个小小demo:实现的简单效果是这样子的,通过下拉框选择数据项,点击页面Button触发,根据下拉框值加载选显卡Tbs. html代码如下: 一个下拉框,一个button,一个空的tbs,两个隐藏内容div(可以动态合成). <select id="Model" class="easyui-combobox" name="Model" style="width:250px;">      

菜单下拉效果demo记录

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px; } html,body{width:100%;height:100%;} .sub_item{display:none;height:

js基于json的级联下拉框

级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. <html> <script type="text/javascript"> /** 基于json的级联下拉列表,支持初始化 调用eg: var comboselect = ComboSelectFactory(data, 'p1', 'p2', 'p3', 'p4'); 设定下拉列表value,t

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

css+html+js实现多级下拉和弹出菜单

本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 首先应该写html部分的代码,代码比較简单,代码例如以下: <body> <div id="men

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><