仿淘宝首页的分类滑动菜单

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 >
< title > 仿淘宝首页的分类滑动菜单_网页代码站(www.webdm.cn) title >
< style type ="text/css" >
body { font-size : 12px ; position : relative ; font-family : Verdana, Geneva, sans-serif ; }
a { color : blue ; }
ul { margin : 0 ; padding : 0 ; list-style : none ; }
#navigation { height : 26px ; }
#navigation li { float : left ; }
#navigation li.show .content { display : block ; }
#navigation li a,#navigation li span { display : inline-block ; border : solid 1px #fff ; border-bottom : none ; height : 26px ; padding : 0 6px ; line-height : 20px ; overflow : hidden }
#navigation li a:hover,#navigation li.show a.index { background : #DBF3FE ; border-color : #0a0 ; position : relative ; top : 0px ; z-index : 2 ; }
#container { position : relative ; width : 800px ; margin : 50px ; }
#navigation li .content { position : absolute ; left : 0 ; top : 26px ; background : #DBF3FE ; border : solid 1px #0a0 ; width : 760px ; padding : 20px ; display : none ; }
#navigation li .content ul li { margin-right : 10px ; float : none ; display : inline ; }
#navigation li .content ul li a { border : none ; }
#navigation li .content ul li { width : 120px ; }
#navigation li .content ul li h3 { clear : both ; text-align : left ; }
style >
head >
< body >
< div id ="container" >
< ul id ="navigation" >
< li >< span > 整站导航： span > li >
< li >
< a href ="#" class ="index" > A a >
< div class ="content" >
< h3 > 百度有啊 h3 >
< ul >
< li >< a href ="http://www.baidu.com" > 百度有啊 a > li >
< li >< a href ="#" > 百度有啊 a > li >
< li >< a href ="#" > 百度有啊 a > li >
ul >
< h3 > 源码下载 h3 >
< ul >
< li >< a href ="/" > 网页代码站 a > li >
< li >< a href ="#" > 百度有啊 a > li >
< li >< a href ="#" > 百度有啊 a > li >
ul >
div >
li >
< li >
< a href ="#" class ="index" > B a >
< div class ="content" >
< h3 > 网页特效 h3 >
< ul >
< li >< a href ="http://www.webdm.cn/" > 网页特效 a > li >
< li >< a href ="http://www.baidu.com" > 百度搜索 a > li >
< li >< a href ="http://mp3.baidu.com" > 百度MP3 a > li >
ul >
< h3 > 精品代码 h3 >
< ul >
< li >< a href ="/" > 代码索引 a > li >
< li >< a href ="#" > 百度搜索 a > li >
ul >
div >
li >
< li >< a href ="#" class ="index" > C a >< div class ="content" > C div > li >
< li >< a href ="#" class ="index" > D a >< div class ="content" > D div > li >
< li >< a href ="#" class ="index" > E a >< div class ="content" > E div > li >
< li >< a href ="#" class ="index" > F a >< div class ="content" > F div > li >
< li >< a href ="#" class ="index" > G a >< div class ="content" > G div > li >
< li >< a href ="#" class ="index" > H a >< div class ="content" > H div > li >
< li >< a href ="#" class ="index" > I a >< div class ="content" > I div > li >
< li >< a href ="#" class ="index" > J a >< div class ="content" > J div > li >
< li >< a href ="#" class ="index" > K a >< div class ="content" > K div > li >
< li >< a href ="#" class ="index" > L a >< div class ="content" > L div > li >
< li >< a href ="#" class ="index" > M a >< div class ="content" > M div > li >
ul >
div >
body >
html >
< script type ="text/javascript" >
function showAjaxContent(){
var obj = document.getElementById( " navigation " );
var liObj = obj.getElementsByTagName( " li " );
var length = liObj.length;
var currentLiObj;
for ( var i = 0 ;i < length;i ++ ){
currentLiObj = liObj[i];
if (currentLiObj.parentNode != obj){ continue ;}
// 然后循环添加事件
currentLiObj.onmouseover = function (){
if ( this .className.indexOf( " show " ) < 0 ){
this .className += " show " ;
}
clearStyle( this );
}
currentLiObj.onmouseout = function (){
this .className = this .className.replace( " show " , "" );
clearStyle( this );
}
}
function clearStyle(obj){
for ( var i = 0 ;i < length;i ++ ){
currentLiObj = liObj[i];
if (obj != currentLiObj){
currentLiObj.className = currentLiObj.className.replace( " show " , "" );
}
}
}
}
showAjaxContent();
script >
< br >
< p >< a href ="http://www.webdm.cn" > 网页代码站 a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！ p >

代码来自：http://www.webdm.cn/webcode/65d7890b-21d5-4bf3-948d-42885f42115a.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/22/1942081.html