Challenge : css minimal pour afficher icône Menu à 3 bandes

Bonjour,

Je cherche à réduire au maximum le css affichant l'icône menu à trois bandes horizontales qu'on voit un peu partout.

On suppose que la balise ciblée est <a>.

Il suffit que ça fonctionne avec les principaux navigateurs.

Pour l'instant, j'en suis là :

a
{
	display: block;
	height: 2em;
	width: 2em;
	background-image:
		repeating-linear-gradient(#000, #000 25%, #0000 25%, #0000 37.5%);
}

Quelqu'un a-t-il plus court ?

Amicalement,

C'est nettement plus court que ce que j'ai fait!

Bonjour,

Et tu as fait comment ? Ça peut donner des idées nouvelles !

Amicalement,

Bonjour,

Pour faire un menu "handburger", il y a le code ASCII &#9776;, mais il faudra toujours du css pour définir son emplacement, sa taille, son comportement. Parles-tu du css minimum pour faire le menu ou pour l'ensemble ?

<li><a href="#">&#9776;&nbsp;Menu</a>

Ce code est minimal, je montre juste le html "&#9776;" qui permet d'afficher les trois barres en question. Tu dois ajouter du css, un font-size pour la taille et aussi un background si tu veux que ce menu soit entouré. On peut aussi ajouter le mot "Menu" à côté des trois barres horizontales, mais tu peux faire sans, juste avec les trois barres.

J'en profite pour prévenir le modérateur que les liens proposés par Cerano44 (sans doute à son corps défendant), arrivent sur une page dont le contenu n'a plus rien à voir avec un menu

parsimonhi a écrit :

Et tu as fait comment ? Ça peut donner des idées nouvelles !

Non, je ne pense pas.
A titre purement documentaire, voici le "hamburger en CSS" que j'utilise dans le menu de pagination du site osirisnet.net pour les longs articles répartis sur plusieurs pages:

#topPagination button,
#bottomPagination button {
	position:absolute;
	top:50%;
	left:0.75em;
	transform:translateY(-50%);
	z-index:1010;
	height:12px;
	width:16px;
	border-top:2px solid #990000;
	border-bottom:2px solid #990000;
	border-left:none;
	border-right:none;
	content:" ";
}

Je crois que c'est un des membres de ce forum qui m'a donné la piste, on devrait pouvoir retrouver ça dans le forum. C'est long, c'est lourd, et ce n'est même pas "fully responsive" (taille en px).

Bongota a écrit :
Pour faire un menu "handburger", il y a le code ASCII &amp;#9776;

J'ai essayé, ça ne marche pas correctement sur certains navigateurs, j'ai laissé tomber cette piste.

Bonjour,

Bongota a écrit :
Pour faire un menu "handburger", il y a le code ASCII &#9776;, mais il faudra toujours du css pour définir son emplacement, sa taille, son comportement. Parles-tu du css minimum pour faire le menu ou pour l'ensemble ?

Je parle d'un code minimal global (html+css) en nombre d'octets tout compris (seuls les espaces et les retours à la ligne qui peuvent être minimiser facilement ne comptent pas). Si tous les sites affichant cette icône le faisaient avec une version minimale, on diminuerait sans doute la consommation énergétique mondiale de l'équivalent de plusieurs centaines de milliers d'euros par an.

J'avais aussi envisagé les solutions avec ? (&#9776;) ou ? (&#8801;) qui sont effectivement les plus courtes si par ailleurs le surcoût dans le code css pour styler le lien est nul ou très réduit (cas où le style des autres liens peut aussi s'appliquer à ce lien particulier).

Si le css spécifique à ajouter est nul, la solution tient en 1 caractère en tout ce qui est évidemment imbattable (bravo Bongota ! ). Mais en pratique, c'est rarement le cas que le css spécifique nécessaire soit nul.

PapyJP a écrit :
J'ai essayé, ça ne marche pas correctement sur certains navigateurs, j'ai laissé tomber cette piste.

