Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
jQueryを用いたメニューの表示を練習しています スマホで閲覧した際（画面幅700px以下の時）、「ハンバーガーメニューのアイコンを押したら画面一杯にメニュー(.header nav)が表示される」という動きをつけているのですが現在メニューが最初から表示されてしまうという状況になっています
.header navにはすでにdisplay:flex;を設定しているので、display:none;を設定すると打ち消されたりしてレイアウトが崩れてしまいます
どうにか.header nav を非表示にする方法はないでしょうか
```HTML
</body> ```<section class="top-page"> <h1 class="site-title">Cresta Design</h1> </section>
CSS
1@charset "UTF-8"; 2html{font-size:62.5%;} 3*,*::before,*::after{box-sizing: border-box;} 4body{font-family: "Roboto","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo sans-serif;} 5a{text-decoration: none;} 6.header{width:100%; height:74px; display:flex; justify-content:space-between; 7align-items: center; background-color:#1B1310; border-bottom:2px solid #fff;} 8.header h4{font-size:26px; color:#fff; margin-left:120px;} 9.header ul{margin-right: 93px;} 10.header li{font-size:16px; display:inline-block; padding:0px 27px;} 11.header a{color:#fff;} 12.fas{display:none!important;} .hamburger-button{cursor:pointer;} 13.header p{color:white;} 14 15 .top-page{background:url(../img/fv-bgi@2x.jpg) no-repeat; height:740px; 16 background-size:cover; position: relative;} 17 .site-title{font-size:50px; color:#fff; font-weight:normal; 18 position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); 19 padding:35px 42px; border:2px solid #fff; letter-spacing:1px;} 20 @media(max-width:700px){ 21 22 .header nav{position:fixed; top:0; background-color:black; z-index:1; width:100%; height:665px; 23 display:flex; justify-content:center; align-items:center; } 24 25 .header ul{margin-right:0px; width:100%;} 26 .header li{display:block; padding:0px; height:calc(242px/3); 27 transition:0.25s;} 28 .header li:hover{background-color:rgba(255,255,255,0.9);} 29 .header a{display:block; height:100%; display:flex; justify-content:center; align-items:center; } 30 .close-button{color:white; position:absolute; top:25px; right:15px; cursor:pointer; font-size:25px; } 31 .fas{display:block!important;} .fa-bars{color:white; font-size:25px; margin-right:15px;} 32 .header h4{margin-left:15px;} 33 .top-page{background:url(../img/fv-bgi_sp@2x.jpg) no-repeat; background-size:cover; margin-bottom:100px; 34 height:590px; 35 } 36 .site-title{font-size:30px; padding-top:30px; padding-bottom:30px;} }
jQuery
1$(function(){$(".hamburger-button").click(function(){$(".header-menu-wrapper").fadeIn();}); 2$(".close-button").click(function(){$(".header-menu-wrapper").fadeOut();}); 3}); 4
回答2件
0
ベストアンサー
非表示にする方法はたくさんあり、これが正解ですと言えるものではないので
いくつか挙げるのでそれをヒントにしてもらえれば幸いです。
- .header nav ulを非表示にする
- .header navを囲む要素を追加して、それを非表示にする
- .header navを非表示にするが、表示させるときに正しく表示されるように工夫する
すべてCSSをうまく調整する必要があります。
syo--さんがどのくらいCSSを習熟しているかわかりませんで、具体的にアドバイスすることは難しいのですが
練習されているような仕組みのサイトはたくさんありますので、それらのコードを見て参考にするのが一番良いと思います。
もし追加でわからないことがあれば、質問してください。
あと質問とは関係ありませんが、.hamburger-buttonはiタグではなくbuttonタグを使うことをおすすめします。
（buttonタグにデフォルトで設定されているCSSを調整して使う必要があります）
投稿2021/02/14 06:40
総合スコア429
ありがとうございます！ 2.の方法を試しました header-menuを囲むようにdivクラスでheader-menu-wrapperを追加しdisplay:none;を指定してみたところ、最初からメニューが表示されるという不具合は消えました しかし、header h4に覆いかぶされず、メニューが画面一杯に広がらないという状況になってしまいました これを直す方法を知っていましたら、教えていただきたいです
buttonタグに関するご忠告もありがとうございます 留意させていただきます
0
html
1 <header class="header"> 2 <h4>クリ☆スタ</h4> 3 <nav class="header-menu">
この中にもう一つdivを入れて、それをdisplay:noneにすれば良いのではないでしょうか。
h4からを非表示にしたいのならその上に入れ、それは最初から表示したいならその下に入れるとよいです。
投稿2021/02/14 06:39
編集2021/02/14 06:42
総合スコア296
あなたの回答
tips
プレビュー
