<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Адаптивное навигационное меню с иконками

Адаптивное навигационное меню с иконками

Из этого урока вы узнаете как создать адаптивное навигационное меню с иконками, используя библиотеку Font Awesome и палитру цветов, на чистом CSS.

Демонстрация меню.

 Адаптивное навигационное меню с иконками.

Подключение Font Awesome

Font Awesome

Подключить можно двумя способами: скачать архив или вставить ссылку между тегами <head>. Мы воспользуемся CDN ссылкой.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Все, иконочный шрифт подключен.

Поиск и вызов иконки на сайте

Первым пунктом меню у нас будет главная страница, вбиваем в поиске слово home и выбираем подходящую нам иконку.

Адаптивное навигационное меню с иконками.

Копируем код, как вы видите на скриншоте ниже и вставляем в нужном нам месте на HTML странице. Таким образом находим иконки для всех пунктов меню.

Адаптивное навигационное меню с иконками.

HTML разметка

Создадим блок <nav>, это специальный тег, предназначенный для ссылок в навигационном меню. Внутри блока вы видите четыре ссылки с временными заглушками для будущих страниц. Внутри ссылки тег <i> вызывает класс иконки и рядом с ним, мы прописали название пункта меню.

<body>
<nav>
  <a class="active" 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>
</nav></div>
</body>

Что означают эти классы?

<i class="fas fa-fw fa-home"></i>
  • fas – стили иконки Solid
  • fa-fw – иконки с фиксированной шириной, необходимо для выравнивания
  • fa-home – изображение иконки

На текущий момент, наше навигационное меню выглядит таким образом:

Адаптивное навигационное меню с иконками.

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

Давайте заглянем на сайт Material Palette.

Я выбираю два рядом стоящие цвета: Purple и Deep Purple и вижу сгенерированную палитру цветов с подсказками, какой цвет основной, а какой для текста и иконок. Дальше мы будем копировать нужные нам цвета и задавать их в CSS коде.

Адаптивное навигационное меню с иконками.

CSS код

Смотрим на палитру и задаем цвет фона для тега <nav>.

nav {
  width: 100%;
  background-color: #673ab7;
  overflow: auto;
}

Стилизуем ссылки панели навигации, палитра рекомендует для них белый цвет. Здесь мы задаем стили как для текста ссылок, так и для иконок одновременно, поскольку иконки – шрифтовые.

nav a {
  float: left;
  padding: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
}

Меняем цвет фона при наведении мышки на ссылки.

nav a:hover {
  background-color: #d1C4E9;
}

Задаем цвет текущей активной ссылке.

.active {
  background-color: #e040fb;
}

Адаптируем меню навигации

На ширине экрана меньше, чем 500 пикселей, меню начинает ломаться. Нам необходимо строчный элемент <a> сделать блочным и отменить обтекание блоков слева.

@media screen and (max-width: 500px) {
  nav a {
    float: none;
    display: block;
  }
}

Таким образом мы получим вертикальное меню, на всех устройствах с ширина экранов, которых меньше 500 пикселей.

Адаптивное навигационное меню с иконками.

Посмотреть код целиком можно на Codepen

See the Pen Responsive Navigation Bar with Icons by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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