[Tuto] Créer_Un_Menu_Responsive

Imprimé depuis: Forum openElement
Categorie:

openElement

Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=23957
Date: 30 Oct 2020 à 10:33
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com

Sujet: [Tuto] Créer_Un_Menu_Responsive

Posté par: Hobby001
Sujet: [Tuto] Créer_Un_Menu_Responsive
Posté le: 07 Oct 2020 à 03:40

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

https://zupimages.net/viewer.php?id=20/42/bzdg.jpg" rel="nofollow">

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

Ou directement à l'adresse suivante: http://youtu.be/2VTVuvN3Dl4" rel="nofollow - 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');
}
} 
);

-------------
https://www.denislafrance.net" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.

Réponses:

Posté par: Hobby001
Posté le: 13 Oct 2020 à 21:17

Voilà le tuto annoncé.

-------------
https://www.denislafrance.net" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.

Posté par: jjb1
Posté le: 15 Oct 2020 à 08:57

Je viens de regarder la vidéo : MAGNIFIQUE.

Le sujet est très technique et pourtant me parait très accessible au débutant pour peu de prendre son temps.

Merci pour le temps passé à monter cette vidéo et bravo.

-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)