Улучшаем кнопку панели навигации в Bootstrap 3

В прошлом уроке мы сделали обычную кнопку, которую видно, когда меню не влазит в экран браузера

Но далеко не все люди поймут, что означает эта кнопка, давайте исправим эту проблему.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="glyphicon glyphicon-arrow-down"></span>
      MENU
    </button>
</div>

Ну вот, часть проблемы мы решили. Теперь у нас есть слово MENU и новая глиф иконка. Осталось придать дизайна этому всему.

.navbar-inverse .navbar-toggle {
    color: white;
	font-weight: bold;
	border-color: white;
}
.navbar-inverse .navbar-toggle:hover {
	background-color: #ddd;
	color: #333;
}
.navbar-inverse .navbar-toggle .glyphicon {
	color: white;
}
.navbar-inverse .navbar-toggle:hover .glyphicon {
	color: #333;
}

Ну вот и все, смотрим результат

Скачать урок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector