Q&A
問題が再現しません。CSSは何もないのですか？
前提・実現したいこと
初めてスマホのハンバーガーメニューにサンプルjsを組み込んでみたのですが
自身が勉強のため制作中のサイトに合わせると2点jsの修正方法が分かりません。
詳しい方、よろしければご教示いただければと思います。
ここに質問の内容を詳しく書いてください。
1点目
添付の画像のように
ハンバーガーメニューを開いた時
仮に背景が黒だとしてその上に画面全体まで白くメニューを伸ばしたいです。
2点目
メニューを開いた時
例えば、COMPANYとBUSINESSでそれぞれドロップダウンメニューがあるのですが
そのページcompany.indexでCOMPANYのドロップダウンメニューを選択すると
メニューが開いたままになってしまい×を押さないと消えない為そこを改善したいです。
組み込みに使用させていただいたデモサンプルページ
https://codingmania.net/demo/Tool/0046/index_over.html
<header class="page-header"> <h1><a href="index.html"><img class="logo" src="images/logo.png"></a></h1> <nav class="Nav" role="navigation" aria-label="メインメニュー"> <p class="navbtn"><a href="javascript:void(0)"><span>メニューを開く</span></a></p> <ul> <li><a href="./news.html"><b>NEWS</b></a></li> <li class="parent"><a href="javascript:void(0)"><b>COMPANY</b></a> <ul class="submenu"> <li><a href="./company.html#Management">経営理念</a></li> <li><a href="./company.html#Message">代表挨拶</a></li> <li><a href="./company.html#infomationDesc">会社概要</a></li> </ul> </li> <li class="parent"><a href="javascript:void(0)"><b>BUSINESS</b></a> <ul class="submenu"> <li><a href="./work.html#Support">開発前支援</a></li> <li><a href="./work.html#Promotion">宣伝・広告活動</a></li> <li><a href="./work.html#Operation">運用力強化</a></li> </ul> </li> <li><a href="./recruit.html"><b>RECRUIT</b></a></li> <li><a href="./form.html"><b>CONTACT</b></a></li> </ul> </nav> </header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
//resize $(window).resize(function() { var windowWidth = window.innerWidth; var point = 1000; var timer = false; if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { var ww = $(window).width(); if (windowWidth != ww) { if (windowWidth > point) { $("body").addClass("pc").removeClass("spn"); $(".Nav > ul").removeClass("open close").css("display", "block"); $(".Nav > ul > li").css("display","inline-block"); $(".Nav .navbtn a").removeClass("open close").html("<span>メニューを閉じる</span>"); $(".Nav ul li.parent a").removeClass("open").addClass("close"); $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); } else { //画面サイズが1000px未満のときの処理 $("body").addClass("spn").removeClass("pc"); $(".Nav > ul").addClass("close").removeClass("open").css("display", "none"); $(".Nav .navbtn a").addClass("close").removeClass("open").html("<span>メニューを開く</span>"); $(".Nav ul li.parent a").removeClass("open").addClass("close"); $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); } } else {} }, 50); }); //nav dropdown ovreNav function ovreNav() { var li = $(".Nav ul li.parent"); $(li).each(function() { var target = $(this); target.hover(function() { //マウスが乗ったら $(target).find('ul.submenu').slideDown(200); }, function() { //マウスが外れたら $('ul.submenu').hide(); }); }); } //nav dropdown clickNav function clickNav() { $(".Nav ul li.parent").each(function() { var submenu = $(this).find("ul.submenu"); var allsubmenu = $(".Nav ul.submenu"); var allbtn = $(".Nav ul li.parent"); $(this).addClass("close"); $(submenu).addClass("close"); $(this).on('click', function() { if ($(this).hasClass("open")) { $(this).removeClass("open").addClass("close"); $(submenu).slideUp("fast").removeClass("open").addClass("close"); } else { $(allsubmenu).slideUp("fast").removeClass("open").addClass("close"); $(allbtn).removeClass("open").addClass("close"); $(submenu).slideDown("fast").removeClass("close").addClass("open"); $(this).removeClass("close").addClass("open"); } //return false; }); }); $(document).click(function(event) { if (!$(event.target).closest(".Nav").length) { $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); $(".Nav ul li.parent").removeClass("open").addClass("close"); //alert('changeイベントが発生しました。'); } }); } //SP nav $(function() { $(".Nav .navbtn a").click(function() { if ($(".Nav > ul").css("display") == "none") { $(".Nav > ul").addClass("open").removeClass("close").slideDown("fast"); $(".Nav > ul > li").css("display","block"); $(this).removeClass("close").addClass("open").html("<span>メニューを閉じる</span>"); } else { $(".Nav > ul").addClass("close").removeClass("open").slideUp("fast"); $(".Nav ul li.parent").removeClass("open").addClass("close"); $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); $(this).addClass("close").removeClass("open").html("<span>メニューを開く</span>"); } }); }); //SP アンカーリンク $(function() { $("ul.submenu a[href^='#']").click(function(event) { //alert('changeイベントが発生しました。'); $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); $(".Nav ul li.parent a").removeClass("open").addClass("close"); $(".spn .Nav > ul").addClass("close").removeClass("open").slideUp("fast"); $(".spn .Nav .navbtn a").addClass("close").removeClass("open").html("<span>メニューを開く</span>"); //$(this).removeClass("close").addClass("open").html("<span>メニューを閉じる</span>"); }); }); 
申し訳ございません。
CSS追記したいのですが文字数制限で再編集出来ずにいます
/* HEADER
--------------------------------------- */
.page-header {
height:115px;
width:100%;
background-color:white;
position:fixed;
top:0;
z-index: 1;
}
@media screen and (max-width: 1000px) {
.page-header {
height: 51px;
width: 100%;
background-color:white;
position:fixed;
top:0;
z-index: 1;
}
}
.logo {
width: 118px;
margin-top: 8.8px;
margin-left: 10px;
position:fixed;
}
@media screen and (max-width: 1000px) {
.logo {
width: 45px;
margin-top: 6px;
margin-left: 10px;
position:fixed;
}
}
/* Nav
-----------------------------------------*/
.Nav {
margin-top: 51px;
border-top: solid 1px #FFF;
float: right;
}
@media screen and (max-width: 1000px) {
.Nav {
position: relative;
border-top:none;
float: none;
}
}
.Nav .navbtn {
display: none;
}
@media screen and (max-width: 1000px) {
.Nav .navbtn {
display: block;
position: absolute;
top: -45px;
right: 5px;
}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a,
.Nav .navbtn a.close {
display: block;
position: relative;
width: 40px;
height: 40px;
}
.Nav .navbtn a::before,
.Nav .navbtn a.close::before {
position: absolute;
top:10px;
left:10px;
content:"";
width: 20px;
height: 3px;
background-color: #E60012;
transition: .2s;
}
.Nav .navbtn a.open::before {
top:19px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.Nav .navbtn a::after,
.Nav .navbtn a.close::after {
position: absolute;
bottom:10px;
left:10px;
content:"";
width: 20px;
height: 3px;
background-color: #E60012;
transition: .2s;
}
.Nav .navbtn a.open::after {
bottom:18px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a.open {
}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a span {
display: block;
overflow: hidden;
width: 1px;
height: 1px;
}
.Nav .navbtn a span::after,
.Nav .navbtn a.close span::after {
position: absolute;
top:18px;
left:10px;
content:"";
width: 20px;
height: 3px;
background-color: #E60012;
}
.Nav .navbtn a.open span::after {
display: none;
}
}
.Nav ul.close {
display: none;
border-top: solid 1px #F5F4F0;
}
.Nav > ul {
margin: 0 auto;
max-width: 1000px;
}
@media screen and (max-width: 1000px) {
.Nav > ul {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
background-color: #FFF;
}
}
.Nav > ul > li {
position: relative;
font-size: 15px;
display: inline-block;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li {
display: block;
border-bottom: solid 1px #dddddd;
}
}
.Nav > ul > li a {
display: block;
position: relative;
text-decoration: none;
padding: 19px 15px;
font-size: 15px;
color: #333;
background-color: #fff;
z-index: 2;
}
.Nav > ul > li.parent > a {
padding-right:25px;
}
.Nav > ul > li.parent > a::before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 6px;
height: 6px;
margin: -6px 0 0 0;
border-top: solid 2px #000;
border-right: solid 2px #000;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open {
border-bottom: none;
}
}
.Nav > ul > li.parent.open > a{
color: #FFF;
}
.Nav > ul > li.parent.open > a::after {
background: #E60012;
-webkit-transform: scale(1);
transform: scale(1);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a {
color: #FFF;
}
}
.Nav > ul > li a:hover {
color: #fff;
}
.Nav > ul > li a::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.Nav > ul > li a::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.Nav > ul > li a:hover::after {
background: #E60012;
-webkit-transform: scale(1);
transform: scale(1);
}
/* 2階層 */
.Nav > ul > li > ul {
display: none;
position: absolute;
top: 53px;
left: 0;
width: auto;
background-color: rgba(255, 255, 255, 0.8);
z-index: 9;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul {
background-color: #fbfbfb;
position: static;
}
}
.Nav > ul > li > ul li {
white-space: nowrap;
}
.Nav > ul > li > ul li a {
position: relative;
padding: 12px 27px 12px 27px;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul li a {
border-bottom: solid 1px #dddddd;
background-color: #FFFFFF;
}
}
.Nav > ul > li > ul li a::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 6px;
height: 6px;
margin: -6px 0 0 0;
border-top: solid 2px #e60012;
border-right: solid 2px #e60012;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.Nav > ul > li > ul li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul li a:hover {
background-color: #FFF;
}
}
.Nav > ul > li > ul li ul li a {
padding-left: 42px;
}
.Nav > ul > li > ul li ul li a::before {
left: 20px;
}
コードをミニマム構成で組み直されては
本当にすべて必要ですか？
ご指摘ありがとうございます。
初学の為
今後はミニマム構成で組めるように意識致します。
回答1件
0
ベストアンサー
こんにちは。
画面全体まで白くメニューを伸ばしたい
高さをつけてはどうでしょうか。
css
1.Nav > ul { 2 height: calc( 100vh - 51px ); 3}
COMPANYとBUSINESSでそれぞれドロップダウンメニューがある
おそらく、clickNav() ovreNav() が呼ばれていないので、現状のコードではドロップダウンが動作しないと思います。
まずはそこから修正されてはいかがでしょうか。
投稿2021/03/08 06:05
総合スコア36928
1点目上記のように修正致しましたら上手く反映いたしました。
2点目もご指摘ありがとうございます。
呼ばれていない点を調べてみます。
ご丁寧にありがとうございます！
解決されませんか？
ご提示されているURL先のコードでは、resizeイベントの中に書かれているようですね。
返信遅くなり申し訳ございません。
//SP アンカーリンク
$(function() {
を
$('ul.submenu a[href]').on('click', function(event) {
にしましたら解決しました！
ありがとうございました！
ご解決されて何よりです。
あなたの回答
tips
プレビュー
