Dodaj wskazówkę tekstową do przycisku paska nawigacyjnego Bootstrap Przełącznik na widok z urządzenia mobilnego

Niektóre testy wykazały, że przycisk "hamburger" dla zwijanych menu na urządzeniach mobilnych jest tajemnicą dla użytkowników i chciałbym dodać słowo "Menu" obok mojego Bootstrapa przycisk menu widoczny w widoku mobilnym.Dodaj wskazówkę tekstową do przycisku paska nawigacyjnego Bootstrap Przełącznik na widok z urządzenia mobilnego

Dla dalszego czytania sprawdzić ten artykuł: „Hamburger jest dla Ciebie”: http://mor10.com/hamburger-bad/

Oto podstawowy kod bootstrap:

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

Tak, chciałabym dodać słowo "MENU" obok ikony na urządzeniu mobilnym. Zrobiłem makietę o tym, o czym mówię, ale nie mam wystarczająco wysokiej reputacji, aby ją opublikować.

Sprawdź to tutaj: https://imgur.com/M7hGS7F

FYI jest to makieta, rzeczywista strona Bootstrap nie zawiera tekst MENU albo ja po prostu spojrzeć na źródła.

Jeśli można dostarczyć informacji o tym, jak to jest jako (A) po prostu tekst obok przycisku & (B) jako część przycisku, więc może to być kliknięcie, że byłoby super. Z góry dziękuję za pomoc w rozwiązaniu!

Źródło

2014-05-19 sinisterOrange

Domyślam się, że najlepiej byłoby używać fontawesome.

po prostu zawierać odniesień do fontawesome (patrz http://fortawesome.github.io/Font-Awesome/get-started/), a następnie użyć ikony barów (http://fortawesome.github.io/Font-Awesome/icon/bars/)

Tak Twój kod będzie wyglądać czegoś. tak:

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

Jeśli ikona Bary powinien być większy, po prostu dodaj fa-lg lub jakiejkolwiek innej klasy, który można znaleźć na http://fortawesome.github.io/Font-Awesome/examples/ ikony

Źródło

2014-05-19 19:24:29 nozzleman

to eleganckie rozwiązanie i już używam czcionki Niesamowite - idealny. Wystarczy dodać trochę stylizacji do przycisku. Nadal chciałbym wiedzieć, jak ustawić słowo Menu poza przyciskiem jako opcją. – sinisterOrange

Zgaduję, że coś. podobnie jak zagnieżdżony przycisk może być rozwiązaniem.ale to nie byłby taki ładny styl. zewnętrzny przycisk łączyłby się z nikim, a musielibyśmy usunąć niektóre style wewnętrznego przycisku (takie jak obramowanie, cień itp.). – nozzleman

Przyjemny pomysł, można teraz również używać glifotypu do wyświetlania pasków. Zrobiłem to - Linki – thephpx

miałem ten sam problem, ale nie czuję się jak dodawanie fontawesome.

Oto moje rozwiązanie (HTML i mniej):

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

MNIEJ:

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

UWAGA: I'v tylko przetestowane w Ostatnia Chrome i IE 11. Nie mam nic w przeciwnym razie skonfiguruj bankomat.

Źródło

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 rozwiązanie

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

Źródło

2015-07-08 21:34:29

Niestety to sprawia, że cały navbar 8 pixeůs wyżej – gorn

Musiałem usunąć linię wysokości, a potem było dla mnie w porządku. Wspaniały! –

Inną tylko css:

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

Źródło

2016-03-19 20:45:12 Alvaro

dzięki! działa świetnie. – user46688

dziękuję, szukałem tego –

tak łatwo. Dziękuję Ci! – Mel

Dodaj wskazówkę tekstową do przycisku paska nawigacyjnego Bootstrap Przełącznik na widok z urządzenia mobilnego

Odpowiedz

Powiązane problemy