<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Иконки для меню сайдбара

Иконки для меню сайдбара

На этом уроке, мы создадим сайдбар с иконками, для этого нам пригодится иконочный шрифт и хорошие знания в 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

alexivanov alexivanov 04.02.2019 12:25:59

Спасибо за инфу, очень полезно.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.