Створення горизонтальних та вертикальних меню

Наявність меню на сайті, практично в усіх випадках, є обов'язковим його компонентном, оскільки саме воно виконує важливу роль у навігації по сайту. В залежності від компоновки сайту, це меню може бути горизонтальним або вертикальним (хоча, на деяких сайтах бувають присутні й обидва його види). Розберемо основні підходи щодо його створення.

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

Використання переліку гіперпосилань

Найпростішим способом створити вертикальне меню є такий: наставити гіперпосилань, які приводитимуть на інші сторінки сайту, а потім "підправити" усе це за допомогою стилів.

В потрібному місці нашого сайту розміщуємо код списку:

<div class="vertical-menu">
    <a href="#" class="active">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
</div>

Home Link 1 Link 2 Link 3 Link 4

Посилання з'явилися. тепер підкоригуємо їх стилями:

.vertical-menu {
    width: 200px; /*ширина всього меню*/
}
.vertical-menu a { /*правимо усе, позначене тегом a*/
    background-color: #eee;
    color: black;
    display: block; /*завдяки цьому рядку, кожне посилання буде відображатися з нового рядка - так горизонтальний список перетвориться на вертикальний*/
    padding: 12px;
    text-decoration: none; /*прибираємо підкреслення у гіперпосилань*/
}
.vertical-menu a:hover { /*те посилання, на яке буде наведено вказівник миші...*/
    background-color: #ccc; /*...буде змінювати колір*/
}
.vertical-menu a.active { /*виділення пункту меню, який відповідає відкритій в даний момент сторінці*/
    background-color: #4CAF50;
    color: white;
}

Використання маркірованого списку

Якщо використати не просто перелік гіперпосилань, а список типу <ul>, тоді, принаймні, не доведеться "перешиковувати" його елементи по вертикалі, оскільки складові списку розміщені по вертикалі уже за промовчанням.

<div class="vertical-menu2">
    <h3 class="menu-title">Main Menu</h3>
    <ul class="menu-list">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
    </ul>
</div>

Ось, що у нас вийде без стильової правки:

Main Menu

• Link 1
• Link 2
• Link 3
• Link 4

Тепер застосуємо до нашого списку стилі:

.vertical-menu2 {
    padding-left: 30px;
    font-family: 'Roboto', sans-serif;
}
.menu-title {
    text-transform: uppercase; /*текст "капсом"*/
    letter-spacing: 2px; /*інтервал між буквами в заголовку*/
    color: #222222;
    font-size: 16px;
    padding-left: 15px;
    margin-bottom: 15px;
    border-left: 2px solid #b99d61; /*налаштування лівої межі біля тексту заголовка - товщина, стиль (суцільна лінія) і колір*/
}
.menu-list {
    padding: 0;
    list-style: none; /*прибрати маркери*/
}
.menu-list a:before { /*налаштування того, що буде перед елементом списку*/
    margin-right: 14px; /*...а перед списком буде відступ в 14 px*/
}
.menu-list a {
    text-decoration: none; /*прибирається підкреслювання гіперпосилань*/
    display: block; /*перетворення елементів списку на блоки...*/
    padding: 6px 0; /*...щоб налаштувати вертикальні відступи*/
    letter-spacing: 1px; /*інтервал між символами*/
    font-weight: 300; 
    color: #444444;
}
.menu-list a:hover { /*по наведенню курсора миші...*/
    color: #b99d61; /*...елемент списку змінює колір...*/
    font-weight: bold; /*...і виділяється жирним накресленням, за рахунок чого створюється ефект збільшення пунктів меню*/
}

Горизонтальне меню

Знову скористаємося маркірованим списком:

<div class="navigation">
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
    </ul>
</div>

• Link 1
• Link 2
• Link 3
• Link 4

А тепер знову "підправляємо":

.navigation {
    background-color: #222222;
    border-color: #101010;
    height: 60px;
}
.navigation ul li {
    list-style-type: none; /*видаляємо маркери*/
}
.navigation ul { /*вирівнювання елементів списку по лівому краю*/
    margin: 0;
    padding: 0;
}
/*.navigation ul { /*якщо треба вирівняти елементи списку по центру*/
    width: 60%;
    margin-left: 35%; /*значення width і margin-left підбираємо експериментальним шляхом*/
}*/
.navigation li {
    float: left; /*Ключовий рядок для перетворення вертикального списку на горизонтальний! Кожний елемент списку вирівнюється по лівому краю, інші обтікають його справа*/
    width: 100px;
}
.navigation a {
    display: block;
    color: #9d9d9d;
    line-height: 3.8em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.navigation li a:hover { /*по наведенню курсора миші...*/
    color: maroon; /*...елемент меню змінює колір тексту...*/
    background-color: gold; /*...і колір тла*/
}

Звісно, це далеко не всі варіанти оформлення меню, то ж, якщо вам хочеться чогось іншого - в неосяжних просторах Інтернету можна знайти такий, який буде вам до вподоби.

Усе. Розважайтеся! 😃 І натхнення вам у вашому сайтотворенні!