Un des éléments à intégrer était une barre de navigation verticale permettant d’aller aux différentes sections d’un smooth scroll (cf. la page consacrée sur developer.mozilla.org) via des ancrages.
Toutefois, le passage de la souris sur la zone cliquable devait déclencher un effet consistant en un changement de couleur du texte et un trait de chaque coté du texte.
L’effet
Afin de réaliser cet effet, j’ai utilisé des class de Bootstrap ainsi que différentes informations relatives au code HTML et CSS, glanées au fils de mes recherches, que j’ai assemblées afin d’obtenir le résultat voulu. Voici l’effet obtenu sur le template réalisé :
Le chiffre en « gris » devient « blanc » au passage de la souris et un trait apparait de chaque côté du texte. De plus, toute la zone composée du texte et des deux traits est cliquable.
Oui, les couleurs ne sont pas jolies mais elles permettent de repérer les différents éléments dans le code CSS ci-dessous
Le code
Avant tout, il faut, bien sûr, mettre le lien du CDN de Bootstrap dans le<header> de votre page afin de bénéficier de la feuille de style de ce framework, voici la ligne à ajouter :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><body> de la page, il faudra mettre le code HTML à chaque fois que l’on voudra avoir la barre de navigation verticale. Dans mon intégration, je n’ai mis cette barre qu’aux sections 1 et 3 afin de ne pas surcharger la page.
Le HTML
<div class="row">
<div class="verticalNavBar col-4 d-flex flex-column">
<a href="#section1" class="effetNavBar">Texte 1</a>
<a href="#section2" class="effetNavBar">Texte 2</a>
<a href="#section3" class="effetNavBar">Texte 3</a>
<a href="#section4" class="effetNavBar">Texte 4</a>
</div>
</div>row, col-4, d-flex et flex-column renvoient à des class de Boostrap permettant de mettre la barre de navigation verticale et de régler la largeur de celle-ci.
De même, les sections de destination sont indiquées avec un ancrage # et renvoi à une section identifiée grâce à une id placée en début de ladite section, par exemple : <div id="section3"> [contenu de la section] </div>
Le CSS
.verticalNavBar {
/* ici, on va pouvoir mettre des margin ou autre modificateur sur la barre de base si besoin */
}
.verticalNavBar a { /*les élements contenus ci-dessous vont s'appliquer de base */
padding-top: 1rem; /* ajoute du padding au-dessus du texte */
padding-bottom: 1rem; /* ajoute du padding au-dessous du texte */
text-align: center; /* le "center" est important car on va mettre un effet de chaque coté du texte */
color: green; /* couleur de base du texte, oui, c'est moche en vert mais ca se voit bien */
font-size: 1rem; /* mettre la taille que l'on souhaite */
}
.verticalNavBar a:hover { /*les élements contenus dans le "hover" vont s'appliquer au passage de la souris */
background-color: auto; /* le "auto" permet d'avoir un background transparent, essayez "violet" pour voir */
color: orange; /* le texte change de couleur, ici, en orange mais on peut mettre noir si on veut */
transition: all 0.5s ease; /* défini la vitesse de changement de couleur du texte en seconde */
text-decoration: none; /* permet d'enlever le trait de lien sous le texte, supprimez cette ligne pour voir la différence */
}
.effetNavBar:hover {
display: flex; /* passage en flexbox */
align-items: center; /* "center" permet que les traits soient au centre du texte. "flex-end" mettra les traits en bas */
}
.effetNavBar:before,
.effetNavBar:after { /* l'effet va donc s'appliquer "avant" et "après" le texte */
color: red; /* choisir la couleur du trait */
border-top: 0.05em solid; /* choisir le style et l'épaisseur du trait */
content: ""; /* nécessaire pour afficher les traits désirés */
flex: 1; /* permet de partager le reste de la largeur disponible */
margin: 0.5em; /* défini les espaces entre les traits et le texte */
}
Vous pouvez tester en modifiant ou supprimant des valeurs afin de voir l’effet que cela produit.