responsive menu trois bandes ( hamburger )

José · 6 févr.

Bonjour
les lignes du thème sont les suivantes :

    .responsive-menu label:after {
        content: '\2630';
    }

dans certains sites de test en ligne j'ai bien quelquefois les 3 bandes, mais j'ai sur d'autres sites ou même sur des smarthpones c'est le chiffre "2630" qui s'affiche.

dans les deux cas le menu se déroule et s'enroule correctement
Y-a-t- un code à modifier pour avoir un affichage 3 bandes standard?
merci

( mon site est presque terminé )

bazooka07 · 6 févr.

2630 est le code standard du trigrame en UTF-8. Certaines polices de caractères ne le reconnaissent pas.
Tu peux essayer le code 2261 reconnu par davantage de polices.

 .responsive-menu label:after {
        content: '\2261';
}

On peut utiliser la police fontawesome

On peut aussi utiliser l'image svg correspondante :
https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/solid/bars.svg?short_path=bd76899

Certains préfèrent utiliser un hack CSS3 qui permet d'avoir une animation :

José · 6 févr.

Merci , cela me permet encore d'apprendre...
j'ai choisi la facilité et j'ai redessiné trois barres. j'utilise le code:

.responsive-menu label {
background: url(../img/bars.png) no-repeat top right;
    }

Je ne sais pas si c'est une solution correcte, mais cela semble fonctionner

Francis · 6 févr.

Bonjour José,
Tu placer ce caractère "hamburger" directement dans le code HTML, soit en écrivant &#x 2630; (avec un point-virgule à la fin et sans espace après &#x, je l'ai ajouté pour qu'il ne transforme pas ce code numérique en ≡), soit en effectuant un copier-coller de ce caractère ≡

José · 7 févr.

Bonjour Francis

Le copier-coller du tribarre donne le signe = qui s'inscrit bien et qui fonctionne. D'ailleurs j'y avais pensé.

le code suivant
.responsive-menu label { background-color: transparent; color: #333; font-size: 2.6rem; text-align: right; } .responsive-menu label:after { content: '☰'; }
ne fonctionne pas ( test en local ) , il renvoie la suite de caractères. Il me reste la solution de l'image

bazooka07 · 7 févr.

Pour avoir à télécharger un petit fichier d'image en plus, on peut insérer la balise <svg> suivante, directement dans la page ou le modèle php ou html, à l'endroit où doit s'afficher la tri-barre :

<svg xmlns="http://www.w3.org/2000/svg" width="1rem" viewBox="0 0 20 20">
  <path d="M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z" stroke="currentcolor"/>
</svg>

Pour modifier la taille, changer la valeur de l'attribut width.
Pour la couleur, c'est l'attribut stroke. On peut mettre la valeur d'une couleur CSS

bazooka07 · 7 févr.

On peut simplifier la balise <svg> comme ceci :

<svg xmlns="http://www.w3.org/2000/svg" width="10rem" viewBox="0 0 20 20">
    <path d="M3 4h14m0 6h-14m0 6h14" stroke="currentcolor" stroke-width="2" stroke-linecap="round" />
</svg>

Petite explication pour ce dessin vectoriel en SVG :

On dessine dans une boite (viewbox) de 20x20 placée à l'origine 0, 0
path est l'outil pour tracer un chemin
on décrit le parcours dans l'attribut d
M: déplace le crayon levé à la position absolue 3,4 comptée depuis le point de départ (coordonnées en x,y)
h trace un trait horizontal de longueur 14
m déplace le crayon levé d'une distance de 0,6
h trace un trait horizontal de longueur 14 vers la gauche (signe -)
m idem que précèdamment en position relative
h trace un nouveau trait de longueur 14 vers la droite ( pas de signe ou signe +)
stroke précise la couleur du tracé
stroke-width précise la largeur du trait
stroke-linecap définit la forme de l'extrémité du trait. ici arrondi (round)

Les balises <svg> sont parfaitement reconnues par les navigateurs

José · 7 févr.

Je vois qu'il existe plusieurs solutions...
j'aimerais bien utiliser le code avec la balise mais je ne sais pas où le placer

dans le php , j'ai la page du thème header.php

                    <nav class="nav">
                        <div class="responsive-menu">
                            <label for="menu"></label>
                            <input type="checkbox" id="menu">

                            <ul class="menu">
                                <?php $plxShow->staticList($plxShow->getLang(''),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>

                            </ul>
                        </div>
                    </nav>

dans le css j'ai

    .responsive-menu label {
        background-color: transparent;
        color: #333;
        font-size: 2.6rem;
        text-align: right;
    }
    .responsive-menu label:after {
        content: '\2630';
    }

que j'ai remplacé par

.responsive-menu label {
background: url(../img/bars_red.png) no-repeat top right;
    }

où placer le code avec ses balises pour avoir une belle image

Merci

José · 7 févr.

où placer le code avec les balises pour avoir une belle image

bazooka07 · 7 févr.

<nav class="nav">
      <div class="responsive-menu">
            <label for="menu">
                  <svg xmlns="http://www.w3.org/2000/svg" width="10rem" viewBox="0 0 20 20">
                         <path d="M3 4h14m0 6h-14m0 6h14" stroke="currentcolor" stroke-width="2" stroke-linecap="round" />
                   </svg>
             </label>
             <input type="checkbox" id="menu">
             <ul class="menu">
                   <?php $plxShow->staticList('',
                      '<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
             </ul>
      </div>
</nav>

Aucune règle CSS nécessaire

Francis · 7 févr.

@José Le caractère &#x 2630; (sans espace après &#x, et avec le point-virgule à la fin) ou le copier-coller du caractère ≡ doit s'écrire dans le code HTML, pas dans le CSS.
@bazooka07 : Merci pour cette solution intéressante !

José · 7 févr.

Merci à tous les deux, je vais m'initier au dessin vectoriel...
Vos réponses m'ont surtout permis de mieux comprendre le menu-reposnsiv
Pour le moment je laisse l'image png ( je maîtrise mieux )
José

responsive menu trois bandes ( hamburger )

Réponses