<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉导航</title>
<style>
a{
text-decoration: none;
}
#pullDownNavigation .navigation{
position: relative;
float: left;
border: #cc2123 solid 1px;
width: 19%;
height: 30px;
text-align: center;
}
.pullDownNavigationc{
position: relative;
float: left;
top: -1px;
overflow: hidden;
height: 80px;
text-align: center;
width: 100%;
border: #cc2123 solid 1px;
border-top: 0;
display: none;
}
.navigation .nav{
height: 32px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="pullDownNavigation">
<div class="navigation navigation1" data-targetID='pullDownNavigation1'>
<div class="nav"><a href="#" target="_blank">导航一</a></div>
<div class="pullDownNavigationc" id="pullDownNavigation1">
<div><a href="#" target="_blank">下拉菜单1</a></div>
<div><a href="#" target="_blank">下拉菜单2</a></div>
<div><a href="#" target="_blank">下拉菜单3</a></div>
<div><a href="#" target="_blank">下拉菜单4</a></div>
</div>
</div>
<div class="navigation navigation1" data-targetID='pullDownNavigation2'>
<div class="nav"><a href="#" target='_blank'>导航二</a></div>
<div class="pullDownNavigationc" id="pullDownNavigation2">
<div><a href="#" target="_blank">下拉菜单1</a></div>
<div><a href="#" target="_blank">下拉菜单2</a></div>
<div><a href="#" target="_blank">下拉菜单3</a></div>
<div><a href="#" target="_blank">下拉菜单4</a></div>
</div>
</div>
<div class="navigation navigation1" data-targetID='pullDownNavigation3'>
<div class="nav"><a href="#" target='_blank'>导航三</a></div>
<div class="pullDownNavigationc" id="pullDownNavigation3">
<div><a href="#" target="_blank">下拉菜单1</a></div>
<div><a href="#" target="_blank">下拉菜单2</a></div>
<div><a href="#" target="_blank">下拉菜单3</a></div>
<div><a href="#" target="_blank">下拉菜单4</a></div>
</div>
</div>
<div class="navigation navigation1" data-targetID='pullDownNavigation4'>
<div class="nav"><a href="#" target='_blank'>导航四</a></div>
<div class="pullDownNavigationc" id="pullDownNavigation4">
<div><a href="#" target="_blank">下拉菜单1</a></div>
<div><a href="#" target="_blank">下拉菜单2</a></div>
<div><a href="#" target="_blank">下拉菜单3</a></div>
<div><a href="#" target="_blank">下拉菜单4</a></div>
</div>
</div>
</div>
<script>
window.onload = function(){
var
getTypeElement = function (es,type) {
var esLen = es.length,
i = 0,
eArr = [],
esl = null;
for(;i<esLen;i++){
esl = es[i];
if(esl.nodeName.replace("#","").toLocaleLowerCase() == type){
eArr.push(esl);
}
}
return eArr;
},
navs = getTypeElement(document.getElementById('pullDownNavigation').childNodes,"div"),
i = 0,
l = navs.length,
targetID = null;
for(; i<l; i++){
navs[i].onmousemove = function () {
targetID = this.getAttribute("data-targetID");
document.getElementById(targetID).style.display = "block";
}
navs[i].onmouseout = function(){
document.getElementById(targetID).style.display = "none";
}
}
}
</script>
</body>
</html>
下拉导航
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 简单的实现了上滑导航栏渐渐显示 下拉自定义下拉刷新动画 https://github.com/xiaoniu-xi...
- 模仿新浪微博个人主页 - 图片下拉放大 导航栏下拉隐藏 上拉出现 需求： 在实际项目开发中经常会遇到这样的需求： ...
- 心情不好就去做饭，小心把菜给烧糊了。 天气不好，心情会有点失落，就会产生一种负面的情绪，我们在天气晴朗的时候借由运...
