Доброго времени суток, дорогие мои гики верстки сайтов. В текущей публикации мы поговорим с вами о том, как создать в Bootstrap прозрачное меню. В предыдущих статьях я рассказывал во всех подробностях, каким образом можно реализовать различные виды навигационных панелей при помощи встроенных в фреймворк инструментов.
А вот теперь я предлагаю вам поиграться со стилями оформления меню и создать для него уникальный дизайн. Поэтому под конец статьи вы будете уметь создавать стеклянную панель навигации в Bootstrap 3. Приступим же!
Так, заглянем-ка в ящик с инструментами
Как вы уже догадались, для создания привычного меню я использую встроенный механизм – Navigation Bar. Сам фреймворк предлагает разработчикам только два стиля оформления такого элемента. Это navbar- default и navbar- inverse.
Для тех, кто не знает в чем между ними отличие, я скажу, что первый класс задает внешний вид навигационного меню в преимущественно серых тонах, а во втором преобладают черный и темно-серый цвета.
Конечно же создатели Бутстрапа обдумали внешний вид описываемого элемента. И действительно, названные стили выглядят ненавязчиво и подходят под множество дизайнов. Однако они не универсальны.
Стиляга CSS
Для начала вам стоит запомнить, что если вы заведомо знаете, какие цвета вам необходимо установить для оформления дизайна сайта, то задайте их в Costomize и только после скачивайте установочный пакет.
Если же нет, то придется ручками перебивать код каскадных таблиц стилей.
Однако перед этим поинтересуйтесь, какие свойства задаются в Bootstrap для изменяемого инструмента, и только после в стилях переопределяйте именно их.
Почему я делаю на этом акцент? Очень часто новоиспеченные разработчики не уделяют должного внимания документации и уже написанному за них коду, и после удивляются неожиданно возникшим багам или некорректной работе веб-страниц.
Поэтому при написании приложения для примера, я переопределил некоторые стандартные свойства для навигационной панели, а также добавил свои, чтобы создать эффект стеклянной поверхности.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar-default {
background-image:
linear-gradient(45deg, rgba(255,255,255,1), rgba(175, 238, 238,.3) 73%, rgba(255,255,255,1));
border: 1px inset rgba(70, 130, 180,.4);
box-shadow: rgba(255,255,255,.9) 0 1px, rgba(130,130,130,.8) 0 2px 9px;
}
.navbar-default .navbar-brand {
color: #4682B4;
text-shadow: rgba(255,255,255,.5) 2px 2px, rgba(130,130,130,.8) 5px 5px 2px;
}
.navbar-default .navbar-nav > li > a {
color: #4682B4;
text-shadow: rgba(255,255,255,.5) 2px 2px, rgba(130,130,130,.8) 5px 5px 2px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: rgba(175, 238, 238,.2);
}
body {
background: rgba(175, 238, 238,.5);
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">BrandOfSite</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Продукция</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Наименование компании</h3>
<p>Какой-то рекламный текстовый контент.</p>
</div>
</body>
</html> |
Обязательно запустите приложение и после видоизмените стилевые правила некоторых свойств.
А я на этой ноте с вами прощаюсь. Буду с нетерпением ждать вас в рядах своих дорогих подписчиков. И не забывайте делиться интересными статьями со своими коллегами и друзьями. До скорой встречи! Пока-пока!
С уважением, Роман Чуешов
