Il faut évidement combiné cela avec d'autres règles css. Si tu ne veux pas que cela pousse ton contenu vers le bas (et tu as bien raison), tu peux voir pour essayé de faire des "couches" avec z-index.
Faut pas hésité à ajouter des règles pour essayer des choses !
Même avec les couches z-index je trouve ça moche, car les liens nav en mobile s'étendent sur toute la largeur de l'écran.
En fait, ce que je cherche à faire exactement c'est dans mon exemple au tout début : en version mobile, la nav apparait de droite vers la gauche. C'est ce qu'on voit sur la plupart des sites modernes.
Le problème n’étais pas qu'il soit beau, le design ca se travail comme tu le veut.
Le but étais de te montrer que tu n'avais absolument pas besoin de faire deux menus.
Quand à ton exemple question design même si je ne suis pas fan, c'est assez simple à reproduire.
Tiens regarde une autres façon de faire sans même utiliser de JS, et encore une fois un seul menu.
Et la encore c'est la mécanique qui compte, pas le design.
<!DOCTYPE html>
<html>
<head>
<title>
Test OCR
</title>
<link href="" rel="stylesheet">
<style type="text/css">
#menu {
position: fixed;
right: 0;
top: 45px;
width: 100vw;
margin: -2.5em 0 0 0;
z-index: 5;
background: hsla(233, 63%, 40%, 0.7);
color: white;
font-weight: bold;
font-size: large;
text-align: right;
border: solid hsla(80, 90%, 40%, 0.5);
border-right: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
border-radius: 3em 0.5em 0.5em 3em;
}
#menu li {
display: inline-block;
}
#menu a {
color: inherit
}
/* ==================== Pour écran largeur <= 768px ==================== */
@media screen and (max-width: 768px)
{
#menu {
position: fixed;
right: -5.5em;
top: 65px;
width: 5em;
margin: -3em 0 0 0;
z-index: 5;
background: hsla(233, 63%, 40%, 0.7);
color: white;
font-weight: bold;
font-size: large;
text-align: left;
border: solid hsla(80, 90%, 40%, 0.5);
border-right: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
border-radius: 3em 0.5em 0.5em 3em;
transition: 0.2s;
margin: 0;
transform: translate(0, -50%);
}
#menu:hover { right: 0 }
#menu li { margin: 0 }
#menu a {
position: relative;
left: 0;
color: inherit;
transition: 0.2s;
}
#menu a:focus {
left: -7em;
background: hsla(80, 90%, 40%, 0.7);
}
#menu:hover a:focus {
left: 0;
background: none;
}
}
</style>
</head>
<body>
<nav>
<ul id=menu>
<li><a href="#">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li>
<li><a href="#">Onglet 4</a></li>
</ul>
</nav>
<div id="page-contents" style="padding: 10px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vitae malesuada ipsum. Duis sit amet leo metus.
Vivamus sed libero eleifend, auctor leo non, dignissim tortor.
Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi.
</p>
<p>
Donec ac elit massa. In sed bibendum risus.
Ut condimentum est nec urna volutpat, quis vehicula elit elementum.
Quisque molestie auctor ante eu fermentum.
In hac habitasse platea dictumst.
</p>
<p>
Suspendisse vehicula dui sed tempor interdum.
Vestibulum pharetra dolor at felis auctor hendrerit.
In vel risus dictum, condimentum leo et, tempus magna.
Ut pretium semper mauris, nec mattis eros consequat quis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vitae malesuada ipsum. Duis sit amet leo metus.
Vivamus sed libero eleifend, auctor leo non, dignissim tortor.
Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi.
</p>
<p>
Donec ac elit massa. In sed bibendum risus.
Ut condimentum est nec urna volutpat, quis vehicula elit elementum.
Quisque molestie auctor ante eu fermentum.
In hac habitasse platea dictumst.
</p>
<p>
Suspendisse vehicula dui sed tempor interdum.
Vestibulum pharetra dolor at felis auctor hendrerit.
In vel risus dictum, condimentum leo et, tempus magna.
Ut pretium semper mauris, nec mattis eros consequat quis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vitae malesuada ipsum. Duis sit amet leo metus.
Vivamus sed libero eleifend, auctor leo non, dignissim tortor.
Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi.
</p>
<p>
Donec ac elit massa. In sed bibendum risus.
Ut condimentum est nec urna volutpat, quis vehicula elit elementum.
Quisque molestie auctor ante eu fermentum.
In hac habitasse platea dictumst.
</p>
<p>
Suspendisse vehicula dui sed tempor interdum.
Vestibulum pharetra dolor at felis auctor hendrerit.
In vel risus dictum, condimentum leo et, tempus magna.
Ut pretium semper mauris, nec mattis eros consequat quis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vitae malesuada ipsum. Duis sit amet leo metus.
Vivamus sed libero eleifend, auctor leo non, dignissim tortor.
Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi.
</p>
<p>
Donec ac elit massa. In sed bibendum risus.
Ut condimentum est nec urna volutpat, quis vehicula elit elementum.
Quisque molestie auctor ante eu fermentum.
In hac habitasse platea dictumst.
</p>
<p>
Suspendisse vehicula dui sed tempor interdum.
Vestibulum pharetra dolor at felis auctor hendrerit.
In vel risus dictum, condimentum leo et, tempus magna.
Ut pretium semper mauris, nec mattis eros consequat quis.
</p>
</div>
</body>
</html>
Le premier exemple que tu as montré, je connais déjà. Menu qui défile de haut vers le bas.
L'exemple que j'ai montré c'est pas pour le design : https://codepen.io/furyfatal/pen/BEJyZW. Juste pour le burger menu qui défile de droite vers la gauche (au lieu de haut vers le bas). C'est ça que je voulais absolument. J'ai jamais su le faire en un seul menu.
- Edité par Terry-Bogard 16 avril 2019 à 22:29:29
Menu Burger : éviter nav doublon
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Compos sui.
Compos sui.