破解淘宝菜单

呵呵为什么又来一个破解,为什么是淘宝菜单,因为taobao上面的菜单,可以说是中国第一个大型网站采用css做的滑动门菜单,二来
滑动门有一弱点就是会产生选中链接的虚线线框偏移,而淘宝的菜单是没有虚线框的,哈哈至于怎么做到的我们会在下面分析:

好了长话段说我们先打开taobao的首页看看找到如下代码:

很标准的滑动门菜单结构,至于真正的滑动门菜单技术我们这里不详细介绍,如果你不是很了解的话,可以去看《CSS中的滑动门技术》,我们在查找一下菜单的css


#Head #ChannelMenuItems{
width:640px;
height:30px;
margin:0 auto;
/*attach promotion event background images here*/
}
#Head #ChannelMenuItems li{
float:left;
height:30px;
margin-right:1px;
/*attach promotion event background images here*/
}
#Head #ChannelMenuItems a{
display:block;
float:left;
height:30px;
background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_home_left.gif) left top no-repeat;
text-decoration:none;
}
#Head #ChannelMenuItems a span{
display:block;
float:left;
height:30px;
padding:11px 11px 0;
background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_home_right.gif) right top no-repeat;
text-align:center;
color:#000;
font-style:normal;
cursor:hand;
/*IE 5.x Crack at the bottom of this file*/
}

/*IE5.x Hack Rules*/
#head #channelmenuitems a span{
cursor: pointer;
height: 19px;
voice-family: “\”}\””;
voice-family: inherit;
}

#head #channelmenuitems li{
float: left;
height: 30px;
margin-right: 1px; /*attach promotion event background images here*/
}

body.CurHome ul#ChannelMenuItems li#MenuHome a{background:#FF9000 url(http://pics.taobao.com/2k5/sys/common/header/chl_home_left_act.gif) left top no-repeat;}
body.CurHome ul#ChannelMenuItems li#MenuHome a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_home_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurDigital ul#ChannelMenuItems li#MenuDigital a{background:#99A2B1 url(http://pics.taobao.com/2k5/sys/common/header/chl_digital_left_act.gif) left top no-repeat;}
body.CurDigital ul#ChannelMenuItems li#MenuDigital a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_digital_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurLady ul#ChannelMenuItems li#MenuLady a{background:#E1569A url(http://pics.taobao.com/2k5/sys/common/header/chl_lady_left_act.gif) left top no-repeat;}
body.CurLady ul#ChannelMenuItems li#MenuLady a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_lady_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurMan ul#ChannelMenuItems li#MenuMan a{background:#3672AE url(http://pics.taobao.com/2k5/sys/common/header/chl_man_left_act.gif) left top no-repeat;}
body.CurMan ul#ChannelMenuItems li#MenuMan a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_man_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurLife ul#ChannelMenuItems li#MenuLife a{background:#EC9307 url(http://pics.taobao.com/2k5/sys/common/header/chl_life_left_act.gif) left top no-repeat;}
body.CurLife ul#ChannelMenuItems li#MenuLife a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_life_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurCulture ul#ChannelMenuItems li#MenuCulture a{background:#1E998B url(http://pics.taobao.com/2k5/sys/common/header/chl_culture_left_act4.gif) left top no-repeat;}
body.CurCulture ul#ChannelMenuItems li#MenuCulture a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_culture_right_act3.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurSports ul#ChannelMenuItems li#MenuSports a{background:#E30303 url(http://pics.taobao.com/bao/album/chl/sports/chl_sports_left_act_060601.gif) left top no-repeat;}
body.CurSports ul#ChannelMenuItems li#MenuSports a span{background:transparent url(http://pics.taobao.com/bao/album/chl/sports/chl_sports_right_act_060601.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurGame ul#ChannelMenuItems li#MenuGame a{background:#C34B26 url(http://pics.taobao.com/2k5/sys/common/header/chl_game_left_act.gif) left top no-repeat;}
body.CurGame ul#ChannelMenuItems li#MenuGame a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_game_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurCollection ul#ChannelMenuItems li#MenuCollection a{background:#88605F url(http://pics.taobao.com/2k5/sys/common/header/chl_collection_left_act2.gif) left top no-repeat;}
body.CurCollection ul#ChannelMenuItems li#MenuCollection a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_collection_right_act2.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurHongkong ul#ChannelMenuItems li#MenuHongkong a{background:#965BB9 url(http://pics.taobao.com/2k5/sys/common/header/chl_hongkong_left_act2.gif) left top no-repeat;}
body.CurHongkong ul#ChannelMenuItems li#MenuHongkong a span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_hongkong_right_act2.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurMall ul#ChannelMenuItems li#MenuMall a{background:#A48752 url(http://pics.taobao.com/bao/album/sys/misc/chl_mall_left_act.gif) left top no-repeat;}
body.CurMall ul#ChannelMenuItems li#MenuMall a span{background:transparent url(http://pics.taobao.com/bao/album/sys/misc/chl_mall_left_act_r.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.CurPet ul#ChannelMenuItems li#MenuPet a{background:#86D500 url(http://pics.taobao.com/bao/album/sys/misc/chl_pet_left_act2.gif) left top no-repeat;}
body.CurPet ul#ChannelMenuItems li#MenuPet a span{background:transparent url(http://pics.taobao.com/bao/album/sys/misc/chl_pet_right_act2.gif) right top no-repeat;font-weight:bold;color:#FFF;}

