質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

ハンバーガーメニューの修正 open時の内容が表示されなくなってしまった。

削除済ユーザー
削除済ユーザー

総合スコア0

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

396閲覧

投稿2020/12/25 08:56

前提・実現したいこと

ハンバーガーメニューの修正。
open時の内容が表示されなくなってしまいました。

制作時の参考サイト

レスポンシブでハンバーガーメニューになる固定サイドバー
demoページ

試したこと

下記ページを参考に、複数読み込みされてないか、パスの確認などを行いました。
ハンバーガーメニューが急に動かなくなった!初心者向け解決法

また、通販カートシステムを使用しているページの為、フォーム入力から上書きされていないか、
他システムのファイルと干渉していないか自分なりに調べましたが、知識不足というのもあり、
解決できませんでした。

どなたか、ご教授ください。。!!とても困っております。
↓とても長いのですが、原因が不明なので、、
何卒宜しくお願いします。

該当のソースコード

html

<div id="sps-header-common-fixed"> <div id="header"><div id="sps-menu"> <div id="headLeft"> <div id="headLeftTop"> <div id="logo"> <p><a href="#"><img src="header_logo.gif" alt="" height="65" width="325"></a></p> </div> <div id="tel"> <p><span class="tel-link"><a href="tel:"><img src="img/head/header_tel.gif" alt="" height="80" width="270"></a></span></p> </div> <div id="souryou"> <p><img src="/souryou.gif" alt="" height="80" width="198"></p> </div> </div> <div id="headLeftBottom"> <div id="h1Zone"> <h1></h1> </div> <div id="smallNavi"> <a href="/guide.html">111</a><a href="/company.html">222</a><a href="/list.html">333</a><a onclick="javascript:openPage('FORM/contact.cgi','form'); return false;" href="FORM/contact.cgi" title=""></a><a onclick="window.open('CART/login.php', '', 'width=640,height=480');"><img class="mypage-icon" src="pic-labo/navi-06.gif">ページ</a></div> </div> </div> <div class="header-nav sp"> <p><a href="tel:"><img src="tel.png" alt="" style="width: 100%;"></a></p> <p id="nav-toggle"><img src="menu.png" alt="menu" style="width: 100%;"> </p> <div id="overlay"></div> </div> <div id="headRight"> <p><a href="tenpo-all.html"><img src="img/head/header_tenpo.jpg" width="142" height="52" alt=""></a></p> <p id="imageLast"><a class="header-cart" onclick="javascript:goCart();return false;" href="_ga/cart.php" title=""><img src="img/head/header_cart.jpg" alt="" height="52" width="142"></a></p> </div> </div> </div> </div> <div id="sidebar" class="free-contents" style="margin-left:0;"><!--スマホハンバーガーメニュー表示部分--> <a class="header-cart sp" onclick="javascript:goCart();return false;" href="cart.php" title="カートをみる"> <span class="cart_icon"></span>カートをみる<span class="arw_icon"></span></a><!--スマホカートボタン--> <div class="sidr-search sp"><!--スマホ検索ボックス--> <form method="get" action="/list.php"> <div class="form-group"><input type="text" name="Search" value="" data-prompt-position="inline" class="searchbox"></div><input type="submit" value="検索" data-prompt-position="inline"><input type="hidden" name="type" value="search" data-prompt-position="inline"></form></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/sp_common.js"></script>

css

/* ハンバーガーメニュー */ #global-head { position: fixed; color: #033560; width: 260px; text-align: center; padding-top: 60px; z-index: 100; } #global-nav ul { list-style: none; margin-left: 0; } #global-nav > ul > li { position: relative; } #global-nav a { color: #033560; text-decoration: none; display: block; padding: 15px 0; -moz-transition: background-color .3s linear; -webkit-transition: background-color .3s linear; transition: background-color .3s linear; } #global-nav .sub-menu.is-active > a, #global-nav a:hover { color: #fff; background: #033560; } #global-nav .sub-menu-nav a, #global-nav .sub-menu:hover .sub-menu-nav { width: 230px; } /* sub-menu icon */ #global-nav .sub-menu-head { position: relative; } #global-nav .sub-menu-head:after { content: ""; position: absolute; top: 0; bottom: 0; right: 18px; margin: auto; vertical-align: middle; width: 8px; height: 8px; border-top: 1px solid #033560; border-right: 1px solid #033560; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* sub-menu */ #global-nav .sub-menu-nav { position: fixed; background: #033560; color: #fff; top: 0; padding-top: 90px; left: 260px; width: 0; height: 100%; overflow: hidden; -moz-transition: width .2s ease-out; -webkit-transition: width .2s ease-out; transition: width .2s ease-out; } #global-nav .sub-menu.is-active > a:after, #global-nav .sub-menu-head:hover:after { border-color: #fff; } #global-nav .sub-menu-nav a { color: #fff; } #global-nav .sub-menu-nav a:hover { color: #033560; background: #fff; } /* nav-toggle */ #nav-toggle > div { position: relative; width: 32px; } #nav-toggle span { width: 100%; height: 2px; left: 0; display: block; background: #033560; position: absolute; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 11px; } #nav-toggle span:nth-child(3) { top: 22px; } #overlay { display: none; position: fixed; background: rgba(0,0,0,.6); width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } #main-in { padding-left: 0; } #global-head { width: 100%; padding: 10px; background: rgba(255,255,255,.8); display: -webkit-flex; display: flex; } /* サブメニューは開けない */ #global-nav .sub-menu-head:after, #global-nav .sub-menu-nav { display: none; } #nav-toggle { display: block; } /* nav open */ .open { /* overflow: hidden; */ } .open #overlay { display: block; } /* #nav-toggle close */ .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* z-index */ #overlay { z-index: 200; } #sidebar { z-index: 99999; } #sidebar { right: -230px; width: 220px; padding-top: 0; overflow: auto; overflow-scrolling: touch; position: fixed; top: 0; height: 100%; color: #333; background: #fff; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; padding-left: 10px; } .open #sidebar { -webkit-transform: translate3d(-230px,0,0); transform: translate3d(-230px,0,0); } #overlay::after { content: ""; width: 30px; height: 30px; background: url(btn_close.png) no-repeat top center; background-size: contain; position: absolute; top: 18px; right: 240px; }

js

(function($) { $(function () { $('.sub-menu').on({ 'mouseenter': function () { $(this).addClass('is-active'); }, 'mouseleave': function () { $(this).removeClass('is-active'); } }); $('#nav-toggle,#overlay').on('click', function() { $('body').toggleClass('open'); }); }); })(jQuery);

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。