Creating a MacOS Dock like Menu for WebPage style body min height 500px html height 100 color fff background 222 background image webkit gradient radial 50 0 10 50 0 400 from rgba 255 255 255 0 3 to rgba 255 255 255 0 Safari 5 webkit background image radial gradient center top circle rgba 255 255 255 0 3 0 rgba 255 255 255 0 50 Chrome WK Nightly background image moz radial gradient center top circle rgba 255 255 255 0 3 0 rgba 255 255 255 0 50 Gradient not supported on Opera background repeat no repeat body font family Helvetica Neue Helvetica arial sans serif margin 1em 1em 0 h1 text shadow rgba 255 255 255 7 0px 0px 10px font size 2em img border 0 dock container position fixed bottom 0 text align center width 100 dock position relative display inline block webkit perspective 400 moz perspective 400 dock base position absolute bottom 0 width 100 height 45px z index 10 background color 888 background image webkit gradient linear left top left bottom from 333 to ccc background image webkit linear gradient top 333 999 background image moz linear gradient top 333 999 Gradient works on FF 3 6 opacity 5 border bottom 2px aaa solid webkit transform origin 50 100 webkit transform rotateX 55deg 3d works on webkit only moz transform origin 50 100 moz transform rotateX 55deg not supported on current 3 7 o transform origin 50 100 o transform rotateX 55deg not supported on current 10 6 dock ul font size 14px padding 0 30px margin 0 dock li list style type none display inline block position relative dock li span display none position absolute bottom 140px left 0 width 100 background color rgba 0 0 0 75 padding 4px 0 border radius 12px webkit nightly webkit border radius 12px for safari moz border radius 12px dock li hover span display block dock li img width 64px height 64px margin bottom 10px webkit box reflect below 2px webkit gradient linear left top left bottom from transparent color stop 0 7 transparent to rgba 255 255 255 5 webkit box reflect below 2px webkit linear gradient top transparent rgba 255 255 255 3 webkit transition all 0 3s webkit transform origin 50 100 moz transition all 0 4s moz transform origin 50 100 o transition all 0 3s o transform origin 50 100 dock li hover img webkit transform scale 2 moz transform scale 2 o transform scale 2 margin 0 2em 10px one element after and element before with JS dock li hover li img dock li prev img webkit transform scale 1 4 moz transform scale 1 4 o transform scale 1 4 margin 0 1 4em 10px style h1 Simulating MacOS Dock like Menu h1 div id dock container div id dock ul li span Edit span a href img src https img icons8 com external flatart icons lineal color flatarticons 200 external editor video production flatart icons lineal color flatarticons png a li li span Folders span a href img src https img icons8 com officel 200 symlink directory png a li li span Time span a href img src https img icons8 com officel 200 display png a li li span Radio span a href img src https img icons8 com officel 200 radio png a li li span Strawberry span a href img src https img icons8 com officel 200 strawberry png a li li span Alerts span a href img src https img icons8 com officel 200 fire alarm button png a li ul div class base div div div script function addPrevClass e var target e target if target getAttribute src check if it is img var li target parentNode parentNode var prevLi li previousElementSibling if prevLi prevLi className prev target addEventListener mouseout function if prevLi prevLi removeAttribute class false if window addEventListener document getElementById dock addEventListener mouseover addPrevClass false print user agent string document getElementById ua string innerHTML navigator userAgent console log ready script
px dock li hover span display block dock li img width 64px height 64px margin bottom 10px webkit box reflect below 2px webkit gradient linear left top left bottom from transparent color stop 0 7 transparent to rgba 255 255 255 5 webkit box reflect below 2px webkit linear gradient top transparent rgba 255 255 255 3 webkit transition all 0 3s webkit transform origin 50 100 moz transition all 0 4s moz transform origin 50 100 o transition all 0 3s o transform origin 50 100 dock li hover img webkit transform scale 2 moz transform scale 2 o transform scale 2 margin 0 2em 10px one element after and element before with JS dock li hover li img dock li prev img webkit transform scale 1 4 moz transform scale 1 4 o transform scale 1 4 margin 0 1 4em 10px style h1 Simulating MacOS Dock like Menu h1 div id dock container div id dock ul li span Edit span a href img src https img icons8 com external flatart icons lineal color flatarticons 200 external editor video production flatart icons lineal color flatarticons png a li li span Folders span a href img src https img icons8 com officel 200 symlink directory png a li li span Time span a href img src https img icons8 com officel 200 display png a li li span Radio span a href img src https img icons8 com officel 200 radio png a li li span Strawberry span a href img src https img icons8 com officel 200 strawberry png a li li span Alerts span a href img src https img icons8 com officel 200 fire alarm button png a li ul div class base div div div script function addPrevClass e var target e target if target getAttribute src check if it is img var li target parentNode parentNode var prevLi li previousElementSibling if prevLi prevLi className prev target addEventListener mouseout function if prevLi prevLi removeAttribute class false if window addEventListener document getElementById dock addEventListener mouseover addPrevClass false print user agent string document getElementById ua string innerHTML navigator userAgent console log ready script