À mesure que les sites Web deviennent plus complexes, les barres de navigation deviennent de plus en plus importantes. Le menu secondaire est une conception de barre de navigation courante qui peut offrir aux utilisateurs plus de choix et augmenter la convivialité et l'adaptabilité du site Web. Par conséquent, lors du processus de création d’un site Web, il est essentiel de mettre en place un menu secondaire simple et facile à utiliser. Dans cet article, nous apprendrons comment implémenter un menu secondaire en utilisant CSS.
Tout d'abord, nous devons mettre en place la structure de la barre de navigation en HTML, ce qui est très important pour l'implémentation du CSS.
La structure HTML d'une barre de navigation simple est la suivante :
<nav> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Services ▼</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
Cette structure contient un élément nav
et un élément ul
. L'élément nav
enveloppe la barre de navigation complète, tandis que l'élément ul
contient chaque lien individuel dans la barre de navigation, ainsi que les liens contenant des menus secondaires. nav
元素和一个ul
元素。nav
元素包裹着完整的导航栏,而ul
元素包含着导航栏的每个单独的链接,以及包含二级菜单的链接。
注意到第二个li
元素包含一个ul
元素,这个元素就是二级菜单的容器。我们将在下面的步骤中为这个容器添加样式。
接下来,我们需要为这个导航栏设置CSS样式,以实现二级菜单。在下面的代码中,我们将首先去掉默认样式,并给所有链接设置以下样式:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { position: relative; } nav a { display: block; padding: 0.5em; color: #000; text-decoration: none; font-size: 1.2em; } nav ul ul { position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; background-color: #fff; } nav ul ul li { float: none; width: 100%; } nav li:hover > ul { opacity: 1; visibility: visible; } nav ul ul li:hover > ul { opacity: 1; visibility: visible; } nav ul ul ul { top: 0; left: 100%; }
这一块代码包含了以下几个部分:
li
元素设置position: relative;
,以便相对于它的子元素定位。这意味着我们可以通过子元素来实现其定位。ul
元素来包含,我们为这些ul
元素设置了一些基本的样式,例如定位以及不可见。li
li
contient un élément ul
, qui est le conteneur du menu secondaire. Nous ajouterons des styles à ce conteneur dans les prochaines étapes. <nav> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Services ▼</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
position: relative;
pour tous les éléments li
afin qu'ils soient positionnés par rapport à ses éléments enfants. Cela signifie que nous pouvons le positionner via des éléments enfants. Chaque menu secondaire est contenu par un élément ul
distinct. Nous définissons certains styles de base pour ces éléments ul
, tels que le positionnement et l'invisibilité. 🎜🎜Enfin, nous avons ajouté l'effet de survol de la souris. Lorsque la souris survole un élément li
, nous changeons la visibilité de ses éléments enfants en visible. Lorsque la souris survole le menu secondaire, nous changeons la visibilité de lui-même et de ses éléments enfants en visible. Autrement dit, chaque fois que la souris survole la barre de navigation, tous les menus secondaires seront présentés dans l'état affiché. 🎜🎜🎜🎜Exemple de code complet🎜🎜🎜Enfin, notre code HTML et CSS complet ressemblera à ceci : 🎜nav ul { margin: 0; padding: 0; list-style: none; } nav li { position: relative; } nav a { display: block; padding: 0.5em; color: #000; text-decoration: none; font-size: 1.2em; } nav ul ul { position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; background-color: #fff; } nav ul ul li { float: none; width: 100%; } nav li:hover > ul { opacity: 1; visibility: visible; } nav ul ul li:hover > ul { opacity: 1; visibility: visible; } nav ul ul ul { top: 0; left: 100%; }
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!