很不錯的陰影菜單，仿XP經典風格

2024-09-05 12:20:01

字體：大中小

來源：轉載

供稿：網友

很不錯的陰影菜單，仿XP經典風格，菜單下邊會顯示陰影，每個菜單項在鼠標滑過后自動變色，和Windows XP經典模式下的風格很相似，總體感覺還不錯。

<title>很不錯的陰影菜單，仿XP經典風格</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="ftd9rbz"   id=menu style="position:absolute; left: 10px; top: 10px; background: #EEEEEE; width: 200px; 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'">陰影菜單</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'">精彩博文</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'">微軟中國</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><script>makeRectangularDropShadow(document.all["menu"], "#666666", 4);</script>

上一篇：CSS滑動門，兼容性非常好

下一篇：B2B網站的滑動門，可以定義某個TAB是否滑動切換