很不错的阴影菜单，仿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 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是否滑动切换

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注