Maison > Article > interface Web > Comment concevoir un menu de barre latérale moderne en utilisant HTML et CSS ?
Comment concevoir un menu de barre latérale moderne en utilisant HTML et CSS ?
- PHPzavant
- 2023-08-31 21:53:051402parcourir
Lorsque vous réfléchissez à la mise en page d'un site Web typique, vous inclurez très probablement une liste de liens importants (liens pour la navigation vers différentes sections de la page Web) à droite ou à gauche de la zone de contenu principale.
Ce composant est appelé « barre latérale » et est souvent utilisé comme menu sur les pages Web. Bien qu'il soit largement utilisé, les développeurs ajoutent souvent cet élément aux sites Web pour naviguer entre les pages ou même vers différentes parties d'une page Web.
Comprenons cette fonctionnalité et essayons de créer une barre latérale moderne en utilisant uniquement HTML et CSS.
Qu'est-ce qu'un menu latéral ?
Une barre latérale est une colonne statique située à droite ou à gauche de la zone de contenu principale. Ce composant contient des liens de navigation, des widgets ou d'autres liens nécessaires au sein du site Web (pour la page d'accueil, le contenu ou d'autres parties).
Vous trouverez ci-dessous un exemple montrant comment créer un menu simple dans la barre latérale. Le menu est situé à gauche de la zone de contenu principale (la même présentation que la plupart des sites Web).
Exemple
Dans cet exemple, nous utilisons CSS Grid pour diviser la page Web en deux parties. 15 % d'une page Web constitue le menu de la barre latérale et 85 % constitue le contenu principal.
Grille CSS
En définissant display:grid, il permet aux développeurs de convertir n'importe quel élément en un conteneur de grille. Pour ajouter des colonnes que nous utilisons,
grid-template-columns: value value;
value représente la largeur de la colonne. Elle peut être exprimée en longueur (px, cm, em) ou en pourcentage.
tag (élément d'ancrage)
Il est utilisé pour lier des pages externes au sein d’une page Web. Il peut également être utilisé pour lier des sections au sein d’un document. L'attribut id définit l'élément de manière unique.
<a href= "#"> </a>L'attribut
href contient l'url d'une page externe ou l'identifiant d'une partie interne du document.
<!DOCTYPE html>
<html>
<head>
<title> Sidebar menu </title>
<style>
#main-doc {
display: grid;
grid-template-columns: 15% 85%;
grid-template-rows: auto;
grid-template-areas: "advert content";
}
.item1 {
padding: 10px;
}
#head {
font-family: serif !important;
color: #8b0000 !important;
font-weight: 900;
margin: 5px;
padding: 0 5px 5px;
}
.main-section {
font-family: Brush Script MT;
font-size: 20px;
color: #000080;
}
.item2 {
background: linear-gradient(-35deg, #fff000, #ffb6c1, #afeeee);
padding: 6px 8px 6px 16px;
margin: 0
}
.contents {
font-size: 26px !important;
color: grey;
}
.item1 a {
border-radius: 5px;
padding: 6px 16px 6px 16px;
display: block;
}
a:hover {
color: red;
transform: scale(1.1);
}
</style>
</head>
<body>
<main id="main-doc">
<div class="item1">
<nav id="navbar">
<header class="contents">
<strong> Contents </strong>
</header>
<br>
<a href="https://www.php.cn/link/115c51eb37365df2d4f4e2482b964822" class="nav-link"> Background </a>
<br>
<hr>
<a href="#romance" class="nav-link"> Romance </a>
<br>
<hr>
<a href="#relations" class="nav-link"> Relations </a>
<br>
<hr>
<a href="#voice_actors" class="nav-link"> Voice Actors </a>
<br>
<hr>
<a href="#costumes" class="nav-link"> Costumes </a>
<br>
<hr>
<a href="#gallery" class="nav-link"> Gallery </a>
<br>
<hr>
</nav>
</div>
<div class="item2">
<header id="head">
<h1> Animation Character </h1>
</header>
<section class="main-section" id="background">
<header>
<h1> Background </h1>
</header>
<hr>
<p> This is placeholder text. This paragraph contains information about the background of the character. </p>
</section>
<section class="main-section" id="romance">
<header>
<h1> Romance <h1>
<hr>
</header>
<p> This paragraph contains text related to the life of the character. </p>
</section>
<section class="main-section" id="relations">
<header>
<h1> Relations </h1>
</header>
<hr>
<ul>
<li> Mother <br>
<p> Text about character's mother </p>
<li> Father <br>
<p> Information about the father. </p>
<li> Sister <br>
<p> Text about character's sister </p>
<li> Friend <br>
<p> Text about friend </p>
</ul>
</section>
<section class="main-section" id="voice_actors">
<header>
<h1> Voice actors
<hr>
</h1>
</header>
<p> This contains information about voice actors in the animation </p>
</section>
<section class="main-section" id="costumes">
<header>
<h1> Costumes
<hr>
</h1>
</header>
<br>
<br>
</section>
</body>
</html>
Exemple
Ici, nous allons créer une barre latérale basculable. Dans cet exemple, nous créons une barre latérale et la positionnons à gauche de la zone de contenu. Nous avons un bouton dans la zone de contenu qui, lorsque vous cliquez dessus, réduit la barre latérale que nous avons créée.
Nous avons utilisé la Propriété de transition CSS pour modifier en douceur la position de la barre latérale. Lorsque vous cliquez sur le bouton, la position de la barre latérale passe de 0 à -160px (égale à la largeur de la barre latérale). En d'autres termes, la barre latérale se déplace vers la gauche de sa largeur.
<!DOCTYPE html>
<html>
<head>
<title> Toggle Sidebar </title>
<style>
body {
margin: 0;
}
.container {
display: flex;
min-height: 90px;
}
.sidebar {
position: relative;
left: 0;
margin-right: 20px;
width: 160px;
background-color: #ccc;
transition: all 0.20s;
}
.sidebar.collapsed {
left: -160px;
margin-right: -150px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar" id="sidebar">
<strong> Sidebar menu </strong>
<ul>
<a href="#" class="nav-link">
<li> Link 1 </li>
</a>
<a href="#" class="nav-link">
<li> Link 2 </li>
</a>
<a href="#" class="nav-link">
<li> Link 3 </li>
</a>
<a href="#" class="nav-link">
<li> Link 4 </li>
</a>
</ul>
</div>
<div class="content">
<h2> This is an example. This contains the main content area. </h2>
<br> Click the button below to toggle the sidebar <br>
<br>
<button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')"> toggle Sidebar </button>
</div>
</div>
</body>
</html>
Conclusion
Dans cet article, nous avons discuté de deux types de menus de barre latérale dans les pages Web. L’un d’eux est la barre latérale de base et l’autre est la barre latérale à bascule. Ils sont tous conçus en utilisant uniquement HTML et CSS.
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!