Как да създадем падащо меню в HTML с подменю

Падащите менюта – известни още като “suckerfish” менюта – се създават с комбинация от HTML и CSS. HTML‑тата представлява списъци (

) и вложени списъци за подменюта, а CSS‑то оформя изгледа и контролира показването им чрез псевдо‑класовете :hover.

Стъпка 1 – Създаване на основния списък

Създайте менюто в HTML, използвайки елементите <ul> и <li>:

<ul id="menu">
    <li><a href="#">Връзка 1</a></li>
    <li><a href="#">Връзка 2</a></li>
    <li><a href="#">Връзка 3</a></li>
</ul>

Поставете <div class="clearfix"></div> преди затварящия елемент, за да разтегнете фона на менюто.

Стъпка 2 – Добавяне на подменю

Вмъкнете нов неупорядочен списък вътре в елемента <li>, който ще съдържа подменюто:

<ul id="menu">
    <li><a href="#">Връзка 1</a></li>
    <li><a href="#">Връзка 2</a>
        <ul>
            <li><a href="#">Подвързка 1</a></li>
            <li><a href="#">Подвързка 2</a></li>
            <li><a href="#">Подвързка 3</a></li>
        </ul>
    </li>
    <li><a href="#">Връзка 3</a></li>
</ul>

Стъпка 3 – Основно стилизиране на менюто

В CSS‑то премахнете маркерите и отстъпа от ляво:

#menu {
    list-style: none;
    padding: 0;
}

Стъпка 4 – Фон на лентата с менюто

#menu {
    background-color: #003366; /* тъмносин */
}

Стъпка 5 – Подреждане по хоризонтал

#menu li {
    float: left;
}

Стъпка 6 – Стил за линковете

За да могат линковете да имат паддинг, задайте им display: block:

#menu li a {
    display: block;
    padding: 8px 15px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

Стъпка 7 – Стилизиране на подменюто

#menu ul {
    position: absolute;
    list-style: none;
    padding: 0;
    display: none; /* скриване по подразбиране */
}

Стъпка 8 – Премахване на плаващото позициониране в подменюто

#menu ul li {
    clear: left;
}

Стъпка 9 – Показване при задържане

#menu li:hover > ul {
    display: block;
}

Допълнителен код

Класът за изчистване:

.clearfix {
    clear: both;
}

Съвети

• Добавете визуален ефект при задържане – например промяна на фоновия цвят: #menu a:hover { background-color: #0055aa; }
• След като менюто работи, можете да използвате jQuery плъгин за анимирани преходи при отваряне/затваряне.

URL:https://bg.whycomputer.com/soft/100207813.html