网友杰立分享纯css实现树型结构网站地图特效

所属分类：jquery导航菜单

发布时间：2013/11/25 18:51:45

下载量：1197

评论数：1

转载请自觉注明原文：http://www.jq-school.com/Detail.aspx?id=377

这个也算得上是JquerySchool网站上一款非常逆天的作品，没有任何javascript或者jquery脚本参考，纯css样式代码实现，兼容所有浏览器，也是从事政府资助工作的网友杰立把收藏已久的作品整理出来分享的，非常实用，使用非常简单，既可当导航菜单使用，也可以当树型菜单使用，太棒了。。。

核心css样式代码如下：

.nav 	{ border: 0; border-left: 1px solid #BBBBBB; }
.nav ul li li	{color: #000; background:  url("../images/line.gif") left center no-repeat;}
.nav ul ul ul {border-left: 1px solid #BBBBBB; }
.nav ul li .sub-sub {background:  url("../images/line.gif") top left no-repeat;}
.nav a, .nav a:visited	{color: #4F4F4F;}				
.nav a:active, .nav a:hover, .nav a:focus,  a:focus .sffocus 	{color: #000;}			
.nav ul ul a, .nav ul ul a:visited 	{color: #4F4F4F;}			
.nav ul ul a:active, .nav ul ul a:hover, .nav ul ul a:focus	{color: #000;}
	
/* inner box styling */
/* Level 1 */
.nav ul li .ro {display: block; width: 100%; background: url("../images/ro-01.gif") top right no-repeat;}
.nav ul li .lo {display: block; width: 100%; background: url("../images/lo-01.gif") top left no-repeat;}
.nav ul li .ru {display: block; width: 100%; background: url("../images/ru-01.gif") bottom right no-repeat;}
.nav ul li .lu {display: block; width: 100%; background: url("../images/lu-01.gif") bottom left no-repeat;}
.nav ul li .box-content {width: 100%; padding: 0.1em 0.1em 0.1em 0.1em; }
 
/* Level 2 + 3 */
.nav ul li li .ro {background: url("../images/ro-02.gif") top right no-repeat;}
.nav ul li li .lo {background: url("../images/lo-02.gif") top left no-repeat;}
.nav ul li li .ru {background: url("../images/ru-02.gif") bottom right no-repeat;}
.nav ul li li .lu {background: url("../images/lu-02.gif") bottom left no-repeat;}
.nav ul li li .box-content {width: 100%; padding: 0.1em 0.1em 0.1em 0.1em; }
/* Level 1 - 3 hover */
.nav ul li a:hover .ro {background: url("../images/ro_h.gif") top right no-repeat;}
.nav ul li a:hover .lo {background: url("../images/lo_h.gif") top left no-repeat;}
.nav ul li a:hover .ru {background: url("../images/ru_h.gif") bottom right no-repeat;}
.nav ul li a:hover .lu {background: url("../images/lu_h.gif") bottom left no-repeat;}

效果如下：

• 如果你喜欢学院的资源就下载吧，亲，谢谢！
• 
• 
• 提示：如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网，版权归作品最初创作人，转载请注明（出处）原文链接，转载前请邮件至磐temdy@qq.com，一旦发现造成侵权行为，后果自负。。