Si vous n’avez pas reçu nos cadeaux précédents En-tête plein écran Divi et Divi Slide dans les en-têtes Pour le générateur de thèmes, découvrez-les maintenant. Cette mise en page vous permet de changer l’en-tête en quelque chose de complètement différent lorsque vous faites défiler et utilisez Divi Builder et Theme Builder pour le faire. Cet en-tête a également de très bons effets de survol de lien de menu, tirés d’un excellent tutoriel sur les 101 effets de menu CSS par Nelson chez Pee Aye Creative. Découvrez son Tutoriel sur les effets de menu CSS.

Consultez la superbe démo pour voir à quoi cela peut ressembler sur votre site Web. La plupart de mes autres mises en page d’en-tête ont opté davantage pour des fonctionnalités dans le code, mais celle-ci a une excellente fonctionnalité et peut être facilement modifiée pour répondre à vos besoins pour de nombreux sites Web de niche et locaux. Cela le rend vraiment facile à utiliser comme modèle pour le client ou vos propres sites Web pour vraiment créer tout ce que vous voulez pour votre navigation d’en-tête standard et votre navigation solide. Il a fière allure et fonctionne à merveille.

Cet en-tête est divisé en trois sections

  1. La première section est appelée Bureau du menu principal. Dans cette section, vous mettriez ce que vous voulez lorsque la page est affichée pour la première fois et ne défile pas.
  2. La deuxième section est appelée Fixed on Scroll Menu. Cette section vous permet de modifier l’apparence du menu lorsque l’utilisateur a fait défiler le point spécifié dans le code. C’est le menu qui apparaît lorsque vous êtes plus bas dans la page (Remarque: les deux premières sections sont uniquement destinées à être utilisées sur les ordinateurs de bureau / portables jusqu’à 981 pixels de large)
  3. La troisième section est appelée « Menu mobile ». C’est le menu que vous voulez sur un écran de 980 pixels de large ou moins. Je n’ai pas corrigé cet en-tête mobile, mais cela pourrait être fait en utilisant les sections Paramètres> Avancé> Paramètres de localisation. Dans le menu « Mobile », le texte de présentation est également triple sur les appareils mobiles, qui sont déterminés par certains CSS dans le module de code. Si vous souhaitez que cela change, vous pouvez supprimer le code du module ou supprimer la classe blurb de la ligne avec les trois blurbs

Code et modifications que vous pouvez apporter

Une grande partie de la disposition de cet en-tête peut être modifiée directement dans chaque module de l’en-tête, bien qu’il y ait quelques points à garder à l’esprit ci-dessous.

Cet en-tête fonctionne très bien lorsque le menu n’a pas de liste déroulante. Les listes déroulantes n’affichent pas la flèche vers le bas sur un élément de menu en raison des effets de survol sur les liens. La meilleure chose à faire est d’ajouter un espace à votre menu, puis d’ajouter ce caractère ▼. De cette façon, les visiteurs peuvent voir qu’il existe un sous-menu sous un lien de menu particulier. C’est le caractère que j’ai trouvé qui fonctionnait le mieux, bien que vous puissiez utiliser une flèche vers le bas ↓ ou une lettre V minuscule ou majuscule.

Dans cette disposition d’en-tête, il y a un module de code qui se trouve dans la deuxième section (Fixé sur le menu de défilement) dans la ligne et dans la troisième colonne. Vous trouverez ci-dessous une partie de ce code, avec certaines des zones les plus courantes que vous voudrez peut-être modifier pour obtenir l’effet ou l’apparence que vous souhaitez que votre en-tête ressemble. Tout ce que vous voulez et savez modifier peut être modifié pour être exactement ce que vous voulez faire avec l’en-tête. Le code important qui doit être changé est surligné en rose et voici ce que fera chaque ligne de code.

  • 2 Ceci modifie la taille de la zone de lien de menu pour chaque lien de menu.
  • 10 C’est la couleur de l’effet de survol sur les éléments de lien de menu
  • 17 & 20 C’est la couleur des marges gauche et droite. Faites les deux de même
  • 25 Le 125 dans ce code peut avoir besoin d’être changé en fonction de la hauteur de votre en-tête. Il s’agit essentiellement de la hauteur en pixels de l’en-tête principal, qui est définie sur 125 pixels lors de l’ajout.
.custom-menu .et-menu-nav>ul>li>a{
   padding: 25px 20px!important;
   margin: 0!important;
}
.custom-menu nav>ul>li a:before,.custom-menu nav>ul>li a:after{
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   background-color:#663399;
   z-index: -1;
   -webkit-transform: scale(0.1);
   transform: scale(0.1);
   opacity: 0;
}
.custom-menu ul li{
   border-right:1px solid rgba(255,255,255,.25);
}
.custom-menu ul li:first-child{
   border-left:1px solid rgba(255,255,255,.25);
}
jQuery(document).ready(function($){
  $(window).scroll(function(){
    var scroll=$(window).scrollTop();
    if(scroll>=125){  $("#header-after-scroll").addClass("appear");
  } else{ $("#header-after-scroll").removeClass("appear");
  }
  });
});

Comment obtenir cette mise en page

Pour obtenir cet excellent cadeau, tout ce que vous avez à faire est de vous inscrire sur ma liste pour bénéficier de mises à jour intéressantes sur Divi et les mises à jour de conception Web, ainsi que d’autres cadeaux et tutoriels. Je recommanderais de regarder la vidéo ci-dessus car elle donne un aperçu de la façon d’utiliser ces mises en page. Dans le fichier zip de ces mises en page, il y a également une très courte liste d’instructions sur la façon de commencer avec celles-ci. Je n’ai pas essayé tous les modules avec ceux-ci, il peut donc y avoir des conflits. Si vous trouvez quelque chose qui ne fonctionne pas correctement, veuillez me le faire savoir.

changelog
exécution
1.0 15/02/20 Version originale

1.1 16/02/20 – Code de menu fixe pour les menus avec liste déroulante

J’espère que vous aimez la mise en page!

A propos de Josh Collier

Josh, diplômé de la Northern Arizona University avec un diplôme en finance d’entreprise, est un apprenant pratique qui a toujours préféré apprendre par l’apprentissage. Un jour, vers 2015, il a commencé un blog sur la préparation et s’est beaucoup amusé à créer le site Web. En fin de compte, il s’est rendu compte qu’il aimait beaucoup plus créer le site que rédiger le contenu. Il a donc continué à collecter des livres sur HTML, Javascript et CSS et a suivi des cours en ligne gratuits sur la création de sites Web. En 2017, sa sœur Shyla lui a proposé un poste de sous-traitance pour créer des sites Web pour sa société de marketing sur les réseaux sociaux, Premiere Social Media, et il a adoré. Il a finalement pu créer des sites Web pour de vraies personnes et s’est vite rendu compte qu’il avait trouvé sa passion.





Source link

Recent Posts