我正在努力解决一些问题。
我有一个用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;
}
button.onclick = function() {
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className = 'nav-menu';
alert('hallo');
}
if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
alert('replace toggled-on');
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
alert('+= toggled-on');
}
};
} )(jQuery);
/* Navigation Menu */
.main-navigation {
position: relative;
margin-top: 24px;
margin-top: 1.714285714rem;
float: right;
height: 100%;
}
.menu-hoofd-menu-container {
height: 100%;
overflow: hidden;
position: absolute;
left: -30px; top: 0px;
width: 100%;
}
.nav-menu {
position: relative;
padding: 0px;
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">
<div id="header-content">
<img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="logo" />
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle">Menu</button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
</div>
答案 0 :(得分:0)
我认为可以通过使用下面的css来实现:
nav#site-navigation.main-navigation{
position: absolute;
}
然后,您可以通过添加left
和top
等的值来调整其位置,请参阅下面的示例
nav#site-navigation.main-navigation{
position: absolute;
left: 0;
top:0;
}
这会将打开的菜单置于左上角,您可以根据需要替换这些值。