Results 1 to 1 of 1

Thread: Problem CSS with Vertical CSS Menus (DD) ?

  1. #1
    Join Date
    May 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Problem CSS with Vertical CSS Menus (DD) ?

    1) Script Title: Vertical CSS Menus

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ile_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 :
    Code:
    .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
    Last edited by jscheuer1; 05-15-2015 at 03:00 AM. Reason: format

Similar Threads

  1. Vertical menu with mutlitple sub-menus ?
    By daxtrajero in forum Looking for such a script or service
    Replies: 3
    Last Post: 08-10-2010, 04:50 PM
  2. AnyLink Vertical AND Dropdown Menus
    By iowebpub in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 01-14-2009, 01:04 PM
  3. Anylink Vertical 2 menus act different...
    By NancyRoses in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-20-2008, 04:57 AM
  4. AnyLink Vertical Menu and large menus
    By Will.Spencer in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-06-2005, 05:42 AM
  5. Multiple Vertical Menus on one web page
    By vsmile in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-27-2005, 02:58 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •