HTML简单的折叠菜单实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>div{font-size:12px;color:red; background-color: #EAEAE8; border: 1 solid #1892B5; padding: 1}</style>
</head>

<body>
<div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display ==‘none‘)?‘‘:‘none‘" >
+ 主目录1</div>
<div id="child1" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a>
</div>
<div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display ==‘none‘)?‘‘:‘none‘" >
+ 主目录2 </div>
<div id="child2" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a>
</div>

</body>
</html>

时间： 2024-08-02 16:24:39

HTML简单的折叠菜单实现的相关文章

简单的折叠菜单..

1.先来一个的,就是一个ul菜单主里面包含一个a标签和一个ol子菜单,代码如下: <head> <meta charset="UTF-8"> <title>折叠菜单</title> <!--设置页面加载完成后子菜单样式为隐藏 --> <style> #ool { display:none; } </style> </head> <body> <ul> <li&g

[bootstrap] 打造一个简单的系统模板（1） 左侧折叠菜单

1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大

在对网站进行mip改造的时候,使用百度的导航组件,很难有较好的展现形式. 百度又不允许自定义JS,所以,考虑增加CSS(是在百度组件的基础上增加JS),用css补充实现点击功能,实现精美的导航. 最终结果是为了实现以下三个样式 1.未展开状态 2.展开状态,有二级导航的,要出现+号 3.点击+号能展开二级菜单 参考以下树状CSS的设计思路,主要是使用 html5的 details summary标签,注意看注释 演示图如下  代码如下 <!DOCTYPE html> <html xmln

第一百八十九节，jQueryUI，折叠菜单 UI

jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.accordion 中使用 on 折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能 UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了. 一．使用 accordion 使用 accordion 比较简单,但需要按照指定的规范即可. HTML 部分 <d

6.3 简单的导航菜单

作为一个成功的网站,导航菜单是永远不可缺少的.导航菜单的风格往往也决定了整个网站的风格,因此很多设计者都会投入很多时间和精力来制作各式各样的导航条,从而体现网站的整体构架. 在传统方式下,制作导航菜单是很麻烦的工作.需要使用表格,设置复杂的属性,还需要使用JavaScript实现相应鼠标指针经过或点击动作.如果用CSS来制作导航菜单,实现起来就非常简单了. 一.简单的竖直排列菜单 当项目列表的list-style-type属性值为“none”时,制作各式各样的菜单和导航条便成了项目列表的最大用处

cocos2dx-lua使用UIListView制作二级折叠菜单

折叠菜单,用过jqury accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里insertCustomItem,收起的时候从listview里removeItem.下面给出一个功能丰富的折叠菜单控件.先看控件主类: --[[ 二级折叠菜单组 构造: local groupData = { { title = '分类1', items = { { id = 1, count = 20, l

EasyUI+zTree实现简单的树形菜单切换

使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--导入eas

jquery 写的折叠菜单

<!-- 总栏 --> <div style="width:180px;height:50px;background-color:#000;"> <button class="btn btn-primary btn-lg" id="btn_packinglist" > 单机折叠菜单 </button> </div> <!-- 总栏--> <!-- 下拉列表拦 -->

jquery两行代码实现侧边栏三级折叠菜单

jquery两行代码实现侧边栏三级折叠菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-2.1.1.min.js"></script> </head> <bod