Div + Js implemented with shadow menu, which was previously used by Microsoft website _ navigation menu

The Shadow menu implemented by Div + Js has been used by Microsoft on the homepage of an old version of the website to index all products of the Windows product family. This menu only implements a prototype, to achieve the same effect as Microsoft, it is estimated that much work is required. The purpose is for reference by friends who are learning CSS.

<Title> Div + Js-implemented shadow menu used by Microsoft websites before </title> script var global = zookeeper Doc ument global. fo_shadows = new Array function makeRectangularDropShadow (el, color, size) {var I; for (I = size; I> 0; I --) {var rect = document. createElement ('P'); 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, p, a, input {font: menu; line-height: 180%} </style> <p id = menu style = "position: absolute; left: 10px; top: 10px; background: # EEEEEE; width: 120px; height: 100px; padding: 3px; border: 1 #999999 solid; cursor: default "> <p style =" border: 1 solid # EEE "onmouseover =" this. style. background = '# CCC'; this. style. borderColor = '#999' "onmouseout =" this. style. background = '# EEE'; this. style. borderColor = '# EEE' "> Jb51.net </p> <p style =" border: 1 solid # EEE "onmouseover =" this. style. background = '# CCC'; this. style. borderColor = '#999' "onmouseout =" this. style. background = '# EEE'; this. style. borderColor = '# EEE' "> script home </p> <p style =" border: 1 solid # EEE "onmouseover =" this. style. background = '# CCC'; this. style. borderColor = '#999' "onmouseout =" this. style. background = '# EEE'; this. style. borderColor = '# EEE' "> webpage effects </p> script makeRectangularDropShadow (document. all ["menu"], "#666666", 4); script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]