<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

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

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

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

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

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

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

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

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

Адаптивное мобильное меню для сайта (часть 1)

Адаптивное мобильное меню для сайта (часть 1)

На этом уроке мы сверстаем мобильное адаптивное меню, используя в интерактивной его части язык JS. Десктопное навигационное меню на определенном разрешении экрана, превратится в мобильное меню. При клике по кнопке гамбургер, мобильное меню будет выезжать из правой части экрана.

Верстка шапки

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

<div class="header">..</div>

.header {
    font-family: Tahoma, sans-serif;
    position: relative;
    height: 100vh; // высота шапки
    background-color: rgb(25, 22, 75); // подстраховочный фон
    background-image: url('../img/bg.jpg'); // путь к файлу с фоном
    background-size: cover; // растянутый фон с сохранением пропорций
    background-position: center; // фон расположенный в центре экрана
}

Фоновое изображение может быть излишне ярким и чтобы текст на фоне хорошо читался, необходимо сделать затемнение фону. Для этого создадим специальный блок header-overlay.

<div class="header">
    <div class="header-overlay"></div>
</div>

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

.header-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(3, 4, 29, 0.3); // цвет + прозрачность
}

Верстка логотипа и меню навигации

Поместим логотип и меню навигации внутри контейнера nav-container.

<div class="nav-container">
<div class="logo">Bitcoin</div>
  <ul class="nav">
    <li class="nav__item"><a href="#" class="nav__link">Новости</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Аналитика</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Графики</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Брокеры</a></li>
  </ul>
</div>

Обозначим максимальную ширину у контейнера 1300 пикселей, чтобы на больших экранах меню не показывалось на весь экран и зададим поля сверху, слева и справа. Чтобы при уменьшении экрана содержимое контейнера не прилипало к краям экрана.

.nav-container {
    display: flex; // flex-контейнер
    justify-content: space-between; // поставим логотип слева, а меню справа
    align-items: center; // выравнивание по вертикали
    margin: 0 auto; // контейнер в центре по горизонтали
    max-width: 1300px;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

CSS для логотипа и меню


.logo {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
}

.nav {
    display: flex;
    list-style-type: none; // убираем маркеры у списка
}

.nav__item {
    margin-right: 50px; // отступы между пунктами меню
}

.nav__item:last-child {
    margin-right: 0px; // обнуляем отступ у последнего пункта
}

// стилизация пунктов меню
.nav__link {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

// стилизация эффекта наведения
.nav__link:hover {
    color: #ff0800e7;
}

Адаптивное мобильное меню для сайта (часть 1).

Вторая часть урока выйдет в следующей статье.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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