0
我正在努力與一些CSS。wordpress下拉菜單固定標題div外
我有一個用javascript製作的下拉菜單。下拉菜單正常工作，但當按下按鈕時，頁面頂部的固定標題將會展開。
我想要的是，當我按下按鈕的下拉菜單將可見的固定頭div分區之外。
(function() {
var nav = document.getElementById('site-navigation'), button, menu;
if (! nav) {
return;
}
button = nav.getElementsByTagName('button')[0];
menu = nav.getElementsByTagName('ul')[0];
if (! button) {
return;
}
// Hide button if menu is missing or empty.
if (! menu || ! menu.childNodes.length) {
button.style.display = 'none';
return;
}
\t button.onclick = function() {
if (-1 === menu.className.indexOf('nav-menu')) {
menu.className = 'nav-menu';
\t \t \t alert('hallo');
}
if (-1 !== button.className.indexOf('toggled-on')) {
button.className = button.className.replace(' toggled-on', '');
menu.className = menu.className.replace(' toggled-on', '');
\t \t \t alert('replace toggled-on');
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
\t \t \t alert('+= toggled-on');
}
};
})(jQuery); \t/* Navigation Menu */
.main-navigation {
\t position: relative;
margin-top: 24px;
margin-top: 1.714285714rem;
\t float: right;
\t height: 100%;
\t
\t
}
.menu-hoofd-menu-container {
\t height: 100%;
overflow: hidden;
position: absolute;
left: -30px; top: 0px;
width: 100%;
}
.nav-menu {
\t position: relative;
\t padding: 0px;
\t z-index: 999;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}<div id="header">
\t \t <div id="header-content">
\t \t \t <img src="<?php echo get_theme_mod('m1_logo'); ?>" alt="logo" />
\t \t \t
\t \t \t <nav id="site-navigation" class="main-navigation" role="navigation">
\t \t \t \t <button class="menu-toggle">Menu</button>
\t \t \t \t <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?>
\t \t \t </nav>
\t \t </div>
\t \t
</div>