javascript css实现三级目录(简单的)
网络编程 2021-07-05 10:58www.168986.cn编程入门
本篇文章主要介绍了javascript css实现三级目录(简单的),这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,感兴趣的小伙伴们可以参考一下
是在原先的二级目录改的,先给出演示
这里是css
/*bg macji(http://.macji.)*/ ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} .m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} .m_menu_content{border-:solid 1px #c;padding:8px 2px} /*一级*/ .m_menu_content p{height:22px;line-height:22px} .m_menu_content p a{ color:#666633; font-weight:bold; text-decoration:none; background:url(http://.macji./blog/img/icon.gif) no-repeat 8px 4px; padding:0 0 0 30px; display:block } .m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} .m_menu_content p a.on{background-position:8px -18px} /*二级*/ .menu2{} .menu2 li{line-height:22px} .menu2 a{color:#000; text-decoration:none; display:block; padding:0 0 0 40px; background:url(http://.macji./blog/img/icon.gif) no-repeat 18px 4px } .menu2 a.on{background-position:18px -18px} /*三级*/ .menu2 ul{} .menu2 ul a{ background-position:30px -39px; padding:0 0 0 50px; color:#666633; text-decoration:underline } .menu2 ul a:hover{background-color:#f5f5f5; color:#f60}
目录是循环的,我给写死了.狼蚁网站SEO优化给出js
/* 这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示 id编号是有规律的,可用服务器端语言循环出目录 */ function setMenuList(num){ var p = document.getElementById('p' + num); var ul = document.getElementById('ul' + num); if(ul.style.display == ‘none'){ ul.style.display = ”; p.className = “on”; }else{ ul.style.display = ‘none'; p.className = “”; } }
演示查看
[Ctrl+A 全选 注:]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程