<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Навигационное меню с иконками + hover эффект

Навигационное меню с иконками + hover эффект

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

1) Подключить библиотеку Font Awesome

Воспользуемся быстрым способом подключения - через CDN-ссылку.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2) Получить код иконок

Чтобы скопировать код иконок, зайдите на нужную версию Font Awesome из поиска на Google.


Навигационное меню с иконками + hover эффект.

Подходящие иконки мы выбираем сами, пользуясь поиском.


Навигационное меню с иконками + hover эффект.

3) Создать HTML-разметку

В навигационное меню будет 5 пунктов, каждый из которых мы поместим в тег li. Между парным тегом li у нас будет две иконки и название меню, обернутые в гиперссылку. Две одиннаковых иконки нужны для реализации супер hover-эффекта.

<ul>
    <li>
        <a href="#">
        <div class="icon">
        <i class="fa fa-home" aria-hidden="true"></i>
            <i class="fa fa-home" aria-hidden="true"></i>
        </div>
        <div class="name">Home</div>
        </a>
    </li>
    ...
</ul>


Навигационное меню с иконками + hover эффект.

4) Центрирование списка ul

По умолчанию все элементы всегда прибиты к левому верхнему углу. А нам хочется их поставить по центру. Для этого делаем body гибким контейнером и прописываем выравнивающие свойства.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #E1BEE7;
}


Навигационное меню с иконками + hover эффект.

5) Визуальное оформление тега ul

Сделаем белую подложку под навигационное меню с закругленными углами и легкой тенью. Для потомков, тег ul также будет флексовым контейнером, где элементы списка стоят в колонке.

ul {
    padding: 20px;
    width: 270px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}


Навигационное меню с иконками + hover эффект.

6) Удаление маркеров

У списков по умолчанию есть черные маркеры и есть свойство, которое их убирает.

ul li{
    list-style: none;
}


Навигационное меню с иконками + hover эффект.

7) Стилизация иконок

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

ul li a{
    color: #6A1B9A;
    text-decoration: none;
    display: flex;
}
ul li a .icon{
    width: 60px;
    height: 40px;
    text-align: center;     overflow: hidden; /* прячем дубли иконок */
    margin: 10px;
}
ul li a .icon .fa{
    width: 100%;
    height: 100%;
    line-height: 40px;
    font-size: 32px;
    transition: 0.5s ease-in-out;
    color: inherit;
}


Навигационное меню с иконками + hover эффект.

8) Другой цвет для дубликатов

Если временно закомментировать свойство overflow: hidden, то мы можем увидеть дублирующие иконки и задать для них другой цвет.

ul li a .icon .fa:last-child{
    color: #E91E63;
}


Навигационное меню с иконками + hover эффект.

9) Hover эффект (магия)

На этом шаге произойдет ключевой момент hover-эффекта. При наведении на иконку, основная видимая иконка поднимется наверх, а на ее старое место встанет дубликат. Только на самом деле, он там всегда и был. Просто мы перестали его прятать, не прописали свойство overflow:hidden.

ul li a:hover .icon .fa{
    transform: translateY(-100%);
}


Навигационное меню с иконками + hover эффект.

10) Стилизация ссылок меню

ul li a .name{
    position: relative;
    top: 20px;
    height: 20px;
    width: 100%;
    display: block;
    overflow: hidden;
}

Посмотрите пример на CodePen

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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