Question

我正在努力解决一些问题。

我有一个用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>

Answer 1

我认为可以通过使用下面的css来实现：

nav#site-navigation.main-navigation{
    position: absolute;
}

然后，您可以通过添加left和top等的值来调整其位置，请参阅下面的示例

nav#site-navigation.main-navigation{
    position: absolute;
    left: 0;
    top:0;
}

这会将打开的菜单置于左上角，您可以根据需要替换这些值。

wordpress下拉菜单在固定标题div

1 个答案: