Ajouter du Texte Soupçon de Bootstrap barre de navigation Bouton Bascule sur Mobile-Vue

Certains tests ont montré que le "hamburger" bouton pour rétractables menus sur les appareils mobiles sont des mystères pour les utilisateurs et je tiens à ajouter le mot "Menu" à côté de mon Bootstrap bouton de menu comme on le voit dans le mobile-vue.

Pour en savoir plus lisez cet article: "Le Hamburger est Mauvais pour Vous": http://mor10.com/hamburger-bad/

Ici est la base de Code d'Amorçage:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <!-- Represents navbar collapsed menu on smaller screens -->
  <span class="sr-only">Toggle navigation</span>
    <!-- 3 horizontal lines on small screen nav button -->
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Donc, je tiens à ajouter le mot "MENU" à côté de l'icône sur mobile. J'ai fait une maquette de ce que je parle, mais je n'ai pas une assez grande réputation, de SORTE à le poster.

Découvrez-le ici: https://imgur.com/M7hGS7F

Pour info c'est une maquette, le Bootstrap page ne contient pas le texte de MENU, ou d'autre que je venais de regarder le source.

Si vous pouvez fournir des informations sur la manière d'inclure est que (A) il suffit de texte à côté du bouton & (B) dans le cadre de la touche de sorte qu'il pourrait être cliqué, ce serait génial. Merci d'avance pour votre aide avec cette solution!

OriginalL'auteur sinisterOrange | 2014-05-19

7

Je suppose que ce serait la meilleure à utiliser fontawesome.

il suffit d'inclure les références à fontawesome (voir http://fortawesome.github.io/Font-Awesome/get-started/), puis utiliser les barres de l'icône (http://fortawesome.github.io/Font-Awesome/icon/bars/)

De sorte que votre code ressemblerait à qqch. comme ça:
```
<head>
   [...]
   <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   [...]
</head>
<body>

[...]

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    
    <span class="sr-only">Toggle navigation</span>
    <i class="fa fa-bars" aria-hidden="true"></i> Menu
</button>
```
Si les Barres de l'icône devrait être plus grand, il suffit d'ajouter fa-lg ou de toute autre classe qui peut être trouvé à http://fortawesome.github.io/Font-Awesome/examples/ à l'icône

c'est une solution élégante et je suis déjà à l'aide de la Police Génial - parfait. Voudrais juste besoin d'ajouter un peu de style sur le bouton. Je voudrais encore savoir comment mettre le Menu de word à l'extérieur du bouton comme une option.
je guesss sth. comme un imbriquée bouton pourrait être une solution. mais ce ne serait pas joli style. l'extérieur bouton lien vers nulle part, et vous devez supprimer certains styles de l'intérieur de la touche (comme la frontière de l'ombre, etc...)
Belle idée, vous pouvez également utiliser la glyphicon pour afficher les barres. Je l'ai fait - <i class="glyphicon glyphicon-align-justify"></i> Liens

OriginalL'auteur nozzleman
11

Un autre juste en css solution:
```
.navbar-toggle:before {
    content:"Menu";
    left:-50px;
    top:4px;
    position:absolute;
    width:50px;
}
```
merci! fonctionne très bien.
merci , j'ai été à la recherche pour que
si facile. merci!!!!

OriginalL'auteur Alvaro

HTML

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Menu</span>
    <div class="button-bars">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
</button>

CSS

.navbar-toggle .button-label {
    display: inline-block;
    float: left;
    font-weight: bold;
    line-height: 14px;
    padding-right: 10px;
}
.button-bars {
    display: inline-block;
    float: left;
}

malheureusement, cela rend l'ensemble de la barre de navigation de 8 pixeůs plus
J'ai dû enlever la hauteur de la ligne et ensuite, c'était bien pour moi. Super!

OriginalL'auteur Mohammad Dayeh

J'ai eu le même problème, mais je n'ai pas envie de l'ajout de fontawesome.

Voici ma solution (HTML et MOINS):

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Meny</span>
    <div class="button-hamburger">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </div>
</button>

MOINS:

button {

    .button-label {
        display: table-cell;
        vertical-align: middle;
        font-weight: 700;
        padding-right: 3px;
    }

    .button-hamburger {
        display: table-cell;
        padding: 8px;
        border: 1px solid #333;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        .icon-bar {
            background: #333;
        }
    }
}
.navbar-toggle {
    border: none;
    padding: 0;
}

AVERTISSEMENT: je v testé uniquement cette dernière Chrome et IE 11. Je n'ai rien d'autre mis en place un guichet automatique.

OriginalL'auteur yacuzo

Vous devez vous connecter pour publier un commentaire.