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

<nav>
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Order</a>
        <a href="#">Privacy Statement</a>
        <a href="#">Contact</a>
</nav>

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

nav {
        float: left;
        font-family: Bell Gothic Std, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.5em;
        font-size: x-small;
}

Свойство всплытия сокращает длину элемента до длины его самого широко содержимого, в нашем случае это пункт меню “Privacy Statement”. Также добавлена рамка со всех сторон меню, кроме лева, чтобы визуально отделить его от содержимого.

Чтобы выделить ссылки и отделить их от фона, зададим им свойства с помощью селектора потомка:

nav a {
        text-decoration: none;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
}

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

nav a {
        text-decoration: none;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        display: block;
}

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

nav a {
        text-decoration: none;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        display: block;
        padding: 0.75em;
}

И зададим изменение внешнего вида при наведении указателя мыши:

nav a:hover {
        background-color: rgba(0, 0, 0, 0.9);
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание простых рамок с использованием CSS
• Создание оформленных нумерованных списков с использованием CSS
• Создание эффекта отбрасывания тени с использованием CSS и SVG