Прозрачная панель навигации в CSS
Когда в основе верхней секции сайта лежит большое изображение, то простым и хорошим решением для вписывания туда панели навигации - сделать её прозрачной. Такой дизайнерский приём имеет смысл, если фоновая картинка не однотонная.
Демо-пример приведен ниже
See the Pen Прозрачная панель навигации в CSS by porsake (@porsake) on CodePen.
HTML-код прозрачной панели навигации
В тег nav мы поместим блок div с логотипом компании и список ul с ссылками, которые являются пунктами меню. Ниже идут две секции: первая - с фоновым изображением, а вторая с произвольным текстом - для демонстрации работы фиксированной панели навигации.
<nav>
<div class="logo">
<h2>Булка - Хлеб</h2>
</div>
<ul>
<li><a href="#">О компании</a></li>
<li><a href="#">Пекарни</a></li>
<li><a href="#">Продукция</a></li>
<li><a href="#">Партнёрам</a></li>
<li><a href="#">Отзывы</a></li>
</ul>
</nav>
<section>текст
</section>
Обычно в своих проектах я использую Google Fonts, во первых они красивее и гарантированно отобразятся на компьютере пользователя. Для логотипа отлично подойдёт декоративный шрифт - Lobster, а для меню я выбрал менее броский - Roboto.
Вставляем код в самый вверх CSS файла.
@import url('https://fonts.googleapis.com/css?family=Lobster|Roboto:700i');
По порядку начинаем писать стили, начав с общих - *, которые будут оказывать влияние на все элементы. Ставим нули у полей и отступов, прописываем цвет для ссылок, размер шрифта в процентах и задаем для box-sizing значение border-box. Это значит к заданной ширине и высоте любого блока не будут прибавляться размеры рамок и полей.
* {
color: #412c2c;
font-size: 100%;
box-sizing: border-box;
}
Высота и ширина для полноэкранной секции - section.sec1, равны высоте и ширине области просмотра. Изображение, без искажения пропорций, адпаптируется под разные размеры экранов, благодаря свойству cover.
width: 100%;
height: 100vh;
background-size: cover;
Мы сделаем панель навигации не только прозрачной, но и фиксированной position: fixed - при прокрутке странице, она всегда будет оставаться сверху экрана, благодаря нулевым top и left.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Высота панели задана 70px, а содержимое панели выравнено по центру с помощью line-height. В скобочках rgba задан белый цвет и параметр альфа-канала 0.3, что обозначает степень прозрачности.
height: 70px;
line-height: 70px;
background: rgba(255,255,255,0.3);
padding: 0 80px;
На скриншоте ниже мы видим, что список ul не находится внутри панели навигации и не расположен горизонтально.
Но сначала займёмся логотипом. Зададим обтекание слева.
div.logo {
float: left;
}
Зададим покрупнее шрифт font-size: 160% и пропишем название шрифта - Lobster.
div.logo h2 {
font-size: 160%;
font-family: 'Lobster', cursive;
}
Как только мы напишем волшебное свойство display: flex и пункты меню li сразу примут горизонтальный вид. За выравнивание их по центру по вертикали отвечает свойство align-items: center. Но по вертикали нам не нужно выравнивать по центру, мы хотим разместить в конце главной оси - justify-content: flex-end.
nav ul {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style: none;
}
Никаких маркеров.
list-style: none;
Сейчас ссылки списков прижаты друг к другу, в нижнем регистре с дефолтным шрифтом.
Поскольку нам уже не надо выравнивать списки nav ul li a по нижней и верхней границами, то первым значением padding будет ноль. Второй значение 18px - это поля слева и справа от каждой ссылки в теге li. В итоге получается, что между ссылками в сумме будет расстояние 36px. Нас это устраивает.
padding: 0 18px;
Здесь идет чисто оформительский код. text-decoration - убирает подчеркивание ссылки, text-transforn - переводит буквы в верхний регистр, font-family - задаёт название шрифта.
text-decoration: none;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
-
Создано 29.06.2018 10:01:23
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.