<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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):

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