responsive menu trois bandes ( hamburger )

JoséJosé Member

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é )

Réponses

  • 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éJosé Member

    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

  • FrancisFrancis Member

    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éJosé Member

    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

  • 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

  • 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éJosé Member

    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éJosé Member

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

  • <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

  • FrancisFrancis Member

    @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éJosé Member

    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é

Connectez-vous ou Inscrivez-vous pour répondre.