折叠菜单自动收缩 php,JS实现三级折叠菜单特效，其它级可自动收缩

最新推荐文章于 2022-03-02 19:21:12 发布
最新推荐文章于 2022-03-02 19:21:12 发布
阅读量235 收藏
点赞数
文章标签： 折叠菜单自动收缩 php

本文实例讲述了JS实现三级折叠菜单特效，其它级可自动收缩。分享给大家供大家参考，很实用,在IE6、IE7、IE8、FF、chrome等浏览器都正常运行具体如下：

小贴士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;｝ 即可高度自适应

运行效果图如下：

19279927872ad9037d8ac594c784aef8.png

实现代码如下：

三级折叠菜单

*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}

body{font:12px "宋体"; padding-top:20px;}

a{ color:#777;border:none;}

#menu { width:200px; margin:auto;}

#menu h1 { font-size:12px; border:#C60 1px solid; margin-top:1px; background-color:#F93;}

#menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}

#menu ul { padding-left:15px; height:100px;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}

#menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}

#menu a:hover{ color:#6F0; background:#000;}

#menu .no {display:none;}

#menu .h1 a{color:#6F0;}

#menu .h2 a{color:#06F;}

#menu h1 a{color:#FFF;}

希望本文所述对大家的javascript程序设计有所帮助。

weixin_39833454
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现三级折叠菜单特效，其它级可自动收缩
01-21
本文实例讲述了JS实现三级折叠菜单特效，其它级可自动收缩。分享给大家供大家参考，很实用,在IE6、IE7、IE8、FF、chrome等浏览器都正常运行具体如下： 小贴士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;...
php伸缩菜单_几个不错的自动收缩菜单导航效果
weixin_36323859的博客
03-09 170
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">runcodevar mh = 30;//最小高度var step = 1;//每次变化的px量var ms = 10;//每隔多久循环一次function toggle(o){if (!o.tid)o.tid = "_" + Math.random() * 100;if (!...
php 伸展菜单代码,侧边导航收缩伸展效果
weixin_29613859的博客
03-19 152
侧边导航收缩伸展效果, 兼容主流浏览器，懒人图库推荐下载！使用方法：1、head区域引用文件lrtk.css及js库2、引入js代码$(function(){$(".subNav").click(function(){// currentDd 对应收起的样式， currentDt 对应展开的样式$(this).toggleClass("currentDd").siblings(".subNav")...
php 侧边栏导航,Bootstrap怎么实现可折叠的侧边导航
weixin_42498003的博客
03-09 679
这次给大家带来Bootstrap怎么实现可折叠的侧边导航，Bootstrap实现可折叠侧边导航的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：源码：表格.panel-group{max-height:770px;overflow: auto;}.leftMenu{margin:10px;margin-top:5px;}.leftMenu .panel-heading{font-size:...
jquery实现三级下拉菜单(三种方法) 折叠菜单
sinat_51673411的博客
03-02 1698
<!doctype html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <style type="text/css"> ul, li { margin: 0; padding: 0 } body {
如何实现js展开收起（折叠）效果呢？例如：一段内容过长了，我限制他显示为20个字内，但是超出了20的就先用省略号代替，然后后面添加一个展开，点击展开后就显示所有的内容，这时候展开按钮就变成了 折叠按钮
热门推荐
包磊磊的博客
03-28 1万+
http://www.wugongqi.cn/2548.html 如何实现c呢？例如：一段内容过长了，我限制他显示为20个字内，但是超出了20的就先用省略号代替，然后后面添加一个展开，点击展开后就显示所有的内容，这时候展开按钮就变成了 折叠按钮，点击折叠又变成了展开，并且，折叠后又像是20字内了！下面奇芳阁就分享一下通过JS截取字符串实现展开收起（折叠）的功能！ 获取div中的
JS三级可折叠菜单实现方法
10-22
主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下
JS打造的三级折叠菜单 自动收缩
02-24
一款很酷JS打造的三级折叠菜单 自动收缩，很实用
JavaScript+CSS实现的可折叠二级菜单实例
10-22
主要介绍了JavaScript+CSS实现的可折叠二级菜单,以完整实例形式分析了JavaScript基于页面元素节点及样式的动态操作实现折叠菜单的相关技巧,需要的朋友可以参考下
html左侧二级折叠菜单栏,JavaScript+CSS实现的可折叠二级菜单实例
weixin_35569158的博客
05-31 1102
本文实例讲述了JavaScript+CSS实现的可折叠二级菜单。分享给大家供大家参考，具体如下：.aspx文件：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题页*{margin: 0px;padding: 0px;border:0px;}#nav{width: 200px;margin: 0px;padd...
收缩式导航菜单(CSS+DIV)
10-16
很好用的收缩式导航菜单(CSS+DIV)
css折叠CSS打造的三级折叠/合拢菜单
09-10
css折叠CSS打造的三级折叠/合拢菜
Jquery三级折叠菜单示例
03-18
Jquery实现三级折叠，菜单。
三级折叠菜单js css文件和图片
02-04
jquery 三级折叠菜单js css文件和图片 三级折叠菜单js css文件和图片
html左侧三级折叠菜单代码,js 三级折叠菜单代码效果
weixin_29109553的博客
05-31 295
提示：您可以先修改部分代码再运行 *,body,ul,li,h1,h2{ margin:0; padding:0; list-style:none;} body{font:12px "宋体"; padding-top:20px;} #menu { width:200px; margin:auto;} #menu h1 { cursor:pointer; color:#FFF; font...
多级菜单 jquery折叠菜单
hhhhiiii的博客
02-09 976
原文https://blog.csdn.net/hhhhiiii/article/details/113705854 改进后的jquery折叠菜单前言分析 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 先上代码： <script> $(document).ready(function(){ //折叠菜单事件
php 折叠菜单,css实现多级折叠菜单效果
weixin_29138345的博客
03-10 516
本文主要和大家介绍了纯css实现多级折叠菜单折叠树效果，运用checkbox的checked值来判断下级栏目是否展开，通过css3选择器提供的checked伪类来实现此效果，感兴趣的朋友参考下吧，希望能帮助到大家。1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CS...
JS+CSS打造三级折叠菜单，自动收缩其它级 js
最新发布
05-30
<li><a href="#">三级菜单1</a></li> <li><a href="#">三级菜单2</a></li> <li><a href="#">三级菜单3</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值