Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Créer_Un_Menu_Responsive
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Créer_Un_Menu_Responsive

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5602
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Créer_Un_Menu_Responsive
    Envoyé : 07 Oct 2020 à 03:40
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
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5602
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Oct 2020 à 21:17
Voilà le tuto annoncé.
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 724
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne