陰影菜單，Div+Js版，微軟以前網(wǎng)站曾用過

2024-09-05 12:20:30

字體：大中小

供稿：網(wǎng)友

Div+Js實(shí)現(xiàn)的陰影菜單，微軟以前老版網(wǎng)站首頁曾用過，用以索引出Windows產(chǎn)品家族的所有產(chǎn)品，本菜單僅實(shí)現(xiàn)了一個(gè)雛形，想實(shí)現(xiàn)像微軟一樣的效果，估計(jì)還需要做不少工作。放出來的目的是供學(xué)習(xí)CSS的朋友做參考。

<title>陰影菜單，Div+Js版，微軟以前網(wǎng)站曾用過</title><script>var global = window.documentglobal.fo_shadows = new Arrayfunction makeRectangularDropShadow(el, color, size){	var i;	for (i=size; i>0; i--)	{		var rect = document.createElement('div');		var rs = rect.style		rs.position = 'absolute';		rs.left = (el.style.posLeft + i) + 'px';		rs.top = (el.style.posTop + i) + 'px';		rs.width = el.offsetWidth + 'px';		rs.height = el.offsetHeight + 'px';		rs.zIndex = el.style.zIndex - i;		rs.backgroundColor = color;		var opacity = 1 - i / (i + 1);		rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';		el.insertAdjacentElement('afterEnd', rect);		global.fo_shadows[global.fo_shadows.length] = rect;	}}</script><style>body,td,div,a,input{font:menu;line-height:180%}</style><div   class="iwvjtn8m0"   id=menu style="position:absolute; left: 10px; top: 10px; background: #EEEEEE; width: 120px; height: 100px; padding: 3px; border: 1 #999999 solid; cursor: default"><div style="border: 1 solid #EEE"onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'"onmouseout ="this.style.background='#EEE'; this.style.borderColor='#EEE'">CodeFans.net</div><div style="border: 1 solid #EEE"onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'"onmouseout ="this.style.background='#EEE'; this.style.borderColor='#EEE'">源碼愛好者</div><div style="border: 1 solid #EEE"onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'"onmouseout ="this.style.background='#EEE'; this.style.borderColor='#EEE'">網(wǎng)頁特效</div><script>makeRectangularDropShadow(document.all["menu"], "#666666", 4);</script>

上一篇：線條型css滑動門

下一篇：相當(dāng)漂亮的CSS藍(lán)色滑動門式的導(dǎo)航菜單