Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Прозрачное меню на bootstrap 3 – легко создать и просто использовать

Доброго времени суток, дорогие мои гики верстки сайтов. В текущей публикации мы поговорим с вами о том, как создать в Bootstrap прозрачное меню. В предыдущих статьях я рассказывал во всех подробностях, каким образом можно реализовать различные виды навигационных панелей при помощи встроенных в фреймворк инструментов.

А вот теперь я предлагаю вам поиграться со стилями оформления меню и создать для него уникальный дизайн. Поэтому под конец статьи вы будете уметь создавать стеклянную панель навигации в Bootstrap 3. Приступим же!

Так, заглянем-ка в ящик с инструментами

Как вы уже догадались, для создания привычного меню я использую встроенный механизм – Navigation Bar. Сам фреймворк предлагает разработчикам только два стиля оформления такого элемента. Это navbar- default и navbar- inverse.

Для тех, кто не знает в чем между ними отличие, я скажу, что первый класс задает внешний вид навигационного меню в преимущественно серых тонах, а во втором преобладают черный и темно-серый цвета.

Конечно же создатели Бутстрапа обдумали внешний вид описываемого элемента. И действительно, названные стили выглядят ненавязчиво и подходят под множество дизайнов. Однако они не универсальны.

Меню

Поэтому, как и в случае с постановкой задачи в этой публикации, довольно-таки часто возникают ситуации, когда стили меню необходимо сменить. И вот тут на помощь приходит ветеран всего стилевого оформления – css.

Стиляга 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>

Обязательно запустите приложение и после видоизмените стилевые правила некоторых свойств.

А я на этой ноте с вами прощаюсь. Буду с нетерпением ждать вас в рядах своих дорогих подписчиков. И не забывайте делиться интересными статьями со своими коллегами и друзьями. До скорой встречи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 123 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: