Приветствую вас на своем блоге, посвященном html и css. С помощью этих двух технологий можно создать и оформить много разных элементов для веб-страницы. В частности, давайте сегодня сделаем вертикальное меню для сайта на css, а заодно и посмотрим, какие для этого могут пригодиться свойства.
Разметка меню
Я предлагаю записать в html такой код:
<ul class = "menu">
<li><a href = "#">Создание сайта</a></li>
<li><a href = "#">Улучшение сайта</a></li>
<li><a href = "#">HTML и CSS</a></li>
<li><a href = "#">WordPress</a></li>
</ul>
Да, наиболее правильно пункты меню выводить как список, тем более, что по умолчанию его пункты – блочные элементы, а нам в вертикальном меню именно так и нужно. Сам список создается тегом ul, его пункты – li, а ссылки мы вложили, потому что в реальном меню они есть и ведут на какие-то страницы.
Также добавили класс .menu. По нему мы сможем обращаться к элементу в css. Кстати, давайте посмотрим на то, что мы создали.
Наше меню уже, по сути, вертикальное Конечно, в этой статье я предложу вам несколько вариантов его оформления, чтобы оно не выглядело так скучно, но первым делом нужно убрать маркеры. Это делается так:
.menu{
List-style: none;
}
Простое оформление
Теперь возьмемся как следует за то, чтобы стилизовать нашу навигацию. Во-первых, пунктам меню нужно определить какую-то ширину, что они не занимали все место на странице, ведь на реальном сайте у нас справа будет какая-то информация. Запишем для них:
.menu li{
width: 200px;
}
Все остальные стили, которые влияют на внешний вид пунктов меню, будут применены непосредственно к ссылкам. Так делают все верстальщики. Для этого ссылки нужно преобразовать в блочные элементы, делаем это, а заодно сразу же запишем пару свойств:
.menu li a{
display: block;
background: #3D60B8;
color: yellow;
padding: 15px;
text-decoration: none;
}
Я прописал фоновый цвет, близкий к синему, желтый цвет текста, внутренние отступы, чтобы текст не прилегал близко к краям, а также убрал по умолчанию подчеркивание у ссылок.
Все это очень простые манипуляции. Нашему меню не хватает разделителя, поэтому добавим еще такое правило:
.menu li{
border-bottom: 1px solid yellow;
}
Отлично, у каждого пункта меню добавиться снизу тонкая желтая линия, которая будет явно отделять его от других. Только вот есть одна проблема – обычно у последнего пункта такую рамку добавлять не нужно. Что ж, это очень легко реализовать следующим образом:
.menu li:last-child{
border-bottom: none;
}
И теперь последний пункт, каким бы по счету он ни был, не получит рамку.
Наше меню работает
Да, оно уже полностью работоспособно, осталось только задать правильные адреса ссылкам. Но это был простой способ оформления, мы всего лишь задали пунктам фоновый цвет и несколько других свойств.
А что еще можно сделать? Другие варианты оформления
Скругление углов. О скруглении я отдельно написал статью, можете почитать, чтобы лучше разобраться. Тут же я скажу об этом коротко – оно задается с помощью свойства border-radius.
Скругление можно добавить либо всему контейнеру с меню, либо отдельно каждой ссылке. Вот результат, если добавить каждому пункту отдельно:
.menu li a{
border-radius: 20px;
}
Градиент вместо сплошного цвета. В качестве фона мы задали синий цвет. Можно поступить и по-другому, записать градиент, то есть микс из цветов, в этом случае наше меню может смотреться более эффектно.
Можно записывать градиенты вручную, но для этого вы должны очень хорошо знать синтаксис этого свойства. Вообще я рекомендую пользоваться прекрасным сервисом, который за вас генерирует код градиента, о нем я писал здесь. Давайте им и воспользуемся. Я выбрал такой градиент:
.menu li a{
display: block;
background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%);
color: purple;
padding: 15px;
text-decoration: none;
border-radius: 20px;
}
В стилях я также поменял цвет текста, а то желтый был нечитаемым на таком фоне, а также убрал нижнее подчеркивание, при скругленных уголках оно не сильно то и нужно. И вот что у нас получилось:
Ах да, еще я выровнял текст в пунктах по центру с помощью свойства text-align:center. Допишите его в стили, если хотите также.
Идем дальше. Можно придать дополнительное оформление пунктам, если добавить к ним тень. Это можно сделать так:
box-shadow: 2px 2px 2px 0 purple;
Подробнее о тенях читайте в другой моей статье, тут я только скажу, что тень может быть внешней или внутренней. Мы задали внешнюю и она находится за пределами пунктов. У этого свойства такой синтаксис: сначала задается смещение по горизонтали, потом по вертикали, размытие, растяжение и цвет. Размытие и растяжение не являются обязательными параметрами.
И вот что получилось:
Пункты меню стали гораздо более четко выделенными и более красивыми. Как вы понимаете, я показал это только для примера – цвет тени и ее параметры вы можете определить самостоятельно, выбирая из миллионов вариантов.
Добавим стили при наведении на пункты
Пока при наведении на ссылки у нас ничего не происходит и они никак не выделяются. На многих сайтах меню так и работает, но все же чаще при наведении стиль меняется и это достаточно хороший эффект.
За стили при наведении отвечает псевдокласс hover. Кстати, о нем у меня тоже имеется статейка. Мы сделаем по продвинутому, пусть при наведении цвет будет меняться на другой градиент:
.menu li a:hover{
background: linear-gradient(to bottom, rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100%);
}
Соответственно, есть еще миллион возможностей изменить внешний вид нашего меню: задать другой цвет тексту, другую тень, размер шрифта, другой цвет и многое-многое другое.
Например, добавьте к menu li a:
Transition: 1s;
А к .menu li a:hover:
Letter-spacing: 2px;
Теперь при наведении буквы будут плавно раздвигаться в стороны. И это лишь пример того, что можно сделать. Просто выучите CSS и вы сами поймете, как много есть возможностей.
Картинка в качестве фона для пунктов меню
Хорошо, тогда сегодня я вам предложу еще один вариант оформления – с картинкой в качестве фона. Изображение я рекомендую выбирать небольшое, чтобы оно было бесшовным и могло повторяться. Например, я нашел вот такой орнамент:
Полностью заменим предыдущие стили, убрав у ссылок градиент, заменив цвет и т.д.
.menu li a{
display: block;
background: url(bg2.png);
color: white;
font-size: 18px;
padding: 15px;
text-decoration: none;
text-align: center;
border-radius: 20px/10px;
}
Свойства записаны из соображения, что в одной папке с файлом style.css лежит картинка bg2.png. Также я добавил дополнительное скругление краев. И вот в итоге перед нами абсолютно другое меню:
Так вот мы с вами сделали абсолютно разные варианты вертикального меню в css. В следующий раз я хотел бы показать, как можно сделать выпадающее меню, а также как его правильно разместить и оформить, а самое главное, как его скрыть, чтобы оно отображалось только при наведении на главные пункты. В общем, вот такая у меня сегодня информация. Творите свои менюшки