ハンバーガーメニューボタンを押してメニューが出てくる所は問題ないのですが、もう一度ボタンを押してメニューを引っ込めようとするとheaderの上を通ってしまいます。z-indexを設定してもうまくいきません、問題は何でしょうか?
<!DOCTYPE html> <head> <meata lang="ja"> <link rel="stylesheet" type="text/css" href="design.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <body> <header> <div class="title">Title </div> <div class="navToggle"> <div> <span></span> <span></span> <span></span> </div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">What is it?</a></li> <li><a href="#">Contact</a></li> <li><a href="#">twitter</a></li> </ul> </header> <script> $('.navToggle').on('click',function(){ $('header ul').toggleClass('showing'); }); </script> </body>
body{ padding:0; margin:0; } header{ position:relative; top:0px; left:0px; width:100%; height:4em; background-color: #F5A9A9; } .title{ font-size: 25px; color:white; font-family: arial black; position:absolute; top: 0; left: 5%; bottom: 0; margin: auto; width: 40%; height:65%; } .navToggle{ display:none; position:absolute;/*bodyに対しての絶対位置指定*/ right:20px; top:0; bottom:0; margin:auto; width:30px; height:25px; cursor:pointer; border:solid 1px white; padding:5px 5px 0 5px; border-radius: 5px; } .navToggle div{ position: relative; } .navToggle span{ display:block; width:100%; border-bottom:solid 3px white; margin-bottom:5px; } header ul{ position:absolute; top:0; bottom:0; right:5%; vertical-align: middle; display:table; margin:auto; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } header li{ border-right:solid white 0.5px; color:black; display:table-cell; padding-right:10px; padding-left: 10px; font-size: 15px; cursor:pointer; } a{ text-decoration: none; color:inherit; } @media screen and (max-width:630px){ .navToggle{ display:block; } .showing{ max-height: 20em; position:relative; top:64px; bottom:0; left:0; right:0; } header ul{ max-height: 0; position:static; display:block; width:100%; padding:0; overflow: hidden; } header ul li{ box-sizing:border-box; width:100%; padding:15px; display:block; text-align: center; border-bottom:solid 1px #777; } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/03 04:49
2017/05/03 05:02