Вертикальное меню для сайта на css: несколько вариантов

Давайте сегодня сделаем вертикальное меню для сайта на html и 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. Кстати, давайте посмотрим на то, что мы создали. Наше меню уже, по сути, вертикальное.

вертикально меню на 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;
}
круглые пункты меню

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

Можно записывать градиенты вручную, но для этого вы должны очень хорошо знать синтаксис этого свойства. Вообще я рекомендую пользоваться сервисом, который за вас генерирует код градиента — CSS3 Gradient Generator. Давайте им и воспользуемся. Я выбрал такой градиент:

.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 и вы сами поймете, как много есть возможностей.

Картинка в качестве фона для пунктов меню

Хорошо, тогда сегодня я вам предложу еще один вариант оформления – с картинкой в качестве фона. Изображение я рекомендую выбирать небольшое, чтобы оно было бесшовным и могло повторяться. Например, я нашел вот такой орнамент:

bg2

Полностью заменим предыдущие стили, убрав у ссылок градиент, заменив цвет и т.д.

.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. Теперь можно сделать еще и вертикальное меню.

Вертикальное выпадающее меню

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

Полная разметка

Я решил, что в нашем вертикальном меню будет четыре пункта. При наведении на каждый пункт будет появляться выпадающее подменю из трех подпунктов. Из-за этого разметка получилась слегка громоздкой, вот она:

<nav id="nav">
<ul class="main-ul">
    <li><a href="#">Пункт 1</a>
    <ul class="second-ul">
        <li><a href="#">Подпункт</a></li>
        <li><a href="#">Подпункт</a></li>
        <li><a href="#">Подпункт</a></li>
    </ul>
    </li>
    <li><a href="#">Пункт 2</a>
    <ul class="second-ul">
        <li><a href="#">Подпункт4</a></li>
        <li><a href="#">Подпункт4</a></li>
        <li><a href="#">Подпункт4</a></li>
    </ul>
    </li>
    <li><a href="#">Пункт 3</a>
    <ul class="second-ul">
        <li><a href="#">Подпункт7</a></li>
        <li><a href="#">Подпункт7</a></li>
        <li><a href="#">Подпункт7</a></li>
    </ul>
    </li>
    <li><a href="#">Пункт 4</a>
    <ul class="second-ul">
        <li><a href="#">Подпункт8</a></li>
        <li><a href="#">Подпункт8</a></li>
        <li><a href="#">Подпункт8</a></li>
    </ul>
    </li>
</ul>
</nav>

В принципе тут все очень просто. Все меню лежит в контейнере nav, там уже мы создаем список и его пункты. Но поскольку наше меню двухуровневое, то в каждый пункт списка (li) мы дополнительно вкладываем список с классом second-ul (типа вложенный ul). Название класса роли не играет. И так делаем с каждым пунктом. Если вы внимательно изучите разметку на примере одного пункта, то все поймете, вот еще раз:

<li><a href="#">Пункт 1</a>
<ul class="second-ul">
    <li><a href="#">Подпункт</a></li>
    <li><a href="#">Подпункт</a></li>
    <li><a href="#">Подпункт</a></li>
</ul>
</li>

То есть мы в пункт вкладываем список, в котором в свою очередь располагаются вложенные пункты. На этом с html-разметкой все, переходим в css, где все гораздо интереснее.

Оформление нашего меню

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

*{
    margin: 0;
    padding: 0;
}
#nav{
    height: 70px;
}
#nav ul{
    list-style: none;
}

Вот такие правила первым делом отправляются в таблицу стилей. Посмотрим, как выглядит наше меню:

Ужасно, не так ли? Но ничего, сейчас мы это исправим!

Следующие стилевые правила очень важны именно с эстетической точки зрения — наше меню станет чуть красивее на вид. Вот все эти правила:

#nav > ul > li{
    width: 180px;
    position: relative;
}
#nav li a{
    display: block;
    background: #ccc;
    border: 1px solid #333;
    color: #fff;
    padding: 15px;
}
#nav li a:hover{
    background: #999;
}

Что я здесь настроил? Во-первых, для пунктов главного списка указал ширину и относительное позиционирование. Оно нужно для того, чтобы потом выполнить абсолютное позиционирование вложенного меню. Далее настраиваем сам внешний вид ссылок. Делаем их блочными, красим в нужный цвет, добавляем отступы, рамку и т.д. По желанию. Также сделаем изменение фонового цвета при наведении. Итог всех этих манипуляций:

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

Делаем вертикальное меню выпадающим

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

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

#nav li .second-ul{
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

То есть для вложенного списка указываем абсолютное позиционирование и сдвиг влево на 100% ширины от ширины родительского блока (пункта списка). А насколько мы знаем, ширина у него 180 пикселей. По высоте вложенное меню должно быть на одном уровне. После этих манипуляций у вас должно получится так:

Ну и собственно теперь замените в стилях для вложенных списков display: block на display: none. После этого подменю пропадут с экрана, что нам и нужно. Мы подходим к самому важному этапу — реализации выпадания на css. Для этого сделаем вот что:

#nav li:hover .second-ul{
    display: block;
}

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

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

И так будет для каждого пункта. Если вы все делали за мной, то именно так и будет. Правда я еще добавил ширину для вложенных пунктов списка, чтобы они были такими же по размеру, как основные:

#nav li li{
    width: 180px;
}

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий