仿美橙互联的导航效果例子_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

仿美橙互联的导航效果例子

运行代码看效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>CSS中国导航 www.csschina.net</TITLE> <FCK:META http-equiv=Content-Type content="text/html; charset=gb2312" /> <LINK href="http://www.cndns.com/style/public.css" type=text/css rel=stylesheet> <SCRIPT src="http://www.cndns.com/Scripts/jquery.js" type=text/javascript></SCRIPT> <style> *{margin:0;padding:0} li{list-style:none;} #nav_wrap{margin:20px auto;} #nav li{ text-align:center;font-size:12px;} </style> </HEAD> <BODY> <DIV id=nav_wrap> <DIV id=nav> <DIV class=l></DIV> <UL class=c> <LI><SPAN class=v><A href="#" _fcksavedurl="#">首页</A></SPAN> <DIV class=kind_menu style="LEFT: 20px">欢迎您访问CSS中国,我们为您提供最优质的CSS教程! </DIV></LI> <LI><SPAN class=v><A href="#" _fcksavedurl="#">CSS教程</A></SPAN> <DIV class=kind_menu style="LEFT: 40px"><A href="http://www.csschina.net/a/bj">CSS版式布局</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/a/jc/">DIV+CSS 教程</A> </DIV></LI> <LI><SPAN class=v><A href="http://www.csschina.net/a/sl/" _fcksavedurl="http://www.csschina.net/a/sl/">DIV+CSS实例</A></SPAN> <DIV class=kind_menu><A href="http://www.csschina.net/a/cl/" _fcksavedurl="http://www.csschina.net/a/cl/">从零学CSS</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/a/kj/" _fcksavedurl="http://www.csschina.net/a/kj/">CSS框架</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/a/bz/" _fcksavedurl="http://www.csschina.net/a/bz/">WEB标准</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/a/wd/" _fcksavedurl="http://www.csschina.net/a/wd/">技术文档</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/a/dm/" _fcksavedurl="http://www.csschina.net/a/dm/" target=_blank>常用代码</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/css/SEOgonglue/" _fcksavedurl="http://www.csschina.net/css/SEOgonglue/">SEO攻略</A> <SPAN>|</SPAN> <A href="http://www.csschina.net/ask" _fcksavedurl="http://www.csschina.net/ask">问答</A> </DIV></LI> </UL> <DIV class=r></DIV> </DIV> <DIV id=tmenu></DIV> </DIV> <SCRIPT type=text/javascript> var site_url = window.location.href.toLowerCase(); switch (true) { default : $("#nav li").attr("class",""); $("#nav li").eq(0).attr("class","nav_lishw"); $(".nav_lishw .v a").attr("class","sele"); $(".nav_lishw .kind_menu").show(); } $("#nav li").hover( function(){ clearTimeout(setTimeout("0")-1); $("#nav .kind_menu").hide(); $("#nav li .v .sele").attr("class","shutAhover"); $(this).attr("id","nav_hover") $("#nav_hover .v a").attr("class","sele"); $("#nav_hover .kind_menu").show(); }, function(){ if($(this).attr("class") != "nav_lishw"){ $("#nav_hover .v .sele").attr("class",""); $("#nav_hover .kind_menu").hide(); } $(this).attr("id","") $("#nav li .v .shutAhover").attr("class","sele"); setTimeout(function(){ $(".nav_lishw .kind_menu").show(); $(".nav_lishw .v a").attr("class","sele"); },50); } ); </SCRIPT> </BODY></HTML>

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

来源CSS中国 www.csschina.net

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

仿美橙互联的导航效果例子