Le sticky menu est une des nouvelles tendances du webdesign. Cela consiste, à maintenir le menu principal collé en haut de la fenêtre du navigateur, lors du défilement vertical des pages.
Il est possible de créer un simple sticky menu à l’aide de la propriété CSS position: fixed. C’est la méthode qui va être présenté ici. L’avantage de cette méthode, c’est qu’elle est simple et donc à portée de tous. L’inconvenant est qu’il n’est pas possible de bloquer le menu seul. Il faudra bloquer tous l’entête de la page. Pour les thèmes ayant un en-tête fin (200px de haut environ) cela ne posera pas de problème, pour les autres oui. Car pendant le défilement vertical de la page cet en-tête figé sera trop imposant sur les écrans de petites tailles.
Pour ceux qui possède un en-tête trop volumineux, il est préférable d’utiliser un plugin, voir même de Jquery. Avec cette méthode, seul le menu sera maintenu en haut de page, le reste de l’en-tête disparaitra.
Pour créer un sticky menu, il faut commencer par repérer la balise div qui englobe la totalité du header de votre site. Généralement appelé header. Pour la localiser facilement, afficher la page d’accueil de votre site puis utiliser les outils de développement de votre navigateur web. Une fois localisé, ouvrez le fichier style.css de votre thème à l’aide de votre éditeur de texte préféré, puis en fin de fichier ajouter le code suivant :
[php] .header {position: fixed;
left: 10%;
z-index: 1000;
background-color: #FFF;
}
[/php]
Dans l’exemple ci-dessus, l’en-tête du thème se trouve dans : div class= »header »
.
- position: fixed. Permet de maintenir l’en-tête haut de la page pendant le défilement vertical.
- left. Par défaut, l’élément vient se caller dans le coin supérieur gauche du navigateur, utilisez left pour recentrer l’en-tête.
- z-index. Si le menu passe en dessous du contenu, ajoutez également la propriété z-index et le contenue passe en dessous.
- background-color. Ajoutez en un car pendant le défilement de la page, le contenue peut être visible dans les espaces vides du header.
Pour la propriété left préférez une valeur en pourcentage, cela permet une meilleure intégration en responsiv web design. Ou bien, faite un en-tête faisant toute la largeur de la fenêtre du navigateur. La propriété left prendra la valeur auto
[php] .header {position: fixed;
left: auto;
width: 100%;
z-index: 1000;
background-color: #FFF;
}
[/php]
Pour finir, repérer la balise div qui contient le contenu de la page, généralement appelé : content, container ou wrap. Ajouter lui un padding-top dont la valeur correspond à la hauteur de l’en-tête.
