下拉菜单的实现，附图说明解决思路
日期：2014-05-17 浏览次数：20727 次
下拉菜单的实现，附图说明
下拉1与下拉2的点击独立，展开菜单后自动调整页面长度，含三角形方向变化
经常在网页上看到这种效果，不知道怎么实现，
本人绝对菜鸟，求指教
------解决方案--------------------
下拉1与下拉2的点击独立，展开菜单后自动调整页面长度，含三角形方向变化
经常在网页上看到这种效果，不知道怎么实现，
本人绝对菜鸟，求指教
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
* { margin:0; padding:0; font-size:14px; }
ul { list-style:none; }
.arr {
display:inline-block;
position:absolute; left:40px; top:9px;
width:0; height:0; overflow:hidden;
border:5px dashed transparent;
}
.arr-t {
border-top:5px solid #000; _border-width:4px;
}
.arr-b {
top:4px;
border-bottom:5px solid #000;
}
.bar {
margin:100px;
}
.bar li {
position:relative;
margin-top:4px;
padding:4px 6px;
width:80px;
border:1px solid #999;
cursor:pointer;
}
.bar li div {
padding-left:10px;
}
</style>
</head>
<body>
<ul class="bar" id="bar">
<li>
菜单<span class="arr arr-t"></span>
<div style="display:none;">
1-1<br />
1-1<br />
1-1<br />
</div>
</li>
<li>
菜单<span class="arr arr-t"></span>
<div style="display:none;">
1-1<br />
1-1<br />
1-1<br />
</div>
</li>
</ul>
<script>
var $ = function(id){
return document.getElementById(id);
};
var $t = function(tag, cot){
cot = cot || document;
return cot.getElementsByTagName(tag);
};
var objs = $t('li', $('obj'));
for(var i = 0, len = objs.length; i < len; i++){
objs[i].onclick = function(){
var d = $t('div', this)[0];
var s = $t('span', this)[0];
if( d.style.display == 'none' ){
d.style.display = 'block';
s.className = s.className.replace('arr-t', 'arr-b');
}else{
d.style.display = 'none';
s.className = s.className.replace('arr-b', 'arr-t');
}
}
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
