如何在WordPress中制作粘性菜单

>网站导航菜单是至关重要的设计元素。 设计师不应简单地添加菜单，而应优先考虑菜单设计，页面空间分配和用户交互。

粘性菜单在滚动过程中以其持久的浏览器位置而流行，无论页面位置如何，都可以提供连续的可访问性。 这增强了站点导航。

>

何时使用粘性菜单> 粘性菜单并不普遍。 他们在页面上的小型单行菜单最佳工作，缺少子菜单。

>

有效的粘性菜单示例包括：

苹果的网站：
• 其简单，空间效率的顶部菜单是粘性实现的理想选择。>

Ted Baker的网站：其单线菜单采用了悬停在悬停的大型菜单，展示了成功的粘性巨型菜单。

• 但是，粘稠的菜单并不总是合适的。 例如：

守护者网站：

它的大型标头和下位置的菜单将产生过多的屏幕职业。

> IBM的网站：

其顶部菜单不粘，这可能是由于潜在的下拉功能冲突在粘性上下文中。

>

最佳粘性菜单的使用涉及简单，顶部的单线菜单。尽管Mega Menus可以正常工作，但仔细的实施对于避免用户体验差至关重要（例如，滚动过程中意外的大型曼努人出现）。

添加粘性菜单：实用指南

>

>让我们探索用于创建粘性导航菜单的代码。> 要求：

一个可编辑的主题（请参见下文）。 > wordpress开发环境（避免实时站点修改）。

>

代码编辑器。
访问您的主题文件。
在此示例中，将使用自定义主题。 对于第三方主题，请在更新过程中创建一个儿童主题来保留编辑。
• >
初始代码示例

考虑此网站示例：

菜单在滚动时消失：

> CSS将进行修改，以在滚动过程中维护菜单的最高位置。 header.php文件包含菜单代码：

<div class="header-bg"><br></br><br></br><br></br><br></br><hgroup class="site-name one-third left"><br></br><br></br><h1 id="br-br-php-if-is-singular-array-rmcc-landing-rmcc-signup-is-page-template-page-tripwire-php-br-bloginfo-name-br-br-br-br-else-br-br-a-href-https-www-php-cn-link-c-cf-f-df-d-d-bf-rel-home-title-php-echo-esc-attr-get-bloginfo-name-display-php-bloginfo-name-a-br-br-php-br-br"><br></br><?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') )  || is_page_template( 'page-tripwire.php' ) ) {<br?>                       bloginfo( 'name' );<br></br>                 } <br></br>                  else { ?><br></br><a href="https://www.php.cn/link/0783683c446cf52f9df7d90d92bf5239'/' ); ?>" rel="home" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ??></a><br></br><?php } ??><br></br></h1><br></br><h2 id="site-description"><?php bloginfo( 'description' ); ??></h2><br></br></hgroup><br></br><br></br><div class="right two-thirds"><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><a class="toggle-nav" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">☰</a><br></br><?php } ??><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><nav class="menu main right"><br></br><div class="skip-link screen-reader-text"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bcontent" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ??></a></div><br></br><?php wp_nav_menu( array( 'container_class' =?> 'main-nav', 'theme_location' => 'primary' ) ); ?><br></br></nav><br></br><?php } ??><br></br><br></br></div> <br></br><br></br><br></br><br></br></div><br></br>

此代码包括：

• >导航和标题背景（全宽）。
• 标题元素（带有宽度CSS）。
• >站点标题和描述。
• 导航菜单。

>主题CSS处理布局，浮点和颜色。 CSS将用于创建粘性效果。 这使得元素的行为正常，直到达到偏移阈值，之后它保持固定。 position: sticky; top: 0px;codepen演示在行动中展示了这一点。

[codepen嵌入在这里 - 用实际的codepen嵌入代码替换]

>

>粘性定位还允许在菜单（非滚动）状态的菜单上方横幅，在滚动时会自动消失。 为此的基本标记：

相关的CSS：

<div class="banner"><br></br><p>I am a banner!</p><br></br></div><br></br><br></br><nav><br></br><ul><br></br><li>Home</li><br></br><li>Blog</li><br></br><li>Products</li><br></br><li>Contact</li><br></br></ul><br></br></nav><br></br><br></br><br></br><br></br><br></br>

这将视图顶部的标题（包含导航）固定为零像素。

header {<br></br>  position: sticky;<br></br>  top: 0px;<br></br>}<br></br>

结论

对于具有简单，顶级菜单的网站，粘性菜单可增强用户导航。但是，标头元素下方的大型菜单或菜单可能会导致屏幕过度占用，从而对用户体验产生负面影响。 该决定取决于特定的网站设计，但是添加粘性菜单比人们预期的要简单。

以上是如何在WordPress中制作粘性菜单的详细内容。更多信息请关注PHP中文网其他相关文章！