So erstellen Sie ein klebriges Menü in WordPress

Website -Navigationsmenüs sind entscheidende Designelemente. Anstatt einfach ein Menü ohne sorgfältige Überlegung hinzuzufügen, sollten Designer das Menü -Design, die Zuordnung von Seitenraum und die Benutzerinteraktion priorisieren.

klebrige Menüs, die während ihrer anhaltenden Spitze des Browsers während des Scrollens beliebt sind, bieten unabhängig von der Seitenposition eine kontinuierliche Zugänglichkeit. Dies verbessert die Standortnavigation.

Wann verwendet klebrige Menüs

klebrige Menüs sind nicht allgemein geeignet. Sie funktionieren am besten mit kleinen einzelnen Menüs an der Seite oben, ohne dass der Untermenüs ist.

Beispiele für effektive Sticky -Menü zählen:

• Apples Website: Das einfache, platzeffiziente obere Menü ist ideal für die klebrige Implementierung.

• Ted Baker's Site: In seinem Single-Line-Menü wird ein Mega-Menu verwendet, der sich um Schwebedauer auszieht und eine erfolgreiche klebrige Mega-Menu-Integration zeigt.

klebrige Menüs sind jedoch nicht immer angemessen. Zum Beispiel:

• Die Guardian-Website: Der große Header und das niedrigere Menü würden übermäßige Bildschirmberufe erzeugen, wenn er klebrig gemacht wird.

• IBMs Site: Das obere Menü mit Dropdowns ist nicht klebrig, wahrscheinlich aufgrund potenzieller Dropdown -Funktionskonflikte in einem klebrigen Kontext.

optimales Sticky-Menü beinhaltet ein einfaches, erstklassiges Einzelmenü. Während Mega-Menus funktionieren kann, ist eine sorgfältige Implementierung von entscheidender Bedeutung, um schlechte Benutzererfahrungen zu vermeiden (z. B. unerwartete Mega-Menus-Auftritte während des Scrollens).

Hinzufügen eines klebrigen Menüs: Eine praktische Anleitung

Lassen Sie uns den Code zum Erstellen eines Sticky Navigation -Menüs untersuchen.

Anforderungen:

• Ein bearbeitbares Thema (siehe unten).
• Eine WordPress -Entwicklungsumgebung (Vermeiden Sie Live -Standortänderungen).
• ein Code -Editor.
• Zugriff auf Ihre Themendateien.

Für dieses Beispiel wird ein benutzerdefiniertes Thema verwendet. Erstellen Sie für Themen von Drittanbietern ein Kinderthema, um Änderungen während der Updates zu erhalten.

Beispielcode Beispiel

Betrachten Sie dieses Website -Beispiel:

Das Menü verschwindet beim Scrollen:

Das CSS wird geändert, um die obere Position des Menüs während des Scrollens beizubehalten. Die Datei header.php enthält den Menücode:

<code class="language-php"><div class="header-bg">
<br><br><br><br><hgroup class="site-name one-third left"><br><br><h1 class="one-half-left" id="site-title">
<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><a href="https://www.php.cn/link/0783683c446cf52f9df7d90d92bf5239'/'%20);%20?>" rel="home" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ??></a><br><?php } ??><br>
</h1>
<br><h2 id="site-description"><?php bloginfo( 'description' ); ??></h2>
<br></hgroup><br><br><div class="right two-thirds">
<br><br><br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br><a class="toggle-nav" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">☰</a><br><?php } ??><br><br><br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br><nav class="menu main right"><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><?php wp_nav_menu( array( 'container_class' =?> 'main-nav', 'theme_location' => 'primary' ) ); ?><br></nav><br><?php } ??><br><br>
</div> <br><br><br><br>
</div>
<br></code>

Dieser Code enthält:

• Navigation und Headerhintergrund (Vollbreite).
• Header -Element (mit Breite CSS).
• Site -Titel und Beschreibung.
• Navigationsmenü.

Thema CSS verarbeitet Layout, Schwimmer und Farben. Die position: sticky; top: 0px; CSS werden verwendet, um den klebrigen Effekt zu erzeugen. Dies lässt das Element normal verhalten, bis es den Offset -Schwellenwert erreicht, woraufhin es fest bleibt.

Eine Codepen -Demo zeigt dies in Aktion.

[CODEPEN ist hier einbett

Die klebrige Positionierung ermöglicht auch Banner über dem Menü im anfänglichen (nicht gesetzlichen) Zustand, der beim Scrollen automatisch verschwindet. Grundes Markup dafür:

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

relevantes CSS:

<code class="language-css">header {<br>  position: sticky;<br>  top: 0px;<br>}<br></code>

Dies behebt den Header (mit der Navigation) auf null Pixel vom Ansichtsfenster.

Schlussfolgerung

Für Websites mit einfachen, erstklassigen Menüs verbessert klebrige Menüs die Benutzernavigation. Große Menüs oder Menüs unter den Header -Elementen können jedoch zu übermäßigem Bildschirmberuf führen, was sich negativ auf die Benutzererfahrung auswirkt. Die Entscheidung hängt vom spezifischen Website -Design ab, aber das Hinzufügen eines klebrigen Menüs ist einfacher als erwartet.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein klebriges Menü in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!