jQuery Girl
  1. jQuery Girl
  3. Réduire l’en-tête du mobile lorsque l’utilisateur clique sur un autre endroit de la page
Intereting Posts
Comment puis-je empêcher le déchargement d’une page avec jQuery? La boîte à outils jQuery ui s’ouvre par défaut dans IE 10 Limitation de caractères de Ckeditor avec le plugin charcount jquery fadeout écouteur d’événement jQuery: Désactiver l’événement onclick en utilisant off () ne fonctionne pas Javascript / jQuery – Aller à l’URL basé sur les sélections déroulantes Comment déclencher une fonction lorsque tous les appels ajax d’une fonction sont terminés? Comment créer un compte à rebours de 5 secondes avec jquery qui se termine par une fenêtre de connexion? Prévention des valeurs dans les entrées HTML avec jQuery Obtenir la deuxième partie du tr en utilisant jquery Rappel jQuery – violation ssortingcte Plusieurs conteneurs dans Lazy Load jQuery Mobile alignement des images miniatures Débordement de défilement horizontal CSS avec le curseur jQuery jQuery valider avec un nombre de champs dynamic

Réduire l’en-tête du mobile lorsque l’utilisateur clique sur un autre endroit de la page

Je travaille actuellement avec un en-tête très basique (je souhaite éventuellement qu’il s’anime lors de l’ouverture et de la réduction et que le menu hamburger s’anime vers / depuis l’icône de fermeture). L’en-tête est réactif et l’utilisateur peut le réduire en appuyant sur l’icône de fermeture. Comment puis-je le faire s’effondrer chaque fois que quelque chose d’autre que l’en-tête est exploité:

Voici ce que je travaille jusqu’à présent. 

body, html { max-width: 100%; padding: 0vw; margin: 0vw; } .header { background-color: #ffffff; position: fixed; top: 0%; left: 0%; right: 0%; height: 10vh; z-index: 1; border-bottom: solid; display: flex; justify-content: space-between; } .headerfill { height: 10vh; border: none; } .header-container { width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: center; margin: auto; margin-left: auto; margin-right: auto; } .logo-container { float: left; width: 40%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } .navigation-container { width: 60%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } @media only screen and (max-width: 500px) { .logo-container { float: left; width: 80%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } } @media only screen and (max-width: 500px) { .navigation-container { width: 20%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } } .logo { height: 8vh; max-width: 40%; padding-top: 1.5vh; padding-bottom: 0.5vh; padding-left: 4vh; display: block; object-fit: contain; } @media only screen and (max-width: 500px) { .logo { height: 8vh; max-width: 80%; padding-top: 1.5vh; padding-bottom: 0.5vh; padding-left: 2vh; display: block; object-fit: contain; } } img { -webkit-user-drag: none; } .nav { font-family: 'Roboto', serif; font-size: 2vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } @media only screen and (max-width: 500px) { .nav { font-family: 'Roboto', serif; font-size: 8vw; text-align: left; margin-top: 2vh; margin-bottom: auto; color: #000000; padding-left: 2vh; padding-right: 2vh; line-height: 1em; object-fit: contain; text-decoration: none; } } .nav:hover { color: #096e67; } a:link { color: #000000; text-decoration: none; } h1 { font-family: 'Roboto', serif; font-size: 4vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 4vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } @media only screen and (max-width: 500px) { h1 { font-family: 'Roboto', serif; font-size: 8vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 2vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } } nav { display: flex; width: 100%; justify-content: space-evenly; margin-right: auto; text-align: right; } nav a { display: block; } i { display: none !important; } @media (max-width: 500px) { nav { position: absolute; top: 100%; left: 0; right: 0; display: none; } nav.active { display: block; background-color: aqua; border-top: solid; border-bottom: green solid 0.2vh; padding: 1vh; padding-bottom: 2vh; } i { display: block!important; margin: 5px; } } .fa { font-size: 6vh; padding-top: 2vh; padding-bottom: 2vh; padding: 0vh; } 
    Website Header       
 
 
 
  
 
   
 
 
 
  menu = document.querySelector('nav'); document.querySelector('i') .addEventListener('click', e => { menu.classList.toggle('active') document.querySelector('header i').classList.toggle('fa-bars') document.querySelector('header i').classList.toggle('fa-times') })

Il y en a beaucoup. J’aimerais juste que si l’utilisateur décide de cliquer ailleurs, il n’a pas besoin de cliquer sur le bouton de fermeture pour pouvoir restr sur cette page.

Bonus si quelqu’un peut comprendre comment append un bootstrap pour développer et réduire l’en-tête (en mode mobile) et pour animer le menu Fermer / hamburger.

Très coincé, merci d’avance.