Je vous ai déjà fait un petit tutoriel pour créer des notes de bas de page (footnotes en anglais) juste en utilisant CSS.
Voici maintenant une autre manière de créer vos notes de bas de page, en HTML sémantique, CSS et vanilla JavaScript.
Des notes de bas de page sémantiques
Pour commencer, nous allons utiliser les balises HTML details et summary, qui sont trop peu souvent utilisées. Elles sont pourtant idéales pour ce que nous souhaitons accomplir: montrer un contenu après un clic, mais qui doit rester caché le reste du temps.
Le gros avantage de cette nouvelle version d’inclure des liens et du HTML dans la note de bas de page, ce qui n’était pas possible avec la version en CSS pur.
Un clic sur le numéro de la note ouvre la note. Il suffit de cliquer sur l’encart jaune de la note pour la fermer, ou alors cliquer sur un autre numéro de note.
Exemple de notes de bas de page
1
2
3
Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais() Institut Universitaire de Formation des Maîtres (IUFM). Mémoire: Créer et soutenir la motivation des élèves
Code HTML
Voici notre code HTML de base:
<div class="fake-p">
Le dernier serveur de SkyMinds s'appelle Apollo<details>
<summary>1</summary>
<div class="details-content">Il a été mis en service le 1er octobre 2023.</div>
</details> et tourne sous Ubuntu Server.
</div>
<div class="fake-p">
Il est facile de changer le MOTD<details>
<summary>2</summary>
<div class="details-content">Cela est même recommandé car cela permet d'identifier le serveur rapidement et de ne pas se tromper de terminal lorsque l'on entre une commande.</div>
</details> et apporter de nouvelles informations aux utilisateurs SSH.
</div>
<div class="fake-p">
Mon mémoire professionnel a été publié récemment <details>
<summary>3</summary>
<div class="details-content"><span itemscope="" itemtype="http://schema.org/ScholarlyArticle"><span itemprop="citation"><span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Biscay</span><span>, </span><span itemprop="givenName">Matt</span></span></span> <q><cite itemprop="headline">Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais</cite></q> <span>(</span><time itemprop="datePublished" datetime="2006">2006</time><span>)</span> <span itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization"><span itemprop="name">Institut Universitaire de Formation des Maîtres (IUFM)</span></span><span>.</span> Mémoire: <a itemprop="url" href="https://www.skyminds.net/creer-soutenir-motivation-des-eleves/">Créer et soutenir la motivation des élèves</a></span></span></div>
</details>, ce que j'aurai dû faire bien plus tôt.
</div>Code language: HTML, XML (xml)Code CSS
Voici le code CSS qui permet de créer le numéro des footnotes ainsi que le style (encart jaune avec un effet d’ombre en bas au centre de la page):
<style>
details,
summary {
display: inline;
vertical-align: super;
font-size: 0.75rem;
padding: 0 0.25rem;
}
summary {
cursor: pointer;
background:yellow
}
.details-content {
position: fixed;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
max-width: 90%;
padding: 1rem;
font-size: 1rem;
background: lightyellow;
box-shadow: 0 0 100px black;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
z-index:10;
}
/* Details don't like being inside a p */
.fake-p {
margin: 0 0 1rem 0;
}
body {
font: 100%/1.4 system-ui;
margin: 0;
padding: 2rem 2rem 20rem 2rem;
}
</style>Code language: HTML, XML (xml)Code Vanilla JavaScript
Et voici enfin notre code vanilla JS qui permet d’ouvrir la bonne note de fin de page lorsque l’on clique sur le numéro de note associé:
<script>
document.querySelectorAll("details").forEach((targetDetail, i, allDetails) => {
targetDetail.onclick = () => { ...allDetails].forEach(detail => detail.removeAttribute("open")); }
});
</script>Code language: HTML, XML (xml)Vous pouvez refermer la note qui est ouverte en recliquant dessus, elle se fermera automatiquement.
Conclusion
Et voilà, simple et efficace, avec un chargement de ressources complètement minimal. Il suffit de cliquer sur la note de bas de page pour la fermer.
Recherchez-vous un expert WordPress ou WooCommerce sur qui vous pouvez compter? Ne cherchez plus.
