<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

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

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

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

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

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

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

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

Адаптивная навигация на HTML и CSS

Адаптивная навигация на HTML и CSS

Одним из базовых компонентов любого сайта является адаптивная навигация. Это такая навигация, которая изменяет свое представление в зависимости от размера экрана устройства пользователя. Далее я покажу Вам пример реализации такой навигации на HTML и CSS с небольшой долей JavaScript кода

Файл index.html


<!DOCTYPE html>
<html lang="ru">
    <head>

        <!-- Обязательные мета-теги, без которых пример не будет работать на мобильных устройствах -->
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
        <title>Адаптивная навигация</title>

    </head>
    <body>
        <nav class="navbar">
            <!-- Логотип сайта -->
            <div class="brand-title">Мой сайт</div>

            <!-- кнопака - гамбургер меню -->
            <a href="#" class="toggle-button">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
            </a>

            <!-- ссылки навигации по сайту  -->
            <div class="navbar-links">
                <ul>
                    <li>
                        <a href="#" style="position: relative">
                            Статьи
                            <span class="badge"></span>
                        </a>
                    </li>
                    <li><a href="#">О сайте</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
        </nav>

        <main>
            <div>
                <h1>Адаптивная навигация</h1>
                <em>Измените размер окна, чтобы увидеть результат</em>
            </div>
        </main>
    </body>
</html>

Файл стилей styles.css


* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

main {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    background-color: #00ffff;
    color: #555555;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.badge {
    --badge-width: 10px;

    position: absolute;
    top: 12px;
    right: 5px;
    width: var(--badge-width);
    height: var(--badge-width);
    background-color: red;
    border-radius: calc(var(--badge-width) / 2);
    text-align: center;
    /*line-height: 30px;*/
    color: #ffffff;
    transform: scale(.7);
}

.navbar {
    padding: 0 2rem;
    box-shadow: 1px 1px 10px rgba(85, 85, 85, .75);
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #fff000;
    color: #555555;
}

.brand-title {
    font-size: 1.5rem;
    margin: .5rem;
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: #555555;
    padding: 1rem;
}

.navbar-links li:hover {
    background-color: rgb(255, 240, 200);
}

/**
    кнопка гамбургер меню
 */
.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

/**
    отдельные линии кнопки
 */
.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: #555555;
    border-radius: 10px;
}


/**
    для устройств с размером экрана меньше 800px
    отображаем гамбургер меню
 */
@media screen and (max-width: 800px)
{
    .navbar {
        padding: 0 .1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }
}

Файл script.js


// самовызывающаяся функция для меню
!function () {

    const toggleButton = document.getElementsByClassName('toggle-button')[0]
    const navbarLinks = document.getElementsByClassName('navbar-links')[0]

    // при клике на кнопку меня переключаем состояние меню
    toggleButton.addEventListener('click', () => navbarLinks.classList.toggle('active'))

}()



Таким образом, мы создали адаптивное навигационное меню на HTML и CSS, которое будет органично смотреться на планшетах и смартфонах.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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