ハンバーガーメニューが閉じません
ここに質問の内容を詳しく書いてください。
Webデザインナーになって、まだ1年たっておらずコーディング技術がなく困っています。
ナビゲーションをハンバーガーメニューにしています。
現在の動作状況は下記の流れになります。
ハンバーガー開く→メニューを押す(ページ内リンク&SNSボタン)→※スクロールor新しいタブに移動するもののハンバーガメニューが閉じない
初心者なので、
難しい内容はなるべく入れないようにしようと
ハンバーガメニューを押すと3本線がクロスするといったような、
アニメーション等入れずにコーディングしております。
(参考サイト:https://saruwakakun.com/html-css/reference/nav-drawer)
制作しているサイトは、
wordpress等の導入はなくhtml・cssで制作しております。
一部スムーススクロールの指示を記入しています。
HTML
<header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"> </label> <div id="nav-content"> <ul class="nav"> <!--ページ内リンク&SNSボタン→下記URLクリックしてもハンバーガーメニュー閉じない--> <div class="sp_nav_inner"> <li><a href="#section02">テキスト</a></li> <li><a href="#section03">テキスト</a></li> <li><a href="#section04">テキスト</a></li> <li><a href="#section05">テキスト</a></li> <div class="sp_navsns"> <li class="header_sns-item"><a href="#" target="_blank"><img src="img/icon_twitter.svg"></a></li> <li class="header_sns-item"><a href="#"><img src="img/icon_facebook.svg" alt="facebook"></a></li> <li class="header_sns-item"><a href="#"><img src="img/icon_instagram.svg" alt="instagram"></a></li> <li class="header_sns-item"><a href="#"><img src="img/icon_youtube.svg" alt="youtube"></a></li> </div> </div> </ul> </div> </div> </header> <div id="#section02">テキスト</div> <div id="#section03">テキスト</div> <div id="#section04">テキスト</div> <div id="#section05">テキスト</div>
CSS
<style type="text/css"> header{ width:100%; height:50px; background: green; } /*チェックボックス等は非表示に*/ .nav-unshown { display:none; } /*アイコンのスペース*/ #nav-open { display: inline-block; width: 50px; height: 50px; vertical-align: middle; background:#9B2E8E; } /*ハンバーガーアイコンをCSSだけで表現*/ #nav-open span, #nav-open span:before, #nav-open span:after { position: absolute; height: 3px;/*線の太さ*/ width: 29px;/*長さ*/ background: #ffffff; display: block; content: ''; cursor: pointer; margin-top:14px; margin-left:11px; } #nav-open span:before { bottom: -10px; left: -11px; } #nav-open span:after { bottom:-20px; left:-11px; } /*閉じる用の薄黒カバー*/ #nav-close { display: none;/*はじめは隠しておく*/ position: fixed; z-index: 99; top: 0;/*全体に広がるように*/ left: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: .3s ease-in-out; } /*中身*/ #nav-content { overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999;/*最前面に*/ width: 100vw;/*右側に隙間を作る(閉じるカバーを表示)*/ height: 100%; background: #D14D98;/*背景色*/ transition: .3s ease-in-out;/*滑らかに表示*/ -webkit-transform: translateX(-105%); transform: translateX(375%);/*左に隠しておく*/ top:50px; text-align: center; } .sp_nav_inner{ width: 300px; height: 300px; position: absolute; top: 40%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); } .sp_nav_inner li{ padding-bottom: 50px; } #nav-content li a{ color: #ffffff; } .sp_navsns{ display: flex; justify-content: center; align-items: center; } .sp_navsns a img{ height: 23px; opacity: 1; transform: opacity .3s; } .sp_navsns a{ padding-right: 5px; } .sp_navsns a:last-child{ padding-right: 15px; } #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%); } html{ scroll-behavior: smooth; } </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script> $(function() { $('#btn li').on('click', function() { var $this = $(this), $grid = $('#animationList'); $('#btn .active').removeClass('active'); $this.addClass('active'); $grid.shuffle($this.data('group')); }); $('#animationList').shuffle({ group: 'all', speed: 700, easing: 'ease-in-out' }); }); </script> <script> Element.scrollIntoView({ behavior: 'smooth', block: 'start' }) </script>
補足情報
Abode Dreamweaver 2018CC
html5
css3
回答1件
あなたの回答
tips
プレビュー