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

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

ただいまの
回答率

90.51%

  • JavaScript

    20348questions

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

  • HTML5

    5112questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2620questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • iOS 9

    215questions

    iOS 9は、アップル社のモバイルOSであるiOSシリーズのバージョン。特徴として検索機能の強化、Siriの機能改良、iPad向けマルチタスクなどがあります。マルチウィンドウ機能をサポートし、iPad向けマルチタスクもサポートされています。

ドロワーメニューPCで表示されてスマホで表示されない件

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 553

chamaki40

score 4

 

PCだけじゃなく、スマートフォンでもドロワーメニューを前面に表示させたい
スマートフォンで見るとリンクは反応していて文字が完全にコンテンツの後ろにいます
リンクは効くけど、背景色はグレーで文字が完全に隠れているという状態
今日中に知りたいのでどなたか教えてください

 発生している問題・エラーメッセージ

トップから出てくるドロワーメニュー http://git.blivesta.com/drawer/top/ 
このサイトからコードをダウンロードして自分が過去に作ったサイトのデータ(ヘッダー部分)に入れ込みました PCで見るとちゃんと動作しますが、スマートフォンではバックグラウンドのグレーの色しか出てきません →http://reality-star700.com/test/beginner.html

エラーメッセージ

 該当のソースコード

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
<meta name="keywords" content="セカンドライフ,デイトレード,アービトラージ,錬金術,投資">
<meta name="description" content="疑似体験プロジェクト、バイナリーオプション">
<link rel="SHORTCUT ICON" HREF="">
<title>セカンドライフ|投資マスターへの道</title>

<!-- Include jQuery Library -->
<link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
<link href="css/sandbox.css" rel="stylesheet">
<link href="dist/css/drawer_2.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/js/drawer.min.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>

</head>
<body class="drawer drawer--top drawer--navbarTopGutter">

<header class="drawer-navbar drawer-navbar--fixed" role="banner">
<div class="drawer-container">
<div class="drawer-navbar-header">
<a class="drawer-brand" href="./index.html">セカンドライフ</a>
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>

<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-menu-item" href="index.html">トップ</a></li>
<li><a class="drawer-menu-item" href="beginner.html">投資ビギナーの方へ</a></li>
<li><a class="drawer-menu-item" href="#">スマホで稼げる?</a></li>
<li class="drawer-dropdown">
<a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
トークアプリを使った実用例<span class="drawer-caret"></span>
</a>
<ul class="drawer-dropdown-menu">
<li><a class="drawer-dropdown-menu-item" href="./navbar-top.html">投資のひとつです</a></li>
<li><a class="drawer-dropdown-menu-item" href="./navbar-left.html">投資のひとつです</a></li>
<li><a class="drawer-dropdown-menu-item" href="./navbar-right.html">投資のひとつです</a></li>
</ul>
</li>
<li class="drawer-dropdown">
<a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
投資を勉強する前に <span class="drawer-caret"></span>
</a>
<ul class="drawer-dropdown-menu">
<li><a class="drawer-dropdown-menu-item" href="./fixed-navbar-top.html">決済ができます</a></li>
<li><a class="drawer-dropdown-menu-item" href="./fixed-navbar-left.html">ウォレットを作成します</a></li>
<li><a class="drawer-dropdown-menu-item" href="./fixed-navbar-right.html">高騰しています</a></li>
</ul>
</li>
<li class="drawer-dropdown">
<a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
お問い合わせ <span class="drawer-caret"></span>
</a>
<ul class="drawer-dropdown-menu">
<li><a class="drawer-dropdown-menu-item" href="./sidebar-left.html">先物取引</a></li>
<li><a class="drawer-dropdown-menu-item" href="./sidebar-right.html">FX</a></li>
</ul>
</li>
</ul>
</nav>

</div>

</header>

<main role="main">
<!-- Page content -->
<div id="head_1"><img src="img/for_sitetop2.jpg" alt="サイトイメージ"></div>

</main>

<!-- メインコンテンツ -->

<div id="container"> ※このcontainerに対してz-indexを指定しましたが無反応でした

<div id="left">

~以下、省略~

【CSS】

/*!

  • jquery-drawer v3.2.2
  • Flexible drawer menu using jQuery, iScroll and CSS.
  • http://git.blivesta.com/drawer
  • License : MIT
  • Author : blivesta <design@blivesta.com> (http://blivesta.com/)
    */

.drawer-open{overflow:hidden!important}
.drawer-nav{
position:fixed;
z-index:4;
top:0;
overflow:hidden;
width:16.25rem;
height:100%;
color:#222;
background-color:#fff;
opacity: 0.7;
transition: opacity .2s ease-out;
}

container {

max-width:1100px;
min-height: 100%;
height: auto;
position: relative;
z-index: 0 !important;
margin:0 auto;
background:#fff;
min-height: calc(100vh - 70px);
overflow:auto;

}

.drawer-brand{
font-size:1.5rem;
font-weight:700;
line-height:3.75rem;
display:block;
padding-right:.75rem;
padding-left:.75rem;
text-decoration:none;
color:#222
}

.drawer-menu{
margin:0;padding:0;
list-style:none;
}

.drawer-menu-item{
font-size:1rem;
display:block;
padding:.75rem;
text-decoration:none;
color:#222
}

.drawer-menu-item:hover
{
text-decoration:underline;
color:#555;background-color:transparent
}

.drawer-overlay
{
position:fixed;
z-index:2;
top:0;
left:0;
display:none;
width:100%;
height:100%;
background-color:
rgba(0,0,0,.2)
}

.drawer-open .drawer-overlay{
display:block
}

.drawer--top .drawer-nav{
top:-100%;
left:0;
width:100%;
height:auto;
max-height:100%;
-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);
transition:top .6s cubic-bezier(.19,1,.22,1)
}

.drawer--top.drawer-open 
.drawer-nav{top:0}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open 
.drawer-hamburger{right:0}.drawer--left .drawer-nav
{
left:-16.25rem;
-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);
transition:left .6s cubic-bezier(.19,1,.22,1)
}

.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger
{left:0}

.drawer--left.drawer-open .drawer-hamburger{left:16.25rem}
.drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}.drawer--right 
.drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger
{right:0}
.drawer--right.drawer-open .drawer-hamburger{right:16.25rem}
.drawer-hamburger{position:fixed;
z-index:3;
top:0;
display:block;
box-sizing:content-box;
width:2rem;
padding:0;
padding:18px .75rem 30px;
-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
transition:all .6s cubic-bezier(.19,1,.22,1);
-webkit-transform:translateZ(0);
transform:translateZ(0);border:0;
outline:0;background-color:transparent}

.drawer-hamburger:hover{
cursor:pointer;
background-color:
transparent
}

.drawer-hamburger-icon{
position:relative;
display:block;
margin-top:10px
}

.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
width:100%;
height:2px;
-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
transition:all .6s cubic-bezier(.19,1,.22,1);
background-color:#222}

.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
position:absolute;
top:-10px;left:0;content:" "}

.drawer-hamburger-icon:after{top:10px}
.drawer-open .drawer-hamburger-icon{
background-color:transparent
}

~以下、省略~

![![イメージ説明](760737bc75b48b85aa5bb54e7a34d055.jpeg)](8959b6397d6fb1e6c8a6cc5b0c84e71b.jpeg)

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • liveasnotes

    2018/08/24 17:15

    htmlはインデントを整え,利用したcssも添えてください.また,「背景色が出てくる」という状況がよく分からないので,スクショを添えてください

    キャンセル

  • chamaki40

    2018/08/24 18:01

    ご質問ありがとうございます 編集しました スクリーンショットはちょうど下に伸びている状態のものです 文字が見えないですがクリックはできます

    キャンセル

  • liveasnotes

    2018/08/24 23:56 編集

    リンクがクリックできるということは,コンテンツよりも前面に出ているということだと思うので,ちょっと原因がつかめないですね...(CSSにもopacity:0;やpointer-events:none;は見当たらないですし...)手元にiOS端末がないので,一度そちらで,リンクボタンにbackground:skyblue;とかbackground:palegreen;とか指定して,ボタンが本当にそこにあるのか確かめてみてもらえますか?

    キャンセル

回答 1

check解決した方法

0

スタイルシートの中に前のサイトのheaderのソースがあり、もう一つのドロワーメニュー のheaderと重なっていた為、修正しました

元のheaderの指示でoverflowのhiddenがPC側でもドロップダウンの部分が隠れて、スマホでも文字が見えなくなっていた原因でした

問い合わせ頂いた方、ありがとうございます  まだ作り途中なので他にも質問させて頂かと思います

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • JavaScript

    20348questions

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

  • HTML5

    5112questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2620questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • iOS 9

    215questions

    iOS 9は、アップル社のモバイルOSであるiOSシリーズのバージョン。特徴として検索機能の強化、Siriの機能改良、iPad向けマルチタスクなどがあります。マルチウィンドウ機能をサポートし、iPad向けマルチタスクもサポートされています。