Hide and Show Elements without JavaScript but HTML and mini.css

By

I recently opened a new github repo to make a website for txml the fastest xml parser. I want to make the page using 11ty. Today I have been looking for a css framework, that is small and does not need any compilation. With mini.css there is a css framework, without any js that has some cool features.

It can easily change the direction of a table, simply by adding the class horizontal to the table. But a feature that has really surprized me was the so called drawer an aria that can slide in and out, when the user click a button. Usually that is simple made using javascript and toggling a class. But mini.css is using a different approach.

The area, that should slide in and out, need to be next to an input checkbox. Then there are css rules, to target the input and its attribute checked and its next element. The next element is supposed to be the area you want to slide in and out. Using label tags and the for attribute, you can click on elements other than the checkbox and sill toggle the checkbox and with that hide and show a navigation or other container.

here is how to use it:

First you need to add mini.css to you websites header:

1
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">

This is hosted on a cdn, I personally would download it and serve it from the apps webserver.
Then in your page, the drawer is used like this:

1
2
3
4
5
6
7
<label for="open_menue" class="drawer-toggle persistent"></label>

<input type="checkbox" id="open_menue" class="drawer persistent">
<div>
  <label for="open_menue" class="drawer-close"></label>
  <a href="#">Home</a>
</div>

And this makes a menu button like the following, feel free to click it.


Home

Is that interesting, it does not involve any javascript. Any I am only thinking what else could be done using this technique. Maybe a tab view using a hidden slider (range)?

back to developer log