Aggiungi suggerimento di testo a Bootstrap Navbar Pulsante di attivazione su Mobile-View

Alcuni test hanno dimostrato che il pulsante "hamburger" per i menu collassabili su dispositivi mobili è un mistero per gli utenti e vorrei aggiungere la parola "Menu" accanto al mio Bootstrap pulsante del menu come mostrato nella vista mobile.Aggiungi suggerimento di testo a Bootstrap Navbar Pulsante di attivazione su Mobile-View

Per approfondimenti consulta questo articolo: 'L'Hamburger è male per te': http://mor10.com/hamburger-bad/

Ecco il codice di bootstrap base:

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

Quindi, vorrei aggiungere la parola "MENU" accanto all'icona sul cellulare. Ho fatto un mockup di cosa sto parlando, ma non ho una reputazione abbastanza alta su SO per postarlo.

Check it out qui: https://imgur.com/M7hGS7F

FYI questo è un mockup, la pagina attuale Bootstrap non contiene il testo del menu, altrimenti sarei basta guardare alla fonte.

Se si potesse fornire informazioni su come includere sia come (A) semplicemente testo accanto al pulsante & (B) come parte del pulsante in modo che potesse essere cliccato che sarebbe impressionante. Grazie in anticipo per il vostro aiuto con questa soluzione!

fonte

2014-05-19 sinisterOrange

Immagino che sarebbe meglio usare fontawesome.

semplicemente comprendono i riferimenti per fontawesome (vedi http://fortawesome.github.io/Font-Awesome/get-started/) e quindi utilizzare l'icona barre (http://fortawesome.github.io/Font-Awesome/icon/bars/)

Quindi il codice sarà qc. così:

<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"> 
    <!-- Represents navbar collapsed menu on smaller screens --> 
    <span class="sr-only">Toggle navigation</span> 
    <i class="fa fa-bars" aria-hidden="true"></i> Menu 
</button>

Se l'icona Bar dovrebbe essere più grande, è sufficiente aggiungere fa-lg o qualsiasi altra classe che si trova al http://fortawesome.github.io/Font-Awesome/examples/ all'icona

fonte

2014-05-19 19:24:29 nozzleman

questa è una soluzione elegante e sto già utilizzando caratteri impressionante - perfetto. Dovrebbe solo aggiungere un tocco di stile al pulsante. Mi piacerebbe ancora sapere come mettere la parola Menu fuori dal pulsante come opzione. – sinisterOrange

credo che sth. come un pulsante annidato potrebbe essere una soluzione.ma quello non sarebbe quello stile piacevole. il pulsante esterno si collegherebbe da nessuna parte e dovresti rimuovere alcuni stili del pulsante interno (come bordo, ombra, ecc ...) – nozzleman

Bella idea, ora puoi usare anche glyphicon per mostrare le barre. Ho fatto questo - Link – thephpx

Ho avuto lo stesso problema, ma non si sentiva come aggiungendo fontawesome.

Ecco la mia soluzione (HTML e meno):

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

MENO:

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; 
}

ATTENZIONE: I'v testato solo in questo lastest Chrome e IE 11. non hanno nulla altrimenti istituito atm.

fonte

2014-11-11 09:59:06 yacuzo

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 soluzione

.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; 
}

fonte

2015-07-08 21:34:29

sfortunatamente questo rende l'intera navbar 8 pixeůs più alta – gorn

Ho dovuto rimuovere l'altezza della linea e quindi per me andava bene. Grande! –

Un altro solo css:

.navbar-toggle:before { 
    content:"Menu"; 
    left:-50px; 
    top:4px; 
    position:absolute; 
    width:50px; 
}

fonte

2016-03-19 20:45:12 Alvaro

grazie! funziona alla grande. – user46688

grazie, stavo cercando quello –

così facile. grazie! – Mel

Aggiungi suggerimento di testo a Bootstrap Navbar Pulsante di attivazione su Mobile-View

risposta

Problemi correlati