Добавить текстовую подсказку к кнопке переключения Bootstrap Navbar на мобильном телефоне-просмотр

некоторые тесты показали, что кнопка " гамбургер "для сворачиваемых меню на мобильных устройствах является загадкой для пользователей, и я хотел бы добавить слово" меню " рядом с моей кнопкой Меню начальной загрузки, как показано в mobile-view.

для дальнейшего чтения ознакомьтесь с этой статьей: "гамбургер вреден для вас":http://mor10.com/hamburger-bad/

вот основной код начальной загрузки:

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

Итак, я хотел бы добавить слово "меню" рядом со значком на мобильный. Я сделал макет того, о чем я говорю, но у меня недостаточно высокая репутация, чтобы опубликовать его.

проверьте это здесь:https://imgur.com/M7hGS7F

  • FYI это макет, фактическая страница начальной загрузки не содержит текст меню, иначе я бы просто посмотрел на источник.

Если вы можете предоставить информацию о том, как включить, как (A) просто текст рядом с кнопкой & (B) как часть кнопки, чтобы ее можно было щелкнуть это было бы здорово. Заранее спасибо за помощь в этом решении!

11
html jquery-mobile mobile twitter-bootstrap user-experience

4 ответов

Я думаю, было бы лучше использовать fontawesome.

просто включите ссылки на fontawesome (см. http://fortawesome.github.io/Font-Awesome/get-started/), а затем используйте значок bars (http://fortawesome.github.io/Font-Awesome/icon/bars/)

таким образом, ваш код будет выглядеть sth. вот так:

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

Если значок баров должен быть больше, просто добавьте fa-lg или любой другой класс, который можно найти на http://fortawesome.github.io/Font-Awesome/examples/ к значку

7

другое просто css решение:

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

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

у меня была та же проблема, но мне не хотелось добавлять fontawesome.

вот мое решение (HTML и меньше):

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

минус:

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

предупреждение: я проверил это только в lastest Chrome и IE 11. У меня нет ничего другого, чтобы настроить банкомат.

1