html
1<!DOCTYPE html> 2<html lang="ja" prefix="og: http://ogp.me/ns#"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2"> 6 <link rel="stylesheet" href="practice13-for-pc.css" type="text/css" media="screen and (max-width: 2000px) and (min-width: 1400px)"> 7 <link rel="stylesheet" href="practice13-for-sm.css" type="text/css" media="screen and (max-width: 740px) and (min-width: 410px)"> 8 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 11 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> 12 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> 13 <script async src="https://platform.twitter.com/widgets.js"></script> 14 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 15 <title>practice13</title> 16</head> 17 18<body> 19 <header> 20 <div class="inner"> 21 <img class="header-logo-back" src="https://writer-station.com/img/front/pc_img/bg_wave.svg?1578457100" alt=""> 22 <div class="header-logo"> 23 <a href="https://writer-station.com/"> 24 <img class="img-white" src="https://writer-station.com/img/front/pc_img/logo_ttl_white.svg" alt=""> 25 <img class="img-blue" src="https://writer-station.com/img/front/pc_img/logo_ttl_blue.svg" alt=""> 26 <p>WRITER STATION<br><span class="big">ライターステーション</span><p></a> 27 </div> 28 <a class="nav-button" href="#"> 29 <span></span> 30 <span></span> 31 <span></span> 32 </a> 33 <div id="gloval-nav"> 34 <nav> 35 <ul> 36 <li><a href="https://writer-station.com/#overview">▽仕事の概要</a></li> 37 <li><a href="https://writer-station.com/#overview">▽案件例</a></li> 38 <li><a href="https://writer-station.com/#overview">▽対象とする人</a></li> 39 <li><a href="https://writer-station.com/#overview">▽サポート体制</a></li> 40 <li><a href="https://writer-station.com/#overview">▽先輩登録者の声</a></li> 41 <li><a href="https://writer-station.com/#overview">▽Q&A</a></li> 42 <li><a href="https://writer-station.com/#overview">▽ブログ</a></li> 43 <li><a href="https://writer-station.com/#overview">▽ログイン</a></li> 44 <li><a href="https://writer-station.com/#overview">▽登録する</a></li> 45 <li><a href="https://writer-station.com/#overview">▽再チャレンジ</a></li> 46 </ul> 47 </nav> 48 </div> 49 </div> 50 </header> 51以下コンテンツが続く
css
1.inner { 2 overflow: hidden; 3 margin: 0; 4 padding: 0; 5 max-width: 100%; 6} 7body { 8 margin: 0; 9 padding: 0; 10 font-family:"verdana","MSPゴシック","Arial","sans-serif"; 11} 12body a { 13 text-decoration: none; 14} 15body ul { 16 list-style: none; 17} 18header { 19 position: fixed; 20 background-color: white; 21 z-index: 1002; 22 width: 100%; 23 height: 8%; 24 margin: 0; 25 padding: 0 0 1% 0; 26} 27#page_top { 28 display: none; 29} 30.blue { 31 color: #0164C9; 32} 33.header-logo-back { 34 display: none 35} 36.img-white { 37 display: none; 38} 39.img-blue { 40 width: 11%; 41 height: 5.5%; 42} 43.header-logo { 44 position: absolute; 45 left: 7%; 46} 47.header-logo p { 48 color: #0164C9; 49 display: inline-block; 50 font-size: 0.8rem; 51} 52.big { 53 font-weight: 900; 54 font-size: 1.2rem; 55} 56.header-menu { 57 display: none; 58} 59.header-sub { 60 display: none; 61} 62.nav-button { 63 display: none; 64} 65.nav-button, .nav-button span { 66 display: inline-block; 67 transition: all 0.4s; 68 box-sizing: border-box; 69} 70.nav-button { 71 z-index: 20; 72 position: relative; 73 width: 40px; 74 height: 0px; 75} 76.nav-button span { 77 position: absolute; 78 left: 800%; 79 width: 100%; 80 height: 4px; 81 background-color: #333; 82 border-radius: 4px; 83 } 84 .nav-button span:nth-of-type(1) { 85 margin: 25% 0 0 0; 86 } 87 .nav-button span:nth-of-type(2) { 88 margin: 45% 0 0 0; 89 } 90 .nav-button span:nth-of-type(3) { 91 margin: 65% 0 0 0; 92 } 93 .nav-button.active span:nth-of-type(1) { 94 -webkit-transform: translateY(16px) rotate(-45deg); 95 transform: translateY(16px) rotate(-45deg); 96 } 97 .nav-button.active span:nth-of-type(2) { 98 opacity: 0; 99 } 100 .nav-button.active span:nth-of-type(3) { 101 -webkit-transform: translateY(-16px) rotate(45deg); 102 transform: translateY(-16px) rotate(45deg); 103 } 104#gloval-nav.open { 105 display: block; 106 } 107 108#gloval-nav.close { 109 display: none; 110} 111#gloval-nav ul { 112 background: rgb(76,76,76,0.8); 113 position: relative; 114 top: -35px; 115 padding: 10% 0 100% 0; 116 width: 100%; 117 118 119} 120#gloval-nav li { 121 font-size: 1em; 122 padding: 2% 0 0 35%; 123 width: 100%; 124 margin: 0; 125} 126#gloval-nav a { 127 color: white; 128 display: block; 129 text-align: left; 130}
js
1<script> 2if (window.matchMedia( '(min-width: 410px)and(max-width: 740px)' ).matches) { 3 $(function() { 4 $('.nav-button').on('click', function() { 5 if ($(this).hasClass('active')) { 6 $(this).removeClass('active'); 7 $('#gloval-nav') 8 .addClass('close') 9 .removeClass('open'); 10 } else { 11 $(this).addClass('active'); 12 $('#gloval-nav') 13 .addClass('open') 14 .removeClass('close'); 15 } 16 }); 17}); 18} 19</script>
前提・実現したいこと
レスポンシブ対応のためにハンバーガメニューを作っているのですが、gloval-navを表示非表示をしたいにですが、toggleやhideを使っても上手くいきません。
まず現時点のjsが機能しません。cssでdislay: none;にしてからjsでshowにしてもダメでした。
どこが間違っているのでしょうか?
あと、ネットなどでハンバーガメニューの作り方を見た際にspanを使ってやられている例が多かったのですが、どちらのやり方の方が、今回のサイトにふさわしいのでしょうか?
個人的には、画像を使う方がやりやすいと感じるのですが、、、
補足情報(FW/ツールのバージョンなど)
模写をしているので元サイトと同じ見栄えにしたいです。
元サイトのURLは(https://writer-station.com/)です。
よろしくお願いいたします!!
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/24 14:06
2020/03/10 13:35 編集