###前提・実現したいこと
現在、レスポンシブウェブサイトでグローバルナビゲーションを作成するにあたり、
PCサイズでは、サイドグローバルナビゲーション(position:fixed;で固定)。
SPサイズでは、ハンバーガーメニューをタップすると、ドロワー表示されるようにしました。
###発生している問題・エラーメッセージ
しかし、PCサイズではリンクの行き来ができるのですが、
SPサイズでは、ドロワーで表示されるのですが、リンクの行き来ができません。
###試したこと
気になる点としては、
PC上で、ブラウザサイズをSPサイズにしたところ、
ハンバーガーメニューの上にマウスカーソルを乗せるとポインターが出るのですが、
開いてテキストリンクの上にカーソルを乗せるとポインターが出てきません。
一体なぜPCサイズではリンクの行き来ができるのに、
SPサイズになるとできないのでしょうか?
ソースコードはこちらになります。
<body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <h1><img src="img/logo1.png" alt="Be-done"></h1> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-menu-item" href="#">home</a></li> <li><a class="drawer-menu-item" href="concept.html">concept</a></li> <li><a class="drawer-menu-item" href="#">menu</a></li> <li><a class="drawer-menu-item" href="#">staff</a></li> <li><a class="drawer-menu-item" href="#">information</a></li> </ul> </nav> </header> </body>
body{ font-size: 16px; line-height: 1.5; background: #eee; color: #4a4a4a; font-family: "游ゴシック Medium", "Yu Gothic Medium", YuGothic, sans-serif; } header{ float: none; height: auto; text-align: center; width: 100%; background-color: #6ebf8b; padding:1% 0; position:fixed; z-index: 10; } header h1 img{ max-width:30%; height:auto; } nav ul li a{ text-decoration:none; color:#4a4a4a; } /*=============== PC ===============*/ @media screen and (min-width:781px) { header{ background: #6ebf8b; width: 22%; float: left; height: 100vh; text-align: right; position: fixed; padding: 42px 1.5% 0; } header h1 img{ max-width:100%; height:auto; } header button{ display:none; } nav ul li{ padding:5%; text-align:center; } }
drawer cssは特に触れていません。
http://git.blivesta.com/drawer/
.drawer-open { overflow: hidden !important; } .drawer-nav { position: fixed; z-index: 101; top: 0; overflow: hidden; width: 16.25rem; height: 100%; color: #222; background-color: #fff; } .drawer-brand { font-size: 1.5rem; font-weight: bold; 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; }
回答2件
あなたの回答
tips
プレビュー