如何在WordPress中制作粘性菜单

您将要创造的

导航菜单正在更改。 设计人员不仅在不考虑采用哪种格式的情况下就将其扔到站点中，还花时间考虑导航菜单的设计，其在页面上所占据的空间以及用户与之交互的方式。

粘性菜单是一种增长趋势。 当用户向下滚动时，这些菜单位于浏览器窗口的顶部。

这样，无论用户在页面上向下移动的位置如何，菜单仍然可以访问，从而使人们可以更轻松地浏览站点。

在本教程中，您将学习何时添加（而不添加）粘性菜单，以及如何向主题添加代码。

何时使用即时贴菜单

粘性菜单并不总是理想的。 最好在页面顶部且没有子菜单的小型单行菜单上使用它们。

这是有效的粘性菜单的一些示例。

苹果网站有一个简单的菜单，没有下拉菜单。 它仅占用页面顶部很少的空间，因此是粘性菜单的理想选择。

Ted Baker站点还具有粘性的单行菜单。 在这种情况下，该站点使用大型菜单，因此当您将鼠标悬停在其中一个元素上时，它将扩展。

但是在某些情况下，粘滞菜单不起作用。 例如，《卫报》网站的标题很大，并且菜单下方。 如果菜单是粘性的，则意味着菜单和标题占据了太多的屏幕空间。

IBM站点在屏幕顶部具有一个带有下拉菜单的菜单。 该网站未使用即时贴菜单，可能是由于下拉菜单，当下拉菜单添加到即时贴菜单时，这些下拉菜单有时无法正常工作。

使用导航菜单的最佳时间是导航菜单位于屏幕顶部并且是简单的单行菜单。 从上面的示例中可以看到，这可以与大型菜单一起使用，但是您确实需要小心处理。 如果用户在向下滚动时不小心将鼠标悬停在粘性菜单上，然后突然出现了超级菜单，则无法获得最佳的用户体验。

向您的主题添加便利菜单：入门

现在，让我们看一下使导航菜单保持粘性所需的代码。

你需要：

• 您可以编辑的主题（请参见下文）。
• WordPress的开发安装-不要在您的实时网站上尝试！
• 代码编辑器。
• 访问您的主题文件。

我将致力于自己发展的主题。 如果您使用的是第三方主题，请确保创建一个子主题并对其进行任何编辑。 如果您编辑第三方主题本身，则下次更新它时，所做的更改将丢失。

起始码

这是我要处理的网站：

如果我向下滚动，菜单将消失：

我想编辑菜单CSS，以便在滚动时它位于页面顶部。

这是将菜单添加到站点的代码，位于我主题的header.php文件中：

<div class="header-bg">
    
    	<header role="banner">
	
			<hgroup class="site-name one-third left">
				<!-- site name and description - site name is inside a div element on all pages except the front page and/or main blog page, where it is in a h1 element -->
				<h1 id="site-title" class="one-half-left">
					<?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') )  || is_page_template( 'page-tripwire.php' ) ) {
						bloginfo( 'name' );
					} 
					else { ?>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					<?php } ?>
				</h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
	
			<div class="right two-thirds">
				<!-- This area is by default in the top right of the header. It contains contact details and is also where you might add social media or RSS links -->
				
				<?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ?>
					<a class="toggle-nav" href="#">&#9776;</a>
				<?php } ?>
				
				<!-- navigation menu -->
				<?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ?>
					<nav class="menu main right">
						<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
						<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
					</nav><!-- .main -->
	            <?php } ?>
				
			</div> <!-- .one-half right -->
		
		</header><!-- header -->
		
	</div><!-- header-bg-->

此代码包含许多元素：

• 导航和标题的背景（全角）
• 标头元素本身，其宽度为CSS
• 网站名称和说明
• 导航菜单

它使用主题中CSS进行布局，浮动和颜色设置，例如浮动的.right和.left类。

这是该标头横幅主要元素CSS：

.header-bg {
    background: #21759B;
}

header {
    margin: 0 auto;
	width: 96%;
	max-width: 1200px;
	clear: both;
	padding-bottom: 1em;
}

彼此相邻浮动的元素（网站标题，描述和菜单）使用CSS来实现浮动和宽度，而这些元素并非特定于这些元素：

.one-third.left {
    margin: 0 1% 0 0;
	float: left;
}

.two-thirds.right {
    margin: 0 0 0 1%;
	float: right;
}

您的样式与此不同，但是将包括背景，宽度和浮点样式的某种形式的样式。 如果要为第三方主题创建子主题，请花一些时间查看现有样式表，以便了解子主题CSS的目标。

使菜单变粘

现在，让我们添加代码以使菜单具有粘性。 我要定位的元素是.header-bg元素，其中包含其他所有内容。

在您的主题中，找到表示菜单背景或菜单本身的元素（如果未包装在其他任何东西中）。 某处可能涉及header元素。 这就是为什么使用WordPress开发安装需要付费的原因-您可能需要试验！

找到需要坚持到页面顶部的顶级元素后，将其添加到其中：

.header-bg {
	position: fixed;
	top: 0;
	width: 100%;
}

这样做是为了将菜单固定在页面顶部，或者使其变得粘稠：

但是，有一个问题。 菜单与屏幕下方的内容重叠。 当我向下滚动时，这并不明显，但是当我向上滚动至屏幕顶部时，第一行文本被隐藏了。

这是因为菜单的.fixed位置使它脱离了呈现时HTML的常规流程，这意味着浏览器将呈现屏幕顶部接下来出现的所有HTML。

让我们修复它。 为此，我们需要在下一个元素（即具有.main类的div）的顶部添加空白。 我们还需要为即时贴菜单设置一个高度，以确保它等于该边距。

为了达到这个目的，我需要查询.header-bg元素内的元素CSS，以便找出高度是如何计算的。

.header-bg和header元素未设置高度，并且顶部和底部填充以及边距均为零。 如果进一步深入，可以在菜单内找到列表项的填充：

#menu-navbar li {
    padding: 1em 5px;
    margin: 0;
}

文本的字体大小与body元素的字体大小相同，因此我们可以将其视为1em。 这使我们的标题栏总高度为3em。

这是调整后CSS：

.header-bg {
    position: fixed;
	top: 0;
	width: 100%;
    height: 3em;
}

div.main {
    margin-top: 3em;
}

请注意，我已经div.main了.main资格，而不是使用.main 。 这是因为此主题还使用主菜单（ nav.main ）上的.main类。 是否需要这样做将取决于主题编码的方式。

现在，菜单应显示在内容上方：

当我向下滚动时，菜单（和标题的其余部分）保持固定不变：

这样便可以使导航菜单具有粘性！

便利菜单可增强用户体验并使您的网站现代化

如果您的站点在屏幕顶部有一个简单的菜单，则使用此技术使其变得粘滞，将使用户可以更轻松地访问它并在屏幕上的任意位置浏览您的站点。

但是，如果菜单很大，或者它位于标题元素的下面，这会占用太多空间，则粘性菜单可能会占用屏幕上太多的空间，从而降低用户体验。

这是您的电话，但是粘滞菜单的添加比您想象的要容易。

翻译自: https://code.tutsplus.com/tutorials/how-to-make-a-sticky-menu-in-wordpress--cms-32744