質問編集履歴

code機能を利用して更新しました

2020/10/15 03:29

投稿

o2_

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,7 +1,3 @@
-### 前提・実現したいこと
 ハンバーガーメニューを設置しており、ページ内リンクがあるのですが、
 ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じないため、ページ移動したという感じがしません。
@@ -12,53 +8,51 @@
-以下、CSSのみ一部抜粋して記載しています。
-### HTML
+```HTML
 <div class="toggle_2" style="z-index: 600;"><a href="tel:0000000"><img src="img/tel.png" alt="" class="sp_tel"></a><a href="https://lin.ee/eJP7DPR"><img src="img/img.png" alt="" class="sp_line"></a>
-        <a href="https://www."><img src="img/inst.png" alt="" class="sp_inst"></a></div>
+<a href="https://www."><img src="img/inst.png" alt="" class="sp_inst"></a></div>
-    <div class="toggle" id="navToggle">
+<div class="toggle" id="navToggle">
-        <span class="toggle__bar"></span>
+<span class="toggle__bar"></span>
-    </div>
+</div>
 <nav class="menu_area">
-        <ul>
+<ul>
-            <li><a href="index.html">テキスト</a></li>
+<li><a href="index.html">テキスト</a></li>
-            <li><a href="a.html">テキスト</a></li>
+<li><a href="a.html">テキスト</a></li>
-            <li><a href="a.html">テキスト</a></li>
+<li><a href="a.html">テキスト</a></li>
-            <li><a href="c.html">テキスト</a></li>
+<li><a href="c.html">テキスト</a></li>
-            <li><a href="#d">テキスト</a></li>
+<li><a href="#d">テキスト</a></li>
-            <li><a href="#e">テキスト</a></li>
+<li><a href="#e">テキスト</a></li>
-        </ul>
+</ul>
-    </nav>
+</nav>
-<div id="overlay" title="メニューを閉じる"></div>
+```
-### css
+```css
 ハンバーガーに必要なcss */
 body{
-    position: relative;
+position: relative;
 }
@@ -66,296 +60,238 @@
 .container{
-    position: absolute;
+position: absolute;
-    width: 100%;
+width: 100%;
 }
 .menu_area{
-    text-align: right;
+text-align: right;
-    height: 100vh;
+height: 100vh;
-    // background: $sub;
+// background: $sub;
-    opacity: 0;
+opacity: 0;
-    & > ul{
+& > ul{
-        float: right;
+float: right;
-        padding: 100px 10px 0;
+padding: 100px 10px 0;
-        margin: 0;
+margin: 0;
-        text-align: left;
+text-align: left;
-        font-size: 1.8rem;
+font-size: 1.8rem;
-        font-weight: bold;
+font-weight: bold;
-        text-align: center;
+text-align: center;
-        width: 100%;
+width: 100%;
-        a{
+a{
-            color: #000
+color: #000
-        }
+}
-        & > li{
+& > li{
-            display: block;
+display: block;
-            padding: 15px 10px;
+padding: 15px 10px;
-        }
+}
-    }
+}
-    &.open{
+&.open{
-        position: fixed;
+position: fixed;
-        opacity: 1;
+opacity: 1;
-    }
+}
 }
 .container {
-    background: #fff;
+background: #fff;
-    min-height: 100vh;
+min-height: 100vh;
-    transition: .5s;
+transition: .5s;
-    @media (max-width: 749px){
+@media (max-width: 749px){
-        height:100%;
+height:100%;
-        }
+}
-    &.open{
+&.open{
-        // transform: translateX(-200px);
+// transform: translateX(-200px);
-        transform: translateX(-100%);
+transform: translateX(-100%);
-    }
+}
 }
 .toggle{
-    width: 40px;
-    height: 30px;
-    cursor: pointer;
-    position: fixed;
-    z-index: 2;
-    top: 15px;
-    right: 10px;
-    z-index: 600;
-    &__bar{
-        width: 100%;
-        height: 2px;
-        background: $text;
-        position: absolute;
-        top: 0;
-        left: 0;
-        transform-origin: left;
-        transition: .5s;
-    }
-    &:before,
-    &:after{
-        background: $text;
-        position: absolute;
-        content: "";
-        width: 100%;
-        height: 2px;
-        transition: .5s;
-    }
-    &:before{
-        top: 50%;
-        left: 0;
-    }
-    &:after{
-        bottom: 0;
-        left: 0;
-        transform-origin: left;
-    }
-    &.open{
-        z-index: 1;
-        .toggle__bar{
-            transform: rotate(45deg);
-        }
-        &:before{
-            opacity: 0;
-        }
-        &:after{
-            transform: rotate(-45deg);
-        }
-    }
+width: 40px;
+height: 30px;
+cursor: pointer;
+position: fixed;
+z-index: 2;
+top: 15px;
+right: 10px;
+z-index: 600;
+&bar{ width: 100%; height: 2px; background: $text; position: absolute; top: 0; left: 0; transform-origin: left; transition: .5s; } &:before, &:after{ background: $text; position: absolute; content: ""; width: 100%; height: 2px; transition: .5s; } &:before{ top: 50%; left: 0; } &:after{ bottom: 0; left: 0; transform-origin: left; } &.open{ z-index: 1; .togglebar{
+transform: rotate(45deg);
+}
+&:before{
+opacity: 0;
+}
+&:after{
+transform: rotate(-45deg);
+}
+}
 }
 .toggle_2{
-    position: fixed;
+position: fixed;
-    z-index: 2;
+z-index: 2;
-    top: 16px;
+top: 16px;
-    left: 80px;
+left: 80px;
-    }
+}
 .sp_line {
-    width:110px;
-    margin-left: 5px;
-        &:hover{
-            opacity:0.5;
-        }
-    }
-    .sp_tel {
-    width:26px;
-        &:hover{
-            opacity:0.5;
-        }
-    }
-    .sp_inst {
-    width:28px;
-        &:hover{
-            opacity:0.5;
-        }
-    }
-#overlay{
-    transition: .5s;
-    &.open{
-        transform: translateX(-200px);
-        cursor: pointer;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100vh;
-        z-index: 1;
-    }
+width:110px;
+margin-left: 5px;
+&:hover{
+opacity:0.5;
+}
+}
+.sp_tel {
+width:26px;
+&:hover{
+opacity:0.5;
+}
+}
+.sp_inst {
+width:28px;
+&:hover{
+opacity:0.5;
+}
+}
+overlay{
+transition: .5s;
+&.open{
+transform: translateX(-200px);
+cursor: pointer;
+width: 100%;
+position: fixed;
+top: 0;
+left: 0;
+height: 100vh;
+z-index: 1;
+}
 }
 .fixbody{
-  overflow: hidden !important;
+overflow: hidden !important;
 }
 .tr_t {
-    text-align: center!important;
+text-align: center!important;
-    display: contents!important;
+display: contents!important;
-    font-size:2rem!important;
+font-size:2rem!important;
-    font-weight:bold!important;
+font-weight:bold!important;
-}
+}
+```
-### 試したこと
+```### 試した事 h3
-クリックでページが閉じるところまでは作成できたのですが、リンククリック自体も出来ないようになってしまいました。
 ご教授お願いいたします。
 cssはsassで書いています。
-### 補足情報（FW/ツールのバージョンなど）
-ここにより詳細な情報を記載してください。
+JSは使っておりません。
+```