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 --><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><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>
</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"><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>
~以下、省略~
【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
}
~以下、省略~
回答1件
あなたの回答
tips
プレビュー