0
右上のナビゲーションのクリックで拡大表示されるかなり基本的なモバイルドロップダウンメニューを作成しようとしていますthis codepen portfolio page project for Free Code Camp.メニューは表示されませんが、 javascript関数が実際に動作しているように見える要素を調べ、 "show" CSSクラスを追加してmobileNavDrop divに追加します。モバイルドロップダウンメニューで「動作中」が表示されますが表示されません
見えないメニューも検査要素のツールを使用して、このスクリーンショットで見ることができるよう、することになっていますページの上に位置しているように見える：
Invisible drop-down menu highlighted with inspect element tool
私はそれをすべて押して試してみましたz-indexを使って前進する方法と、バナーを見えないようにすることで、背後に隠れているかどうかを確認できますが、そうではありません。私は「display：none;」ではなく、メニューが表示されるようにしてみました。それはまだページに表示されません。
私が他のところで得たアドバイスは、jqueryとブートストラップだけを使うことですが、私はすべてをゼロから書くようにして、もっと理解することを望んでいました。それで、レスポンシブなレイアウトが矛盾していると私が書いたものは可能でしょうか？
少なくとも、関連性があると思われるコードのセクションがあります。ありがとう！
HTML
<div class='container-navbar'>
<div class='navbar'>
<div class='row'>
<div class='col-sm-2 col-md-1'>
<ul class='nav-left'>
<li class='header-button'><a href='http://www.freecodecamp.com/davallerr' target='_blank'>davallerr</a></li>
</ul>
</div>
<div class='col-sm-2 col-md-3'>
<div class='mobile-nav'>
<i onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></i>
<div id='mobileNavDrop' class='mobile-nav-drop'>
<a href='#about'>about</a>
<a href='#portfolio'>the work</a>
<a href='#contact'>contact</a>
</div>
</div>
<ul class='nav-right'>
<li><a href='#about'>about</a></li>
<li><a href='#portfolio'>the work</a></li>
<li><a href='#contact'>contact</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
.mobile-nav-icon {
padding: 1.25em;
}
.mobile-nav-icon:hover, .mobile-nav-icon:focus {
background: #40514f;
color: #fff;
}
.mobile-nav {
position: relative;
display: inline-block;
float: right;
overflow: visible;
}
.mobile-nav-drop {
display: none;
position: absolute;
right: 0;
background: #ccc;
min-width: 10em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.2);
}
.show {
display: block;
}
.mobile-nav-drop a {
color: #000;
padding: 1em;
display: block;
}
.mobile-nav-drop a:hover {
background: #aaa;
}
JS
function mobileNavDrop() {
document.getElementById('mobileNavDrop').classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('.mobile-nav-icon')) {
var dropdowns = document.getElementsByClassName('mobile-nav-drop');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
ありがとうございました。親ローとコンテナのオーバーフローの可視性がありました。両方ともデフォルトで隠されており、その場合にはオーバーライドする必要があります。 – davallerr
あなたは大歓迎です。私が助けることができてうれしいです。 –