Créer le corp de la page en HTML
Pour créer une page en HTML, vous pouvez copier ce code et l’enregistrer dans un fichier .html.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'un menu responsive</title>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-1beec166-f870-4738-8aa2-5df611315f31: url('https://k-graphiste.com/wp-content/plugins/ultimate-social-media-icons/images/ajax-loader.gif');}:root{--wpr-bg-1460cbf5-abf4-4f1c-b711-70b08b049fce: url('https://k-graphiste.com/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}:root{--wpr-bg-5960b756-7bf9-48f0-965d-ddd265327166: url('https://k-graphiste.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"#sfpageLoad","style":":root{--wpr-bg-1beec166-f870-4738-8aa2-5df611315f31: url('https:\/\/k-graphiste.com\/wp-content\/plugins\/ultimate-social-media-icons\/images\/ajax-loader.gif');}","hash":"1beec166-f870-4738-8aa2-5df611315f31"},{"selector":".woocommerce .blockUI.blockOverlay","style":":root{--wpr-bg-1460cbf5-abf4-4f1c-b711-70b08b049fce: url('https:\/\/k-graphiste.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"1460cbf5-abf4-4f1c-b711-70b08b049fce"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-5960b756-7bf9-48f0-965d-ddd265327166: url('https:\/\/k-graphiste.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"5960b756-7bf9-48f0-965d-ddd265327166"}]; const rocket_excluded_pairs = [];</script></head>
<body data-rsssl=1>
<nav class="Le_menu">
<div class="Toutes_les_pages">
<a href="#">Accueil</a>
<a href="#">Actualité</a>
<a href="#">Contact</a>
</div>
</nav>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Pour l’instant, le code HTML est basique et contient simplement la balise <nav> contenant une classe. J’y ai également annoté un menu de navigation très simplifié, qui n’est pour l’instant pas stylisé.
Cependant, j’ai déjà créer le lien vers mon fichier style.css dans la balise <head>.
Styliser le menu en CSS
Maintenant que le menu de navigation est en place, il faut développer son style en CSS et l’adapter à vos besoins en terme de mise en page.
Par exemple, si vous souhaitez que votre menu prennent une place de 8 colonnes sur 12, il faudra l’indiquer clairement dans le code.
Dans le cas où vous utilisez Bootstrap, vous pouvez vous servir la balise <div class= »col-lg-8″> pour intégrer votre menu.
Dans l’exemple que je présente sur cette page, le menu comprendra 100% de la largeur de l’écran. Voici le code CSS qui stylisera votre menu :
.Le_menu
{
margin: 100px auto;
width: 50%;
height: 100px;
background: #48435C;
}
.Le_menu .Toutes_les_pages
{
display: flex;
justify-content: space-around;
align-items: center;
}
.Le_menu .Toutes_les_pages a
{
width: 20%;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
text-decoration: none;
font-family: Roboto, sans-serif;
color: white;
}
.Le_menu a:hover
{
background: #5A5766 }
Ajouter un menu hamburger personnalisé
Maintenant que votre menu est parfait sur une taille d’écran orientée PC, il faut s’occuper du mobile. Il faudra donc créer le menu hamburger ( en forme de trois traits horizontaux ), qui permettra de cliquer dessus et déplier le menu.
Par contre, il faut configurer ce menu hamburger pour qu’il ne soit accessible que sur mobile, et pas sur ordinateur.
Label
Ce label, c’est en faite le code qui permet de créer le menu hamburger. Vous pouvez le placer ou vous le souhaitez sur votre page ( comme par exemple en position : absolute ).
Dans cet exemple, je vais le mettre juste à la suite de la classe Toutes_les_pages.
<label for="toggle" class="label-hamburger">☰</label>
CheckBox
Nous allons également ajouter un <input> après ce <label> qui nous servira un peu plus tard. Voici le code à intégrer :
<input type="checkbox" id="toggle">
Modifier l’apparence du menu sur mobile
Maintenant que votre menu hamburger est parée, alors il faudra styliser le menu sur téléphone. Pour cela, un joli petit bout de code est à intégrer dans votre fichier CSS.
En voici un exemple que vous pourrez adapter à vos besoins ( couleurs, typographie… )
@media all and (max-width: 991px)
{
.Le_menu
{
height: 60px;
}
.Le_menu .Toutes_les_pages
{
display: none;
}
.label-hamburger
{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 40px;
color: white;
cursor: pointer;
}
}
Activer le menu sur mobile
Une fois que votre menu est désigné pour ordinateur et pour mobile, il faudra écrie un nouveau code en CSS permettant d’afficher le menu sur téléphone, qu’après avoir cliqué sur le menu hamburger. Ajouter donc ceci à votre fichier CSS
label, #toggle
{
display: none;
}
@media all and (max-width: 991px)
{
.Le_menu
{
height: 60px;
}
.Le_menu .Toutes_les_pages
{
display: none;
flex-direction: column;
background: #48435C;
height: 220px;
}
.Le_menu .Toutes_les_pages a
{
width: 50%;
}
.label-hamburger
{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 40px;
color: white;
cursor: pointer;
}
#toggle:checked + .Toutes_les_pages
{
display: flex;
}
}
