<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

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

Выезжающее боковое меню. Часть 1.

Выезжающее боковое меню. Часть 1.

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

Перед закрывающим тегом head подключим несколько файлов:

  • normalize.min.css - браузерные дефолтные стили приводит к общему стандарту
  • style.css - здесь будут наши собственные стили
  • fontawesome - ссылка на иконочный шрифт
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

HTML-код

Перед закрывающим тегом body подключаем jQuery и menu.js, куда мы будем писать свой код:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="menu.js"></script>

Создадим в HTML,-файле общий оборачивающий тег с классом wrapper для всех элементов. Дальше создадим блок с классом menu, внутри которого будет иконка-бургер и список в виде ссылок. Ссылки поместим в тег nav с классом menu-list. Далее идёт секция с заголовком, которая при клике по иконке, будет отодвигаться.

На сайте fontawesome.com, ищем бургер-иконку, копируем код и вставляем между тегами span,.

<div class="wrapper">
  <div class="menu">
  <a href="#" class="menu-icon">
    <span><i class="fas fa-bars"></i></span>
  </a>
    <nav class="menu-list">
      <a href="#">Фотостудия</a>
      <a href="#">Ретушь</a>
      <a href="#">Цены</a>
      <a href="#">Контакты</a>
    </nav>
  </div>
  <section>
  <h1>Фотостудия</h1>
  </section>
</div>

Работа над внешним видом в CSS

Высота секции с контентом равна 100% высоте экрана. Выравниваем заголовок h1 с помощью метода flex:, по центру (justify-content: center;) вдоль горизонтальной оси и сверху (align-items: start;) относительно вертикальной оси.

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Задаём фиолетовый цвет у фона секции, внутри секции у h1 - белый цвет.

color: #fff;
background-color: #9b59b6;
}

Оформим родительский элемент wrapper. Позиция relative, для родителя обозначает, что местонахождение дочерних элементов будет рассчитываться от wrapper. Свойство overflow-x отвечает за то, чтобы случайно не появилась горизонтальная полоса прокрутки в момент движения секции, пока скроем - hidden.

.wrapper {
    position: relative;
    overflow-x: hidden;
}

Переходим к оформлению меню, опять применим flex метод.

display: flex;
align-items: center;
justify-content: center;

Зафиксируем положение меню (position: fixed) сверху и слева окна браузера (left, top) зададим ширину 25% от родителя wrapper и на всю высоту экрана.

.menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 25%;
    height: 100vh;
}

Зададим фоновый белый цвет, при клике меню должно плавно выезжать - transition: 0.5s. В обычном состоянии меню должно быть спрятано - свойство transform: translateX задвинет меню по горизонтальной оси в невидимую область влево на 100%.

background-color: #fff;
transition: 0.5s;
transform: translateX(-100%);

А класс menu_active, при клике по иконке, вернет наше меню обратно, для этого пропишем код ниже. Класс menu_active будет задействован в файле menu.js, поэтому в HTML-коде его нет.

.menu_active {
    transform: translateX(0%);
}

К стилям для ссылок меню применим flex метод для выравнивания по центру, space-around создаст между ними равное расстояние.

.menu-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

flex-direction расставит их в столбик и высота 50% от родителя.

flex-direction: column;
height: 50%;
}

Стилизуем сами ссылки. Убираем подчеркивание - text-decoration, делаем большими заглавными буквами - text-transform, цвет как у фона - color и добавим жирности для шрифта - font-weight.

.menu-list a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    color: #9b59b6;
}

Задаем бургер-иконке белый цвет, делаем её побольше - font-size: 150% и расположим её абсолютно по отношению к окну браузера, играясь со значениями - right и top.

.menu-icon {
    color: #fff;
    font-size: 150%;
    position: absolute;
    right: -35px;
    top: 10px;
}

На следующем уроке мы продолжим делать выезжающее боковое меню.


Демо-пример без jQuery

See the Pen CSS3 left menu by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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