Tab键可访问的下拉菜单demo

<ul id="navigationRegion">
<li token="1" class="index_on"><a title="首页" href="//www.mtime.com/">首页</a></li>
<li token="2" class="home">
<a title="我的时光" href="//my.mtime.com">我的时光</a>
<span>&nbsp;</span>
<div style="overflow:hidden; height:226px;" class="i_n_l child">
<h5><a href="//my.mtime.com"><em class="mytime"></em>我的时光</a></h5>
<h5><a href="//my.mtime.com/movie/wish/">我的电影</a></h5>
<h5><a href="//my.mtime.com/friend/">我的好友</a></h5>
<h5><a href="//my.mtime.com/group/">我的群组</a></h5>
<h5><a href="//www.mtime.com/member/signin/"><em class="myblog"></em>我的博客</a></h5>
<h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyBlog">日志</a></h5>
<h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyPhoto">相册</a></h5>
<h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyProfile">个人资料</a></h5>
</div>
</li>
<li token="3" class="movie">
<a title="电影" href="//www.mtime.com/movie/">电影</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 226px;" class="i_n_l ">
<h5><a href="//www.mtime.com/movie/">电影频道</a></h5>
<h5><a href="//www.mtime.com/movie/news/">新闻</a></h5>
<h5><a href="//www.mtime.com/movie/new/">新片</a></h5>
<h5><a href="//www.mtime.com/movie/nowplaying/">热映</a></h5>
<h5><a href="//www.mtime.com/movie/top_ten/">排行榜</a></h5>
<h5><a href="//www.mtime.com/comment/">影评</a></h5>
<h5><a href="//www.mtime.com/movie/special.html">专题</a></h5>
<h5><a href="//www.mtime.com/movie/section/">电影查询</a></h5>
</div>
</li>
<li token="11" class="tv">
<a title="电视" href="//www.mtime.com/tv/">电视</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 145px;" class="i_n_l">
<h5><a href="//www.mtime.com/tv/">电视频道</a></h5>
<h5><a href="//www.mtime.com/tv/news/">新闻</a></h5>
<h5><a href="//www.mtime.com/tv/hot/">热播</a></h5>
<h5><a href="//www.mtime.com/tv/top/">排行榜</a></h5>
<h5><a href="//www.mtime.com/tv/section/">电视剧查询</a></h5>
</div>
</li>
<li token="4" class="person">
<a title="人物" href="//www.mtime.com/people/">人物</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 145px;" class="i_n_l">
<h5><a href="//www.mtime.com/people/">人物频道</a></h5>
<h5><a href="//www.mtime.com/people/news/">新闻</a></h5>
<h5><a href="//www.mtime.com/people/gossip/">八卦</a></h5>
<h5><a href="//www.mtime.com/people/interview/">人物访谈</a></h5>
<h5><a href="//www.mtime.com/people/top_ten/">排行榜</a></h5>
</div>
</li>
<li token="5" class="video"> <a title="视频" href="//www.mtime.com/video/">视频</a> </li>
<li token="6" class="photo"> <a title="图片" href="//www.mtime.com/picture/">图片</a> </li>
<li token="7" class="blog">
<a title="博客" href="//i.mtime.com/">博客</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 199px;" class="i_n_l">
<h5><a href="//i.mtime.com">博客频道</a></h5>
<h5><a href="//i.mtime.com/movietalk.html">电影电视</a></h5>
<h5><a href="//i.mtime.com/buzz.html">明星时尚</a></h5>
<h5><a href="//i.mtime.com/lifestyle.html">文化生活</a></h5>
<h5><a href="//i.mtime.com/photo/">相册</a></h5>
<h5><a href="//i.mtime.com/member.html">会员</a></h5>
<h5><a href="//i.mtime.com/blog_hot/">热门日志</a></h5>
</div>
</li>
<li token="8" class="group">
<a title="群组" href="//group.mtime.com/">群组</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 199px;" class="i_n_l">
<h5><a href="//group.mtime.com">群组频道</a></h5>
<h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyGroup">我的群组</a></h5>
<h5><a href="//www.mtime.com/member/signin/?redirectUrl=/city/">我的同城</a></h5>
<h5><a href="//group.mtime.com/event/">活动</a></h5>
<h5><a href="//group.mtime.com/topic_hot/">热门话题</a></h5>
<h5><a href="//group.mtime.com/class/">群组分类</a></h5>
<h5><a href="//group.mtime.com/top/">群组人气榜</a></h5>
</div>
</li>
<li token="9" class="quiz">
<a title="游戏" href="//www.mtime.com/fun/">游戏</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 145px;" class="i_n_l">
<h5><a href="//www.mtime.com/fun/">游戏频道</a></h5>
<h5><a href="//www.mtime.com/fun/quiz/">电影猜猜猜</a></h5>
<h5><a href="//www.mtime.com/fun/photo/">图片评分</a></h5>
<h5><a href="//my.mtime.com/app/memory/">眼疾手快</a></h5>
<h5><a href="//my.mtime.com/app/card/">卡片大富翁</a></h5>
</div>
</li>
<li token="10" class="showtime">
<a title="电影院" href="//theater.mtime.com/">电影院</a>
<span>&nbsp;</span>
<div style="overflow: hidden; height: 145px;" class="i_n_l">
<h5><a href="//theater.mtime.com/">电影院频道</a></h5>
<h5><a href="//theater.mtime.com/showtime/">影讯</a></h5>
<h5><a href="//theater.mtime.com/movie/">新片</a></h5>
<h5><a href="//theater.mtime.com/cinema/">影院</a></h5>
<h5><a href="//theater.mtime.com/discount/">优惠</a></h5>
</div>
</li>
</ul>


<script>
var o = document.getElementById("navigationRegion").getElementsByTagName("li");
var l = o.length, cache;

var menuTaga = function(obj){
//获取a标签DOM对象
return obj.getElementsByTagName("a")[0];
}, menuDown = function(obj){
var cl = obj.className;
if(/_on$/.test(cl) || /_hover$/.test(cl)){
return;
}
obj.className = obj.className + "_hover";
}, menuUp = function(obj){
obj.className = obj.className.replace("_hover", "");
}, menuCache = function(obj){
if(cache){
menuUp(cache);
}
cache = obj;
}, menuEvent = function(obj){
obj.onmouseover = function(){
menuCache(this);
return menuDown(this);
};
obj.onmouseout = function(){
return menuUp(this);
};
menuTaga(obj).onfocus = function(){
menuCache(obj);
return menuDown(obj);
};
};
for(var i=0; i<l; i+=1){
menuEvent(o[i]);
}
</script>

猜你喜欢

转载自www.cnblogs.com/xieyongbin/p/10323940.html