如何在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中文網其他相關文章！