<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Вертикальное меню на CSS

Вертикальное меню на CSS

Вертикальное меню на CSS - это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?

Как сделать вертикальное меню на CSS.

HTML-код

Между тегами li прописываем ссылку a (# временная заглушка), внутри которой два блочных элемента span. В первом span - тег i с классом иконки, код которой был скопирован с сайта Font Awesome. Во втором span - название ссылки, то есть текст.

  <ul>
   <li>
    <a href="#">
     <span><i class="fas fa-bicycle"></i></span>
     <span>Велосипеды</span>
    </a>
   </li>
   <li>
    <a href="#">
     <span><i class="fas fa-motorcycle"></i></span>
     <span>Мотоциклы</span>
    </a>
   </li>
   <li>
    <a href="#">
     <span><i class="fas fa-bus"></i></span>
     <span>Автобусы</span>
    </a>
   </li>
   <li>
    <a href="#">
     <span><i class="fas fa-car"></i></span>
     <span>Автомобили</span>
    </a>
   </li>
   <li>
    <a href="#">
     <span><i class="fas fa-helicopter"></i></span>
     <span>Вертолёты</span>
    </a>
   </li>
  </ul>

После подключения между тегами head иконочного шрифта Font Awesome - меню имеет вот такой вид.

Как сделать вертикальное меню на CSS.

CSS стили

Для начала на Google Font подберем привлекательный шрифт с поддержкой кириллицы, если вертикальное меню будет на русском.

Копируем код подключения выбранного шрифта и вставляем сверху в CSS файле.

@import url('https://fonts.googleapis.com/css?family=Marck+Script');

В селекторе body пишем название выбранного шрифт и задаем ему размер.

body {
    margin: 0;
    padding: 0;
    font-family: 'Marck Script', sans-serif;
    font-size: 20px;
}

Позиционируем наше меню относительно окна браузера, отступая сверху на 10% и слева на 20%. Разумеется, что эти цифры взяты с "потолка", у вас они будут свои.

ul {
    position: absolute;
    top: 10%;
    left: 20%;
}

Фиксируем ширину меню на 200 пикселях.

width: 200px;

Мы дошли до пунктов меню списка. Убираем маркеры у пунктов li.

ul li {
    list-style: none;
}

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

border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
margin: -1px 0;

Не хватает боковых рамок и разделителей между иконками и названий ссылок.

Как сделать вертикальное меню на CSS.

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

ul li a {
    display: block;
}

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

border-right: 1px solid #131313;
text-decoration: none;
color: #131313;

Не хватает ещё левой рамки.

Как сделать вертикальное меню на CSS.

Теги span - блочные элементы, внутри которых будет текст, поэтому span отобразим строчно-блочным элементом.

ul li a span {
    position: relative;
    display: inline-block;
}

Нам необходимо для первого span, внутри которого будет иконка, задать стили, отличающиеся от второго span. Для этого первый span обозначим псевдоклассом - span:nth-child(1) и стилизуем его отдельно. Установим правую и левую рамку и ширину.

ul li a span:nth-child(1) {
    width: 30px;
    border-left: 1px solid #131313;
    border-right: 1px solid #131313;
}

Иконки встанут посередине с полями по 10 пикселей во все стороны.

text-align: center;
padding: 10px;

Иконки будут темного цвета, размером 20 пикселей на красном фоне.

color: #131313;
font-size: 20px;
background: #f44336;

Во втором псевдоклассе, надо задать только поля.

ul li a span:nth-child(2) {
    padding: 10px;
}

Если этот урок оказался слишком сложным для вас, то советую посмотреть полезный видеокурс - "Вёрстка сайта с нуля 2.0".

Теперь вертикальное меню приняло свой окончательный вид. Смотрите весь код и результат.

See the Pen CSS vertical menu + font icons by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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