/* The wrapper div should be wrapped around the page content and be at least 100% page height for the iPade, iPhone and iPod Touch */ html, body {padding:0; margin:0; height:100%;} .wrapper {height:100%;} .clear {clear:left;} /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/cssplay-touch-flyout.html Copyright (c) Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu {position:absolute; z-index:100; margin:12em 20px 100px 10px; float:left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -ms-touch-action: none; } /* padding T R L B, color of main menu box */ .menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:10px 15px 10px 15px; border-radius:10px; float:left; background: rgb(230, 230, 230); box-shadow:-5px 5px 5px rgba(0,0,0,0.4); } .menu li {display:block; position:relative; margin:0 -5px;} .menu li {*margin-top:-5px;} /* for IE7 to position the list items correctly */ .menu li a.hassub {background: url(right.gif) no-repeat right center;} .menu li a.hassub {background: url(http://vortexengine.ca/horizarrow.gif) no-repeat right center;} .menu ul ul {position:absolute; left:100%; top:-10px; opacity:0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; -webkit-transform:scale(0,1); -moz-transform:scale(0,1); -o-transform:scale(0,1); transform:scale(0,1); -webkit-transition: 0.5s 0.15s; -o-transition: 0.5s 0.15s; -moz-transition: 0.5s 0.15s; transition: 0.5s 0.15s; } .menu ul ul {*top:-5px;} /* for IE7 to position the sub menus correctly */ .menu ul#p1, .menu ul#p2, .menu ul#p7, .menu ul#p8 {background-color: rgb(220,220,220);} .menu ul#p3, .menu ul#p5, .menu ul#p6, .menu ul#p9, .menu ul#p11 {background-color:#6a0;} .menu ul#p4, .menu ul#p10 {background-color:#868;} /* controls menu text color */ .menu a {display:block; font:normal 16px/30px "Ubuntu Condensed", arial, sans-serif; color:#000; text-decoration:none; padding:0 30px 0 10px; position:relative; z-index:10;} .menu ul li b {display:block; position:relative; margin-top:-30px; width:100%; height:30px; background: url(trans.gif); z-index:100; -webkit-transition:0.75s; -o-transition:0.75s; -moz-transition:0.75s; transition:0.75s; } .menu li:hover > b {width:0;} .menu li:hover > a {background-color:#ff0; text-decoration:underline;} .menu li:hover > ul {left:100%; opacity:1; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } .menu li:hover > a.hassub {background:none;}