タグ・デザイン掲示板

[

ドロワーメニューについて
by 匿名

2016-02-01 17:54
サイトでドロワーメニューを使用しています。しかし、Androidで機能しません。(iOSとPCでは機能しています。)

HAED内
<style type="text/css">.contents {width: 100%;
padding: 0;
margin: 0;
box-shadow: 1px 0px #adadad;}

.check:checked ~ .contents {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);}

.drawer-menu {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
background: #ffffff;
-webkit-transform: perspective(200px) rotateY(-90deg);
transform: perspective(200px) rotateY(-90deg);
opacity: 1;}

.check:checked ~ .drawer-menu {
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;}

.check {display: none;}

.menu-btn {
position: fixed;
top: 20px;
right: 25px;
width: 40px;
height: 40px;
z-index: 3;}

.close-menu {
position: fixed;
top: 20;
right: 300px;
width: 100%;
height: 100vh;
visibility: hidden;
opacity: 0;}

.check:checked ~ .close-menu {
visibility: visible;
opacity: 1;
z-index: 3;}</style>

BODY

<input type="checkbox" class="check" id="checked"><label class="menu-btn" for="checked"><center><p class="st"><i class="fa fa-bars"></i></p></center></label><label class="close-menu" for="checked"><i class="fa fa-times"></i></label><nav class="drawer-menu">

ドロワーメニュー内

</nav>
<div class="contents">

トップに表示されるところ

</div>

と入力しています。
ドロワーメニューが開かないだけで、ページの崩れはありません。どこを改善すれば機能するか教えて頂けますでしょうか？

pc
[編集]

by と

2016-02-01 23:17
<center><p class="st"><i class="fa fa-bars"></i></p></center>
この部分に対応するCSSがないですね。
(ドロワーメニューを作ったことがないので詳しいことは分かりません。書き出されてるものをざっと見ただけです)
Javascriptの方だとviewportで拡大縮小を禁止しておかないといけないみたいですが、関係なかったらすみません。

pc
[編集]

by とくめい

2016-02-02 08:23
動作確認しました（Win10/Chrome）
※Android端末では確認しておりません

ドロワーメニューの幅分、<div class="contents"></div>の内容が画面から追いやられてます。自分としてはこれはかなり見づらい動作だと思うのですけど…まあデザインによるのかな。

トピ主さんが参考にされたサイトさんを見つけて拝見しました。
Android端末で該当サイトのデモページを見て動作に問題がないか確認して下さい。

pc
[編集]

[