前提・実現したいこと
ブログにて、ドロップダウンメニューの項目の表示を実装したい。
発生している問題・エラーメッセージ
発生してる問題が、ドロップダウンメニューの項目がPC上、タブレット上に、表示されているが、肝心のスマートフォンの表示ができない。
1、PC,タブレット上では、メニュー項目が表示され、その項目へのページに飛べる。
2、スマートフォン上だと、"MENU"という項目だけが表示されており、タップしても、無反応な状態となる。
エラーメッセージ 特になし
該当のソースコード
<div id="menu"> <div id="menu-inner"> <div id="btn-content"> <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span> </div> <ul id="menu-content"> <li> <a href="https://lagrun123.hateblo.jp/">A<i class="blogicon-chevron-down"></i></a> </li> <li><a href="URL">自己紹介 <i class="blogicon-chevron-down"></i></a> </li> <li><a href="1階層目のリンク">B<i class="blogicon-chevron-down"></i></a> </li> <li> <a href="URL"> C<i class="blogicon-chevron-down"></i></a> </li> </ul> </div> </div> <div style="clear:both"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var menuBtn = $("#menu-btn"), menuContent = $("#menu-content"); menuBtn.click(function(){ menuContent.slideToggle(); }); $(window).resize(function(){ var win = $(window).width(), p = 960;//19 if(win > p){ menuContent.show(); }else{ menuContent.hide(); } }); }); </script> ```スクリプト② <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function(){ $('.dropdown-menu').hover(function() { $(this).find(".global-contents").addClass('global-show'); }, function() { $(this).find(".global-contents").removeClass('global-show'); } ); $('.dropdown-menu').click(function() { if ($(this).find(".global-contents").hasClass("global-show")) { $(".dropdown-menu").find(".global-contents").removeClass("global-show"); } else { $(".dropdown-menu").find(".global-contents").removeClass("global-show"); $(this).find(".global-contents").addClass("global-show"); } }); }); </script> ----CSS /* <system section="theme" selected="6653586347155924442"> */ @import "https://blog.hatena.ne.jp/-/theme/6653586347155924442.css"; /* </system> */ /* <system section="background" selected="pattern-02"> */ body{ background-image: url('/images/theme/backgrounds/2014/pattern-02.png'); background-repeat: repeat; background-attachment: fixed; background-position: 0 0; background-size: 40px 70px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url('/images/theme/backgrounds/2014/pattern-02@2x.png');} } /* </system> */ /* Responsive: yes */ /*****グローバルメニュー****/ #menu{ width: 100%; margin: 10px auto; background: #444;/*7*/ } #menu-inner{ width: 1000px;/*1*/ height: 40px;/*2*/ margin: 0 auto; background: #444;/*8*/ } #menu-btn{display: none;} #menu-content{ padding-left: 0; margin: 0; width: 100%; height: 100%; list-style-type: none; } #menu-content > li{ position: relative; float: left; height: 100%; text-align: center; } #menu-content > li > a{ position: relative; display: block; height: 100%; padding-left: 15px;/*3*/ padding-right: 15px;/*3*/ line-height: 40px;/*2*/ background: #444;/*9*/ color: #fff;/*10*/ font-size: 70%; text-decoration: none; z-index: 2; } #menu-content > li > a:hover{ background: #555;/*11*/ color: #fff;/*12*/ } #menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;} /*2階層目*/ #menu-content > li > ul.second-content{ visibility: hidden; position: absolute; top: 0; margin: 0; padding-left: 0; ### 試したこと ネットでの検索でスマホ対応のコードを打ってもうまくできなかったです。 ### 補足情報(FW/ツールのバージョンなど) PC,タブレット上では"MENU"ボタンが無い状態で、スマホ上では"MENU"ボタンがある状態になっています。 これは、PC,タブレット、スマホどの画面上にも"MENU"ボタンをつけないとだめなのかなと思っています。。
回答1件
あなたの回答
tips
プレビュー