Implementation of drop-down menu, with picture description_html/css

Implementation of drop-down menu, with picture description_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:11:17

Original

1003 people have browsed it

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>

Copy after login

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

; title>