Comment masquer la barre de navigation en utilisant CSS

Comme nous le savons tous, la barre de navigation est une partie très importante du site Web. Il peut aider les utilisateurs à mieux naviguer dans le contenu du site Web et à offrir une expérience de fonctionnement conviviale. Cependant, dans certains cas particuliers, nous devons parfois masquer la barre de navigation pour rendre la page Web plus simple et plus belle. Cet article explique comment utiliser CSS pour masquer la barre de navigation.

1. Attribut d'affichage CSS

L'attribut d'affichage de CSS est utilisé pour spécifier comment les éléments sont affichés dans le document. Parmi eux, display:none; peut masquer complètement l'élément et n'occuper aucun espace dans le flux de documents, comme indiqué ci-dessous :

nav {
  display: none;
}

L'application du code CSS ci-dessus à un élément de la barre de navigation fera disparaître complètement la barre de navigation. par l'élément. Cependant, cette méthode présente un inconvénient important, c'est-à-dire qu'une fois que nous masquons l'élément de la barre de navigation à l'aide de cette méthode, nous ne pouvons pas restaurer l'affichage de cet élément. Par conséquent, cette méthode n’est pas très adaptée dans certaines situations où un contrôle dynamique de l’affichage des éléments est requis.

2. Propriété de visibilité CSS

La propriété de visibilité du CSS est utilisée pour spécifier la visibilité des éléments dans le document. Parmi eux, visibilité:hidden; peut masquer l'élément dans le document, mais l'élément occupera toujours de l'espace dans le flux du document, comme indiqué ci-dessous :

nav {
  visibility: hidden;
}

L'utilisation de l'attribut de visibilité pour masquer l'élément de la barre de navigation peut conserver l'espace occupé par l'élément, qui est requis Très utile dans les scénarios où les éléments de la barre de navigation sont réaffichés. Cependant, les éléments masqués ne disparaîtront plus, ce qui pourrait affecter la mise en page de la page web.

3. Utiliser les attributs de positionnement CSS

Si nous voulons masquer l'élément de la barre de navigation, mais que nous ne voulons pas affecter la mise en page de la page Web, nous pouvons utiliser les attributs de positionnement CSS pour y parvenir. La méthode spécifique consiste à définir d'abord la hauteur de l'élément de la barre de navigation sur 0, puis à utiliser le positionnement absolu pour positionner la barre de navigation en haut de l'écran, comme indiqué ci-dessous :

nav {
  height: 0;
  position: absolute;
  top: 0;
}

De cette façon, l'élément de la barre de navigation sera être masqué et n’affectera pas les autres éléments. La position de l’élément dans le flux de documents. Il est à noter que cette méthode convient aux situations où la hauteur de la barre de navigation est connue. Si la hauteur de la barre de navigation est incertaine, vous devrez peut-être utiliser JavaScript pour obtenir la hauteur de la barre de navigation.

4. Utiliser les propriétés CSS3

En CSS3, nous pouvons également utiliser certaines propriétés pour contrôler de manière plus flexible l'affichage ou le masquage des éléments. Les deux propriétés les plus couramment utilisées sont l'opacité et la transformation.

• Attribut opacité

L'attribut opacité est utilisé pour spécifier l'opacité d'un élément. Sa valeur par défaut est 1, ce qui signifie complètement opaque. Lorsque nous définissons l'opacité d'un élément sur 0, l'élément disparaîtra complètement, mais prendra toujours de la place dans le flux de documents, comme indiqué ci-dessous :

nav {
  opacity: 0;
}

• attribut transform

L'attribut transform est utilisé pour spécifier la transformation effet de l'élément, les deux effets de déformation les plus couramment utilisés sont l'échelle et la translation. Lorsque nous mettons à l'échelle(0) ou traduisons(-100%) un élément, l'élément disparaît complètement, mais prend toujours de la place dans le flux du document, comme indiqué ci-dessous :

nav {
  transform: scale(0);
  // 或
  transform: translate(-100%);
}

De cette façon, nous pouvons profiter des propriétés CSS3 pour contrôler l'affichage et le masquage des éléments de manière plus flexible.

Pour résumer, nous pouvons utiliser quelques propriétés CSS simples pour masquer l'élément de la barre de navigation. La méthode la plus courante consiste à utiliser les propriétés de positionnement CSS pour positionner la barre de navigation en haut de l'écran. Bien entendu, si nous avons besoin de contrôler l'affichage ou le masquage d'éléments dans une scène dynamique, nous pouvons choisir d'utiliser des propriétés CSS3 telles que l'opacité ou la transformation pour y parvenir.

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!