Comment faire un menu collant dans WordPress

Les menus de navigation sur le site Web sont des éléments de conception cruciaux. Au lieu d'ajouter simplement un menu sans examen attentif, les concepteurs doivent hiérarchiser la conception du menu, l'allocation d'espace de page et l'interaction des utilisateurs.

Les menus collants, populaires pour leur placement persistant haut de gamme pendant le défilement, offrent une accessibilité continue quelle que soit la position de la page. Cela améliore la navigation du site.

quand utiliser des menus collants

Les menus collants ne sont pas universellement adaptés. Ils fonctionnent mieux avec de petits menus à une seule ligne au sommet de la page, manquant de sous-menus.

Les exemples de menu collant efficaces incluent:

• Site Web d'Apple: Son menu supérieur simple et économe en espace est idéal pour la mise en œuvre collante.

• Site de Ted Baker: Son menu à une seule ligne utilise une méga-menu en explosant, démontrant une intégration méga-menu collante réussie.

Cependant, les menus collants ne sont pas toujours appropriés. Par exemple:

• Le site Web du Guardian: Son grand en-tête et son menu placé inférieur créeraient une occupation d'écran excessive si elle est rendue collante.

• Site d'IBM: Son menu supérieur avec des départs n'est pas collant, probablement en raison de conflits potentiels de fonctionnalités listes dans un contexte collant.

L'utilisation de menu collant optimal implique un menu unique simple et haut de gamme. Bien que les méga-menus puissent fonctionner, une mise en œuvre minutieuse est cruciale pour éviter de mauvaises expériences des utilisateurs (par exemple, des apparences inattendues méga-menus pendant le défilement).

Ajouter un menu collant: un guide pratique

Explorons le code pour créer un menu de navigation collant.

Exigences:

• un thème modifiable (voir ci-dessous).
• un environnement de développement WordPress (éviter les modifications du site en direct).
• un éditeur de code.
• accès à vos fichiers de thème.

Pour cet exemple, un thème personnalisé sera utilisé. Pour les thèmes tiers, créez un thème enfant pour préserver les modifications lors des mises à jour.

Exemple de code initial

Considérez ce site Exemple:

Le menu disparaît lors du défilement:

Le CSS sera modifié pour maintenir la position supérieure du menu pendant le défilement. Le fichier header.php contient le code de menu:

<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>

Ce code comprend:

• Navigation et fond d'en-tête (pleine largeur).
• élément d'en-tête (avec largeur CSS).
• Titre et description du site.
• Menu de navigation.

thème CSS gère la disposition, les flotteurs et les couleurs. Le position: sticky; top: 0px; CSS sera utilisé pour créer l'effet collant. Cela fait que l'élément se comporte normalement jusqu'à ce qu'il atteigne le seuil de décalage, après quoi il reste fixe.

Une démo Codepen présente cela en action.

[Codepen Embed ici - Remplacez par du code intégré de code de codep de code]

Le positionnement collant permet également des bannières au-dessus du menu dans l'état initial (non incalculable), disparaissant automatiquement lors du défilement. Marquage de base pour ceci:

<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>

CSS pertinent:

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

Cela corrige l'en-tête (contenant la navigation) à zéro pixels du haut de la fenêtre.

Conclusion

Pour les sites avec des menus simples et supérieurs, les menus collants améliorent la navigation utilisateur. Cependant, de grands menus ou des menus en dessous des éléments d'en-tête peuvent provoquer une occupation excessive d'écran, ce qui a un impact négatif sur l'expérience utilisateur. La décision dépend de la conception spécifique du site Web, mais l'ajout d'un menu collant est plus simple que ce à quoi on pourrait s'attendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!