発生している問題・エラーメッセージ
トグルメニューを開いたまま画面幅を広げ、ブレイクポイントを超えるとリンクのテキストが表示されたままになります。
これを画面幅が一定以上になるとリンクテキストが残らないようにしたいです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 8 <link rel="stylesheet" href="css/reset.css"> 9 <link rel="stylesheet" href="css/service1.css"> 10 <title>SERVICE1</title> 11</head> 12<body> 13 <header> 14 <div class="flex-md-row align-items-center hf-box justify-content-between"> 15 <h5 class="mr-md-auto com">Company</h5> 16 <nav> 17 <a class="text-dark home" href="home.html">Home</a> 18 <a class="text-dark info" href="info.html">会社情報</a> 19 </nav> 20 <a class="btn-top cont" href="contact.html">お問い合わせ</a> 21 <!--トグルメニュー--> 22 <div class="toggle-menu"> 23 <ul class="toggle-bar"> 24 <li></li> 25 <li class="center-bar"></li> 26 <li></li> 27 </ul> 28 </div> 29 <!--トグルメニュー--> 30 </div> 31 </header> 32 <section class="section-top_navy"> 33 <!--メニュー--> 34 <div class="toggle-filter"> 35 <ul class="filter-menu"> 36 <li><a href="home.html">Home</a></li> 37 <li><a href="info.html">会社情報</a></li> 38 <li><a href="contact.html">お問い合わせ</a> </li> 39 </ul> 40 </div> 41 <!--メニュー--> 42 <div class="work-image_navy"> 43 <p class="work-image-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 44 </div> 45 </section> 46 47 <div class="section-md_photo"> 48 <div class="work-image"> 49 <p class="work-image-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 50 </div> 51 </div> 52 <section class="service1"> 53 <h1>SERVICE1</h1> 54 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p> 55 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p> 56 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p> 57 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p> 58 </section> 59 <div class="section-bt_photo"> 60 <div class="work-image"> 61 <p class="work-image-text_black">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 62 </div> 63 </div> 64 65 <section class="service1_desc"> 66 <h2>見出し</h2> 67 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p> 68 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p> 69 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p> 70 <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p> 71 <a class="btn-top buttom-cont" href="contact.html">お問い合わせ</a> 72 </section> 73 <footer> 74 <div class="d-flex flex-column flex-md-row align-items-center hf-box"> 75 <a href="privacy.html"><h5 class="mr-md-auto prv">プライバシーポリシー</h5></a> 76 </div> 77 </footer> 78 79 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 80 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 81 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 82 <script src="js/script.js"></script> 83</body> 84</html>
css
1html { 2 font-size: 15px; 3} 4body { 5 width: 100%; 6 font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro"; 7} 8header, footer { 9 background-color: #eee; 10} 11.hf-box { 12 height: 100px; 13 padding: 0 152px; 14 display: flex; 15} 16.btn-top { 17 background-color: #03004c; 18 color: #fff; 19 width: 170px; 20 height: 50px; 21 border-radius: 10px; 22 display: flex; 23 justify-content: center; 24 align-items: center; 25} 26.btn-top:hover { 27 color: #fff; 28 background-color: #0903c9; 29} 30.toggle-menu { 31 display: none; 32} 33.toggle-filter { 34 display: none; 35} 36.toggle-menu { 37 display: none; 38} 39a:hover { 40 text-decoration: none; 41 opacity: 0.7; 42} 43.com { 44 font-size: 30px; 45} 46.home { 47 font-size: 24px; 48 margin-right: 40px; 49} 50.info { 51 font-size: 24px; 52 margin-right: 55px; 53} 54.cont { 55 font-size: 20px; 56} 57.cont:hover { 58 text-decoration: none; 59} 60 61@media screen and (max-width:960px) { 62 .toggle-menu { 63 display: block; 64 background-color: #03004c; 65 width: 50px; 66 height: 50px; 67 padding: 5px; 68 border-radius: 10px; 69 display: flex; 70 justify-content: center; 71 align-items: center; 72 } 73 .toggle-bar > li{ 74 width: 38px; 75 height: 6px; 76 background-color: #fff; 77 list-style: none; 78 } 79 .center-bar { 80 margin: 7px 0; 81 } 82 nav, 83 .btn-top { 84 display: none; 85 } 86 .toggle-filter { 87 display: none; 88 width: 100%; 89 height: 130px; 90 padding: 10px 0; 91 font-size: 1.5rem; 92 text-align: center; 93 justify-content: center; 94 align-items: center; 95 background-color: rgba(255,255,255,0.9); 96 position: absolute; 97 } 98 .filter-menu { 99 list-style: none; 100 } 101 .filter-menu > li:nth-child(2n) { 102 margin: 20px 0; 103 } 104 li > a { 105 color: #000; 106 } 107} 108@media screen and (max-width:768px) { 109 header, 110 section, 111 footer { 112 padding: 0 40px; 113 } 114 .toggle-filter { 115 display: none; 116 left: 0; 117 } 118}
javaScript
1$(function(){ 2 $('.toggle-menu').click(function() { 3 $('.toggle-filter').slideToggle(); 4 }); 5 6 //画面幅が960px以上になったとき、$('.filter-menu')(リンクテキスト)を非表示にする 7 //これが効きません 8 var windowWidth = $(window).width(); 9 var breakPoint = 960; 10 if(windowWidth > breakPoint){ 11 $('.filter-menu').hide(); 12 }; 13 14});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/18 06:00