Home > Article > Web Front-end > Implementation of drop-down menu, with picture description_html/css_WEB-ITnose
Implementation of drop-down menu, with picture description_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:171003browse
The clicks of drop-down 1 and drop-down 2 are independent. After the menu is expanded, the page length is automatically adjusted, including changes in the direction of the triangle.
I often see this effect on web pages. I don’t know how to achieve it. ,
I am an absolute novice, please give me some advice
Reply to the discussion (solution)
I don’t understand what you mean?
Similar to the directory index function above http://emulefans.com/, but this one is more simplified. The clicks of drop-down 1 and drop-down 2 are independent. After the menu is expanded, the page length is automatically adjusted, including changes in the direction of the triangle
I often see this effect on web pages, but I don’t know how to achieve it.
I am an absolute novice, please give me some advice
Use the third-party NavBarControl control
It can be achieved with JAVASCRIPT under BS.
Can you be more detailed? I usually use DW, and it is not entry-level. It can be implemented with JAVASCRIPT under BS.
The arrow is actually a small picture. When the OnClick event is triggered, the src attribute of this picture is changed. The submenu is to hide and display the modification of properties.
Let’s try it first. The arrow is actually a small picture. When the OnClick event is triggered, the src attribute of the picture is changed. The submenu is to hide and display the modification of properties.
<!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> Try it
It’s really useful. Just modify the appearance and it should be fine. Thank you very much
Sorry for the slow reply.
HTML code
fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
; title>6e916e0f7d1e588d4f442bf645aedb2f