树形导航特效,CSS特效代码

大中小文章来源：万象互联更新时间：2011-8-18 14:30:33

CSS简单实现的目录树型导航菜单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css实现的目录树型导航菜单</title> <style> ul { padding:0; margin:0;} #main1,#main2 { width:100px; height:28px; line-height:28px; padding-left:5px; background:#ccc; cursor:pointer; border-bottom:1px solid #fff;} #child1,#child2 { width:105px; background:#eee;} #child1 ul li,#child2 ul li { padding-left:5px; border-bottom:1px solid #fff; line-height:180%;} #child1 ul li a,#child2 ul li a { color:#666;} </style> </head> <body> <div id="main1" onClick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" > + 主目录1</div> <div id="child1" style="display:none"> <ul> <li><a href="#">- 子目录1</a></li> <li><a href="#">- 子目录2</a></li> <li><a href="#">- 子目录3</a></li> <li><a href="#">- 子目录4</a></li> </ul> </div> <div id="main2" onClick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" > + 主目录2 </div> <div id="child2" style="display:none"> <ul> <li><a href="#">- 子目录1</a></li> <li><a href="#">- 子目录2</a></li> <li><a href="#">- 子目录3</a></li> <li><a href="#">- 子目录4</a> </li> </ul> </div> <p><a href="http://www.webjx.com">来自万象互联网络资讯网</a></p> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

版权说明:本站原创文章,由万象互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4074.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博