Imprimer la Page | Close Window

[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)



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk