很不錯(cuò)的陰影菜單，仿XP經(jīng)典風(fēng)格

2024-09-05 12:20:01

字體：大中小

供稿：網(wǎng)友

很不錯(cuò)的陰影菜單，仿XP經(jīng)典風(fēng)格，菜單下邊會(huì)顯示陰影，每個(gè)菜單項(xiàng)在鼠標(biāo)滑過(guò)后自動(dòng)變色，和Windows XP經(jīng)典模式下的風(fēng)格很相似，總體感覺(jué)還不錯(cuò)。

<title>很不錯(cuò)的陰影菜單，仿XP經(jīng)典風(fē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="70qarhlowxag"   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'">站長(zhǎng)故事</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'">微軟中國(guó)</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滑動(dòng)門(mén)，兼容性非常好

下一篇：B2B網(wǎng)站的滑動(dòng)門(mén)，可以定義某個(gè)TAB是否滑動(dòng)切換