javascript - SVG animation not working in Firefox -
i'm trying set simple navi i'm kinda stuck. icon transforming different in firefox , chrome, doing wrong, there simple fix this?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>css navigation menu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="main.js"></script> <link href='http://fonts.googleapis.com/css?family=oxygen' rel='stylesheet' type='text/css'> </head> <body> <nav> <label for="show-menu" class="show-menu"> <div class="burger"> <svg id="svg-burger" version="1.1" baseprofile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100" xml:space="preserve"> <g> <rect class="top" y="20" fill="#454646" width="100" height="10" /> <rect class="middle" y="45" fill="#454646" width="100" height="10" /> <rect class="bottom" y="70" fill="#454646" width="100" height="10" /> </g> </svg> </div> </label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">home</a></li> <li> <a href="#">about ￬</a> <ul class="hidden"> <li><a href="#">who are</a></li> <li><a href="#">what do</a></li> </ul> </li> <li> <a href="#">portfolio ￬</a> <ul class="hidden"> <li><a href="#">photography</a></li> <li><a href="#">web & user interface design</a></li> <li><a href="#">illustration</a></li> </ul> </li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> </ul> </nav> </body> </html> /*reset css http://meyerweb.com/eric/tools/css/reset/ */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0} body { font-family: 'oxygen', sans-serif;; } /*strip ul of padding , list styling*/ nav ul { list-style-type:none; margin:0; padding:0; position: absolute; } /*create horizontal list spacing*/ nav li { display:inline-block; float: left; margin-right: 1px; } /*style menu links*/ nav li { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; color: #fff; background: #2f3036; text-decoration: none; } /*hover state top level links*/ nav li:hover { background: #19c589; } /*style dropdown links*/ nav li:hover ul { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /*hover state dropdown links*/ nav li:hover ul a:hover { background: #19c589; color: #fff; } /*hide dropdown links until needed*/ nav li ul { display: none; } /*make dropdown links vertical*/ nav li ul li { display: block; float: none; } /*prevent text wrapping*/ nav li ul li { width: auto; min-width: 100px; padding: 0 20px; } /*display dropdown on hover*/ nav ul li a:hover + .hidden, .hidden:hover { display: block; } /*style 'show menu' label button , hide default*/ .show-menu { text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*hide checkbox*/ nav input[type=checkbox]{ display: none; } /*show menu when invisible checkbox checked*/ nav input[type=checkbox]:checked ~ #menu{ display: block; } /*########################################################################################*/ h1 { text-transform: uppercase; color: #60c0b2; } #svg-burger, #svg-arrow { height: 4rem; } #svg-burger line, #svg-burger rect, #svg-arrow line, #svg-arrow rect { transition: 0.2s ease-out; } .close #svg-burger rect:nth-of-type(1) { transform: rotate(45deg) translate(20%, -245%); } .close #svg-burger rect:nth-of-type(2) { opacity: 0; } .close #svg-burger rect:nth-of-type(3) { transform: rotate(-45deg) translate(-50%, -50%); } .open #svg-burger rect:nth-of-type(1) { transform: rotate(0) translate(0, 0); } .open #svg-burger rect:nth-of-type(2) { opacity: 1; } .open #svg-burger rect:nth-of-type(3) { transform: rotate(0) translate(0, 0); } .close #svg-arrow line:nth-of-type(1) { transform: translatex(42%); } .close #svg-arrow line:nth-of-type(2) { transform: translatex(-42%); } .open #svg-arrow line:nth-of-type(1) { transform: translatex(0); } .open #svg-arrow line:nth-of-type(2) { transform: translatex(0); } /*########################################################################################*/ /*responsive styles*/ @media screen , (max-width : 760px){ /*make dropdown links appear inline*/ nav ul { position: static; display: none; } /*create vertical spacing*/ nav li { margin-bottom: 1px; } /*make menu links full width*/ nav ul li, li { width: 100%; } /*display 'show menu' link*/ .show-menu { display:block; } } $(document).ready(function() { (function () { $('.burger').on('click', function (e) { if ($(this).hasclass('close')) { return $(this).removeclass('close').addclass('open'); } else { return $(this).addclass('close').removeclass('open'); } }); }.call(this)); });
firefox not support percentage based values transform . should go px values , should work you.
.close #svg-burger rect:nth-of-type(3){ transform:rotate(-45deg) translate(-60px, -10px); } .close #svg-burger rect:nth-of-type(1){ transform:rotate(45deg) translate(15px, -15px); } the above changes should work fine giving required animation .
Comments
Post a Comment