openElement

   Bonjour, voici un nouveau tuto sur comment créer un menu responsive avec OpenElement 

Vous trouverez le tuto sous forme vidéo dans cette playlist YouTube: https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih

Ou directement à l'adresse suivante: https://youtu.be/2VTVuvN3Dl4

Pour faire cet exercice vous aurez besoin des trois blocs de code suivants:

Code html

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

Code CSS

@media only screen and (min-width:768px){
.BarreMenuFond{
background-color:rgba(0,0,0,.5);
}
}

.BarreMenu{
z-index:30000 !important;
position: fixed !important;
}

html {
scroll-behavior: smooth;
}

Code javascript

$('.Hamburger').click(
function(){
$('.BoutonMenu').toggle();
$('.Hamburger').toggle();
$('.BarreMenu').toggleClass('BarreMenuFond');
}
);

$('.BoutonMenu').click(
function(){
if (window.matchMedia("(max-width: 767px)").matches) {
$('.Hamburger').toggle();
$('.BoutonMenu').toggle();
$('.BarreMenu').toggleClass('BarreMenuFond');
}
} 
);

Edité par Hobby001 - 13 Oct 2020 à 21:18

openElement

[Tuto] Créer_Un_Menu_Responsive