На этом уроке, создадим сайдбар с иконками , для этого нам пригодится иконочный шрифт и хорошие знания в HTML + CSS .
На этом уроке, создадим сайдбар с иконками, для этого нам пригодится иконочный шрифт и хорошие знания в HTML + CSS.
Надо сказать, что мода на минималистический дизайн и увеличение просмотров сайтов с мобильных устройств, подталкивает дизайнеров, чаще использовать в оформлении сайтов – иконки. Все какое-то разнообразие.
Пример сайдбара.
Подключение Font Awesome
Font Awesome
Для подключения, через CDN, вставьте ссылку между тегами <head>.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Поиск иконок и вывод их в меню сайдбара.
Первым пунктом меню у нас будет главная (дом), вбиваем в поиске home и выбираем соответствующую иконку.
Запоминаем код и вставляем в меню сайдбара. Аналогичным образом находим все иконки для сайдбар меню.
HTML код
Создадим левую колонку (сайдбар) с пунктами меню и иконками (тег i), находящиеся внутри ссылок.
<div class="sidebar">
<a href="#"><i class="fas fa-fw fa-home"></i> Главная</a>
<a href="#"><i class="fas fa-fw fa-code"></i> Услуги</a>
<a href="#"><i class="fas fa-fw fa-briefcase"></i> Портфолио</a>
<a href="#"><i class="fas fa-fw fa-map-marker"></i> Контакты</a>
</div>
Значения классов тега i
<i class="fas fa-fw fa-home"></i>
- fa-home – код иконки
- fas – иконка Solid
- fa-fw – фиксированная ширина
Создадим правую колонку, где и будет размещаться основной контент, которая будет прокручиваться при скролле.
<div class="main">
<h2>Иконки для сайдбар меню</h2>
<p>какой-то контент..</p>
<p>какой-то контент</p>
<p>какой-то контент</p>
</div>
CSS код
Меню сайдбара должно всегда оставаться наверху и быть видимым на всю высоту экрана. Свойство overflow-x, не даст, длинному названию, выйти за пределы сайдбара, но в тоже время не обрежет его, а перенесет ниже.
.sidebar {
height: 100%;
width: 180px;
position: fixed;
z-index: 1; // сайдбар выше main колонки
top: 0;
left: 0;
background-color: #673AB7;
overflow-x: hidden;
padding-top: 16px; // отступ сверху окна браузера
}
Стилизация текста меню и иконок одновременно. Ссылки – строчные элементы и чтобы можно было применить к ним паддинги, следует отобразить их как блочные элементы.
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block; // отображение как блочных элементов
}
Сделаем отступ, от левого края браузера на ширину самого сайдбара. Этот трюк, наверняка зафиксирует правую колонку относительно сайдбара и не даст ей уплыть.
.main {
margin-left: 180px; /* равна ширине сайдбара */
padding: 0px 10px;
}
Меняем цвет текста при наведении мышки на ссылки сайдбара.
.sidebar a:hover {
color: #d1c4e9;
}
Медиа-запрос для маленьких экранов
Когда высота экрана, станет меньше 450 пикселей, следует уменьшить отступ и размер шрифта.
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
Посмотреть код целиком можно на Codepen
See the Pen Иконки для сайдбар меню by porsake (@porsake) on CodePen.