? (&#9776;) n'est pas toujours présent dans les polices de caractères des machines des utilisateurs. Là encore, c'est juste une question de css utilisé par ailleurs. On peut toujours charger une police ou une partie de police pouvant afficher ce caractère pour régler ce problème : ça peut coûter cher ou pas. Certains disent que ? (&#8801;) est plus largement supporté (mais je n'ai pas vérifié moi-même).

EDIT: on voit d'ailleurs là toute la limite de l'utilisation de ces caractères. Alors que lors de l'édition de ma réponse, ces caractères s'affichaient bien dans ma fenêtre, une fois postés sur le forum Alsacreations, ils se retrouvent remplacés par des points d'interrogations !!!

Amicalement,
Modifié par parsimonhi (08 Jan 2019 - 11:24)

Bonjour,

PapyJP a écrit :

Non, je ne pense pas.
A titre purement documentaire, voici le "hamburger en CSS" que j'utilise dans le menu de pagination du site osirisnet.net pour les longs articles répartis sur plusieurs pages:

#topPagination button,
#bottomPagination button {
	position:absolute;
	top:50%;
	left:0.75em;
	transform:translateY(-50%);
	z-index:1010;
	height:12px;
	width:16px;
	border-top:2px solid #990000;
	border-bottom:2px solid #990000;
	border-left:none;
	border-right:none;
	content:" ";
}

Je crois que c'est un des membres de ce forum qui m'a donné la piste, on devrait pouvoir retrouver ça dans le forum. C'est long, c'est lourd, et ce n'est même pas "fully responsive" (taille en px).

Ça donne quand même des idées. En particulier s'il faut supporter des navigateurs qui ont du mal avec la propriété repeating-linear-gradient.

Amicalement,

Compatible IE6, simple, efficace, court, compréhensible, accessible, sans CSS:

<a href="#menu">Menu</a>

Bonjour,

kustolovic a écrit :
Compatible IE6, simple, efficace, court, compréhensible, accessible, sans CSS:

<a href="#menu">Menu</a>

C'est malin, ça, tiens !

Amicalement,

parsimonhi a écrit :
Quelqu'un a-t-il plus court ?

Admirez la concision du mien (il me faut un input et un label avec un span dedans, lien) :

.main-nav input {
  position: absolute;
  top: -9999rem;
}
@media (max-width: 65.01rem) {
  .main-nav label {
    position: absolute;
    z-index: 1000;
    top: 0.3em;
    right: 1em;
    width: 1.8em;
    height: 1.8em;
  }
  .main-nav label span,
  .main-nav label span::before,
  .main-nav label span::after {
    position: relative;
    top: 0.8em;
    display: block;
    width: 1.8em;
    height: 3px;
    background-color: #aaa;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .main-nav label span::before,
  .main-nav label span::after {
    content: '';
    position: absolute;
  }
  .main-nav label span::before {
    top: -8px;
  }
  .main-nav label span::after {
    top: 8px;
  }
  .main-nav :checked + label span {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .main-nav :checked + label span::before,
  .main-nav :checked + label span::after {
    top: 0;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .no-touch .main-nav :not(:checked) + label:hover span {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .no-touch .main-nav :not(:checked) + label:hover span::before,
  .no-touch .main-nav :not(:checked) + label:hover span::after {
    top: 0;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .no-touch .main-nav :checked + label:hover span {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  .no-touch .main-nav :checked + label:hover span::before,
  .no-touch .main-nav :checked + label:hover span::after {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

Pour le coup ça rejoint l'autre topic sur lequel JENCAL se pose la question de la pertinence de javascript, car ce menu dans son ensemble n'en comporte aucun.

En effet, je ne suis pas "jusqueboutiste du css" mais ce type de menu est bien pratique lorsqu'une partie du chargement de la page a échoué (pour réseau faiblard la plupart du temps) : quoi qu'il arrive, il fonctionne.
Modifié par Olivier C (09 Jan 2019 - 19:41)