/*Hover triggers*/
#Head #ChannelMenuItems li#MenuHome a:hover{background:#FF9000 url(http://pics.taobao.com/2k5/sys/common/header/chl_home_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuHome a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_home_right_act.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuDigital a:hover{background:#99A2B1 url(http://pics.taobao.com/2k5/sys/common/header/chl_digital_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuDigital a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_digital_right_act.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuLady a:hover{background:#E1569A url(http://pics.taobao.com/2k5/sys/common/header/chl_lady_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuLady a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_lady_right_act.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuMan a:hover{background:#3672AE url(http://pics.taobao.com/2k5/sys/common/header/chl_man_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuMan a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_man_right_act.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuLife a:hover{background:#EC9307 url(http://pics.taobao.com/2k5/sys/common/header/chl_life_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuLife a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_life_right_act.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuCulture a:hover{background:#1E998B url(http://pics.taobao.com/2k5/sys/common/header/chl_culture_left_act4.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuCulture a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_culture_right_act3.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuSports a:hover{background:#E30303 url(http://pics.taobao.com/bao/album/chl/sports/chl_sports_left_act_060601.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuSports a:hover span{background:transparent url(http://pics.taobao.com/bao/album/chl/sports/chl_sports_right_act_060601.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuGame a:hover{background:#C34B26 url(http://pics.taobao.com/2k5/sys/common/header/chl_game_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuGame a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_game_right_act.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuCollection a:hover{background:#88605F url(http://pics.taobao.com/2k5/sys/common/header/chl_collection_left_act2.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuCollection a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_collection_right_act2.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuHongkong a:hover{background:#965BB9 url(http://pics.taobao.com/2k5/sys/common/header/chl_hongkong_left_act2.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuHongkong a:hover span{background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_hongkong_right_act2.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuMall a:hover{background:#965BB9 url(http://pics.taobao.com/bao/album/sys/misc/chl_mall_left_act.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuMall a:hover span{background:transparent url(http://pics.taobao.com/bao/album/sys/misc/chl_mall_left_act_r.gif) right top no-repeat;color:#FFF;}
#Head #ChannelMenuItems li#MenuPet a:hover{background:#86D500 url(http://pics.taobao.com/bao/album/sys/misc/chl_pet_left_act2.gif) left top no-repeat;}
#Head #ChannelMenuItems li#MenuPet a:hover span{background:transparent url(http://pics.taobao.com/bao/album/sys/misc/chl_pet_right_act2.gif) right top no-repeat;color:#FFF;}

上面就是我提取出来菜单的样式表,哈哈很多代码吧,我们仔细看看根本没有什么刻意特殊的代码在里面,看来用css特殊属性去除线框的可能性排除了,选中菜单链接以后没有虚线通常的做法使用javascript来实现,这个比较常见具体方法可以查看《去除链接虚线框》, 那我们再从新回到页面源代码查看,结果没有发现可疑代码。哪taobao到底是怎么做的呢,我们再回头看看上面的代码,发现在所有文字的两边多了一个标签,大家都知道,做滑动门菜单根本不用这个完全是可以实现,难道就因为的原因才没有虚线框的吗,那么我们把代码下载下来实验一下,吧去掉,看看什么效果,果然去掉的菜单除了虚线框不过虚线框还是不错,没有偏移,好那么我们就来看看这个是什么css属性,怎样起到这个作用的,看下面代码:


#Head #ChannelMenuItems li{
float:left;
height:30px;
margin-right:1px;
/*attach promotion event background images here*/
}
#Head #ChannelMenuItems a{
display:block;
float:left;
height:30px;
background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_home_left.gif) left top no-repeat;
text-decoration:none;
}
#Head #ChannelMenuItems a span{
display:block;
float:left;
height:30px;
padding:11px 11px 0;
background:transparent url(http://pics.taobao.com/2k5/sys/common/header/chl_home_right.gif) right top no-repeat;
text-align:center;
color:#000;
font-style:normal;
cursor:hand;
/*IE 5.x Crack at the bottom of this file*/
}

传统我们做滑动门菜单通常是吧定义按钮的大小和边距定义在a上和li上,然后在a和li上定义不同的背景文件,最后组合制作成一个按钮,而在这段代码里面大家发现,li和a只定义了高度根本没有定义边距,而且只有a放了按钮左边的图像背景文件,li是空的,而真正定义按钮大小的是span,不仅定义了右边的背景,高度还有两边的边距,还有display:block;和cursor:hand;,哪到底为什么要这么做呢?好下面我们来做一个小实验:

www.d8in.com

这段代码是没有定义的,但是采用了同样的结构就是嵌套最后里面是要链接的文字,大家发现虚线框是紧紧包裹在文字周围的,我们继续测试下面代码


www.d8in.com

这段代码同时定义了a和span,display: block;和height: 30px;,发现鼠标放了连接上变成输入指针,但是链接依然刻意点击。
最后测试最终代码:


www.d8in.com

最后终结一淘宝菜单的制作原理;
1.用

发表评论

电子邮件地址不会被公开。