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 inverser le tri
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 778
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Créer_Un_Menu_Responsive
    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
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6050
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é.
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
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: 6050
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post 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

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 - 11 Juin 2021 à 20:09
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
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