Sam's

Créations (d)rôlistes

Afficher un menu en CSS uniquement

Aimant tout faire à la main, j'ai profité de mon envie de blog pour monter ce thème à la main, je pense d'ailleurs voir pour faire le système de blog tout entier, pour le plaisir. M'enfin, first things first, j'ai donc crée ce thème sobrement appellé flexml. Celui-ci est amplement perfectible, n'hésitez d'ailleurs pas à me proposer des améliorations. Il est aussi, tant que possible, dépourvu de Javascript, la seule présence de ce langage étant là pour permettre de répondre à un commentaire.

Cette envie / lubie / folie m'a tout de même apporté quelques difficultés pour gérer les vues responsive du site, nottament les vues mobiles et tablettes. En effet, le menu des pages statiques, catégories et lien sociaux prenait beaucoup trop de place, au moins un tiers de l'écran. J'ai donc dû trouver une méthode me permettant de l'afficher et le masquer facilement en CSS.

Celle-ci est illustrée ci-dessous et tient à l'utilisation d'une checkbox cachée de façon permanente parce qu'elle est moche, quand même, et d'un label. En HTML, cliquer sur un label active l'élément associé, dans le cas d'une checkbox, il la coche. Il suffit donc de masquer le contenu conditionnel et de l'afficher quand la case est cochée. Vous trouverez ci-dessous l'exemple le plus simple qui consiste en trois lignes de CSS.

Attention, pour fonctionner, il faut que le menu soit dans un élément voisin de la checkbox!

HTML :

<div>
 <input id="button" name="button" type="checkbox" />
 <div class="main_menu">
  <label for="button">&equiv;</label>
 </div>
 <ul class="sub_menu">
  <li>Menu entry 1</li>
  <li>Menu entry 2</li>
  <li>Menu entry 3</li>
 </ul>
</div>

CSS :

#button { display: none; }
.sub_menu { display: none; }
#button:checked ~ .sub_menu { display: block;}

Une excellente semaine les loutres !


 Image de couverture par Boskampi

Écrire un commentaire

Vérification anti-spam

Quelle est la troisième lettre du mot nvptyv ?