Maison  >  Article  >  interface Web  >  Comment rendre les éléments de la liste de la barre de navigation entièrement cliquables ?

Comment rendre les éléments de la liste de la barre de navigation entièrement cliquables ?

DDD
DDDoriginal
2024-10-30 07:10:03719parcourir

How to Make Navigation Bar List Items Fully Clickable?

Rendre les éléments de la liste de la barre de navigation entièrement cliquables

Dans une barre de navigation horizontale typique créée à l'aide d'une liste non ordonnée, cliquer n'importe où sur un élément de la liste il est fort probable que l'action ne soit déclenchée que si le curseur se trouve dans le texte du lien lui-même. Pour étendre la zone cliquable à l'ensemble de l'élément de liste, modifiez le HTML et le CSS comme suit :

CSS :

<code class="css">#nav li a {
  display: inline-block;
  padding: 25px 10px;
}</code>

En supprimant le remplissage du 'li ' et en l'ajoutant aux balises d'ancrage, la zone cliquable est désormais étendue pour remplir toute la largeur et la hauteur de l'élément de liste.

HTML :

<code class="html"><div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div></code>

Désormais, les utilisateurs peuvent cliquer n'importe où dans les éléments de la liste pour activer les liens correspondants, offrant ainsi une barre de navigation plus conviviale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn