Heim >Web-Frontend >HTML-Tutorial >下拉菜单的实现，附图说明_html/css_WEB-ITnose
下拉菜单的实现，附图说明_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:171040Durchsuche
下拉1与下拉2的点击独立，展开菜单后自动调整页面长度，含三角形方向变化
经常在网页上看到这种效果，不知道怎么实现，
本人绝对菜鸟，求指教
回复讨论(解决方案)
不明白你这是什么意思？
类似http://emulefans.com/上面的目录索引功能，不过这个更简化一些 下拉1与下拉2的点击独立，展开菜单后自动调整页面长度，含三角形方向变化
经常在网页上看到这种效果，不知道怎么实现，
本人绝对菜鸟，求指教
用第三方的NavBarControl控件
BS下可以用JAVASCRIPT实现。
能否详细一点，我一般都是用DW，而且还是未入门级的 BS下可以用JAVASCRIPT实现。
箭头其实是小图片，当触发OnClick事件之后就改变这个图片的src属性。子菜单就是隐藏和显示属性的修改。
先去试试 箭头其实是小图片，当触发OnClick事件之后就改变这个图片的src属性。子菜单就是隐藏和显示属性的修改。
<!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> 试试
的确有用，再好好地修改一下外观应该就可以了，十分感谢
回复比较慢，见谅
HTML code
nbsp;HTML>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求一款css sprite小图片合并工具_html/css_WEB-ITnoseNächster Artikel：HTML5：video标签我这视频怎么播放不了？