Перейти до основного вмісту

Просте випадне горизонтальне меню на блоках


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

Отже, принцип такий: кожний пункт меню розміщуємо в одному блоці, а підменю - в другому. Блок з підменю приховуємо, а потім, при наведенні вказівника мишки на перший блок забезпечимо відображення другого.

➊ Створюємо головний блок, в якому розмістяться ще два блоки нашого горизонтального меню: 

<div id="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

Назвемо головний блок container, а вкладені блоки - first і second:

Всередині кожного з блоків first і second розмістимо ще по одному блоку. В головних блоках буде назва пункту меню, а в підпорядкованих - підпункти. 

<div id="container">
    <div id="first">FirstBlock
        <div id="block1"></div>
    </div>
    <div id="second">SecondBlock
        <div id="block2"></div>
    </div>
</div>

Основну розмітку завершено.

❷ Переходимо тепер до детальних налаштувань створеного за допомогою таблиці стилів. Перш за все, задамо властивості головного блока container: 

#container {
    display: flex; /*дозволяємо гнучке розміщення блоків усередині,
щоб block1 і block2 були розташовані не один під одним, а по
горизонталі*/
    justify-content: space-between; /*організовуємо вирівнювання
вкладених блоків: лівий край першого блока - по лівому краю
контейнера, правий край правого блока - по правому краю контейнера,
а між блоками стільки місця, скільки дозволяє ширина браузера*/
    text-align: center; /*текстові написи в блоках вирівнюються
по центру*/
    height: 80px; /*висота контейнера 80 px*/
}

Уточнимо властивості блоків, що містяться у середині контейнера:

#first, #second {
    background-color: purple; /*встановлення тла блоків*/
    width: 49%; /*ширина блоків*/
    margin: auto; /*відступ від елементів сторінки до блоку нехай
браузер встановлює сам*/
    height: 80px; /*висота блоку, очевидно, повинна дорівнювати
висоті контейнера*/
    line-height: 80px; /*нехитрий спосіб вертикального центрування
тексту всередині блоку - встановити міжрядковий інтервал (до і 
після тексту) рівним висоті самого блоку*/
}

❸ Переходимо до розмічування підменю.

Організувати підменю, яке складається з декількох пунктів, можна різними способами. Задля прикладу зробимо список у блоку block1 за допомогою абзаців, а у блоку block2 за допомогою маркованого списку (хоча взагалі-то усі меню слід робити в одному стилі, щоб уникнути проблем з вирівнюванням тексту в блоках!).

У коді html-сторінки дописуємо таке: 

<div id="block">
    <div id="first">FirstBlock
        <div id="block1">
	    <p><a href="#">Item1</a></p><!--підменю абзацами-->
	    <p><a href="#">Item2</a></p>
	    <p><a href="#">Item3</a></p>
	</div>
    </div>
    <div id="second">SecondBlock
        <div id="block2">
            <ul><!--підменю списком-->
                <li><a href="#">Item4</a></li>
                <li><a href="#">Item5</a></li>
                <li><a href="#">Item6</a></li>
            </ul>
        </div>
    </div>
</div>

У block1 вирівняємо текст в абзацах по центру й зменшимо міжабзацний інтервал: 

#block1 p {
    text-align: center;
    margin: 10px;
    line-height: 20px;
}

☝Запис в таблиці стилів #block1 p означає, що зазначені нижче властивості стосуються усього, що помічено тегом <p> в межах блоку block1 і не поширюються на усі інші абзаци, розміщені на сторінці.

У block2 прибираємо маркери списку й усуваємо відступ від маркерів до тексту в списку: 

#block2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 40px;
}

...і усі гіперпосилання робимо без підкреслювання: 

#container a {
    text-decoration: none;
}

❹ Нарешті, найважливіше - розміщення на сторінці наших підменю:

#block1, #block2 {
    display: none; /*за промовчанням підменю НЕ показувати*/
    position: relative; /*позиція на сторінці - налаштовувана
(блок можна буде рухати туди-сюди за потреби)*/
    height: auto; /*висота блоку залежить від його вмісту*/
    padding: 10px; /*відступ блоку від інших елементів сторінки*/
    background-color: blue; /*колір тла*/
}

❺ І, насамкінець, - про поведінку блоків:

#first:hover > #block1 {
    display: inherit;
}

#second:hover > #block2 {
    display: inherit;
}

Цей запис означає, що блоки first і second ми віднесли до псевдокласу hover, який визначає стиль елемента тоді, коли на нього буде наведено курсор миші.

Що ж відбудеться з нашими блоками після наведення курсора? А от що. Після наведення курсора на блок first відбудеться зміна в стильових налаштуваннях блоку block1, а саме: значення його атрибута display (а воно у нього за промовчанням встановлене none), зміниться на те, яке встановлене у його батьківського елемента - блоку first (а воно там не вказане, значить, за промовчанням, у нього display: block). Таким чином block1 почне відображатися і триватиме це доти, доки курсор миші наведено на блок first. Як тільки курсор буде прибрано - усі стильові налаштування блоку block1 повернуться до початкових. З блоком second аналогічно.

Приклад роботи даного меню:

Мітки: