PDA

View Full Version : Problem CSS with Vertical CSS Menus (DD) ?



insidebasket
05-14-2015, 06:53 PM
1) Script Title: Vertical CSS Menus

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/mobile_side_menu/

3) Describe problem: Hi,

I've a problem with this menu (fabulous by the way) but only on safari browser. The cross disapears on Safari (but not on mobile like iPhone ^^) and finally, it's just a simple line. No problem for IE, Chrome or Firefox.

Here website : http://www.insidebasket.com

CSS :
.menu{width:0}.menu,.menu *{-moz-box-sizing:border-box;box-sizing:border-box}.menu input[type="checkbox"]{position:absolute;left:0;top:0;visibility:hidden}.menu>label{z-index:100;display:block;position:relative;font-size:9px;width:3.5em;height:3em;top:15px;left:20px;background:#222;text-indent:-1000px;border:.6em solid #FFF;border-width:.6em 0;cursor:pointer;-moz-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;border-radius:2px}.menu>label::before,.menu>label::after{content:"";display:block;position:absolute;width:100%;height:.6em;top:50%;margin-top:-0.3em;left:0;background:#FFF;-moz-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0);-moz-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;transition:all .2s ease-in}.menu nav{margin:0;padding:10px;position:fixed;text-transform:uppercase;font-family:"Roboto Condensed";font-size:16px;font-weight:700;width:320px;height:100%;left:-320px;border-right:4px solid #b71717;top:0;z-index:10000;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);background:#222;-moz-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;transition:all .2s ease-in}.menu ul{list-style:none;margin:0;padding:0}.menu li a{display:block;text-decoration:none;font-size:16px;border-left:4px solid #000;color:#FFF;margin:0;padding:10px}.menu li a:hover{background:#000;color:#FFF}.menu nav label{font-size:20px;font-weight:400;cursor:pointer;position:absolute;text-transform:lowercase;right:0;top:0;-moz-border-radius:0 0 0 40px;-webkit-border-radius:0 0 0 40px;border-radius:0 0 0 40px;width:40px;height:30px;background:#b71717;text-align:center}.menu nav label::after{content:"x";color:#FFF;display:block;margin-left:6px}.menu .overlay{position:fixed;width:100%;height:100%;left:0;top:0;opacity:.6;background:#000;z-index:1001;visibility:hidden}.menu .overlay label{width:100%;height:100%;position:absolute}.menu nav label:hover::after{-moz-transform:rotatey(180deg);-ms-transform:rotatey(180deg);-webkit-transform:rotatey(180deg);transform:rotatey(180deg)}.menu input[type="checkbox"]:checked ~ label{border-color:transparent}.menu input[type="checkbox"]:checked ~ label::before{transform:rotate(-45deg)}.menu input[type="checkbox"]:checked ~ label::after{transform:rotate(45deg)}.menu input[type="checkbox"]:checked ~ nav{left:0}.menu input[type="checkbox"]:checked ~ div.overlay{visibility:visible}.menu nav{font-weight:700;color:#B71717;line-height:26px}

Thanks you for your help