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例子(子菜单下拉)

<style type="text/css"> *{ margin:0px auto; padding:0px;} #wai{ width:1000px; height:50px; margin-top:100px;} .zong{ width:500px; height:50px; text-align:center; line-height:50px; vertical-align:middle; float:left; border:1px solid #F00;}

Js效果:图片轮播;选项卡;侧面菜单下拉效果;进度条效果;滑动效果;好友列表选中效果;点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

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对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这

table+js实现网站左侧列表下拉隐藏

<script language="javascript">                    function showHide(obj){                  try         {            if (obj.id=="M_1")            {                           document.getElementById('M_2').style.display="none

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

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