TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Rendre le menu de navigation de niveau supérieur non cliquable dans Weebly

105

Weebly propose une plate-forme de création de site simple qui peut ne pas être utile comme c’est le cas pour la plupart des utilisateurs. Par exemple, organiser les pages dans l’ordre requis est pénible dans Weebly et rendre le menu de navigation de niveau supérieur non cliquable n’est pas possible par défaut. Tant que Weebly permet de modifier le CSS source, nous pouvons rendre ces choses possibles en ajoutant un simple code CSS au fichier CSS principal "main_style.css". Dans cet article, nous verrons comment rendre le menu de navigation de niveau supérieur non cliquable dans le site Weebly. .

Structure de navigation de niveau supérieur

Avant de continuer, il est nécessaire de comprendre la structure de base du menu de navigation Weebly. Faites un clic droit sur le menu de votre site publié et choisissez l’option « Inspecter » ou « Inspecter l’élément » pour ouvrir la console de développement dans votre navigateur. Lorsque vous déplacez votre souris sur chaque menu de navigation de niveau supérieur, vous pouvez voir les classes CSS correspondantes. Chaque menu de navigation de niveau supérieur est identifié par une classe CSS comme ".wsite-nav-1", ".wsite-nav-2″, .wsite-nav-3″, etc. où 1 étant la page "Hoe" généralement .

Rendre le menu de navigation de niveau supérieur non cliquable dans Weebly

Trouver la classe CSS pour le menu de navigation supérieur de Weebly

Les chiffres peuvent changer en fonction de votre thème et notez la classe CSS du menu de navigation que vous souhaitez rendre non cliquable. Supposons que vous souhaitiez rendre le deuxième menu de navigation non cliquable et que la classe CSS correspondante soit ".wsite-nav-2".

Naviguez maintenant vers l’éditeur de code Weebly sous «Thème > Modifier HTML / CSS > Actifs > main_style.css» et ajoutez le code CSS suivant.

.wsite-nav-2 { pointer-events: none; }

Enregistrez les modifications et publiez votre site pour voir que le deuxième menu de navigation supérieur n’est pas cliquable et que le curseur ne se transformera pas en une main au survol. Si vous souhaitez placer le curseur sur la main mais que le menu ne doit toujours pas être cliquable, modifiez le code ci-dessus comme ci-dessous :

.wsite-nav-2 a:active { pointer-events: none; }

De même, vous pouvez rendre tous les menus de navigation de niveau supérieur non cliquables en ajoutant les classes CSS correspondantes.

Weebly a une structure de navigation différente sur les sites mobiles et cliquer sur le menu du haut affichera à nouveau la liste des éléments du menu, y compris le menu du haut. Cela permet d’ouvrir le lien du menu supérieur s’il a un contenu mais dans notre cas nous devrions supprimer ce lien de la liste. Par conséquent, ajoutez le CSS suivant à votre fichier "main.less":

.wsite-menu-master-item { display: none !important; }

Après avoir ajouté tous les codes CSS, cela peut ressembler à quelque chose comme ci-dessous :

Rendre le menu de navigation de niveau supérieur non cliquable dans Weebly

Modifier le CSS dans Weebly

Enregistrez les modifications et publiez votre site.

Masquer les pages de navigation supérieures des moteurs de recherche et des utilisateurs

  • Cachez les premières pages de navigation des moteurs de recherche, ce qui empêchera les moteurs de recherche d’explorer les pages vides. Vous pouvez le faire en cochant l’option « Masquer cette page des moteurs de recherche » dans les paramètres « Avancés » de chaque page de niveau supérieur.
  • N’oubliez pas que les utilisateurs peuvent toujours accéder aux pages en saisissant directement l’URL dans la barre d’adresse du navigateur. Idéalement, définir des redirections 301 devrait résoudre ce problème, malheureusement Weebly ne permet pas de définir des redirections pour les pages en direct. Par conséquent, vous ne pouvez pas empêcher les utilisateurs d’accéder aux pages via la barre d’adresse.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails