Часто в верстке нужно сделать выпадающий список, обычно для главного меню. Как решается такой вопрос? Конечно, с помощью javascript, и мы в общем-то все правильно делаем. Тем не менее, можно значительно упростить создание выпадающего меню и отказаться как от фреймворков, так и в общем от JS. Сейчас расскажу, как.

Как это работает

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

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

Остальным — добро пожаловать.

Создание меню

Сначала создадим список с основными пунктами и добавим по одному списку внутрь каждого из пунктов. Вложенные списки будут отображаться только при наведении курсора.

<ul class="dropdown">
 <li class="dropdown-top">
 <a class="dropdown-top" href="/">Британия</a>
 <ul class="dropdown-inside">
 <li><a href="/">Лондон</a></li>
 <li><a href="/">Бирмингем</a></li>
 <li><a href="/">Лидс</a></li>
 <li><a href="/">Шеффилд</a></li>
 <li><a href="/">Манчестер</a></li>
 </ul>
 </li>

 <li class="dropdown-top">
 <a class="dropdown-top" href="/">США</a>
 <ul class="dropdown-inside">
 <li><a href="/">Нью-Йорк</a></li>
 <li><a href="/">Лос-Анжелес</a></li>
 <li><a href="/">Чикаго</a></li>
 <li><a href="/">Хьюстон</a></li>
 <li><a href="/">Филадельфия</a></li>
 <li><a href="/">Финикс</a></li>
 <li><a href="/">Сан-Антонио</a></li>
 </ul>
 </li>

 <li class="dropdown-top">
 <a class="dropdown-top" href="/">Франция</a>
 <ul class="dropdown-inside">
 <li><a href="/">Париж</a></li>
 <li><a href="/">Марсель</a></li>
 <li><a href="/">Лион</a></li>
 <li><a href="/">Тулуза</a></li>
 <li><a href="/">Ницца</a></li>
 <li><a href="/">Нант</a></li>
 <li><a href="/">Страссбург</a></li>
 </ul>
 </li>

 <li class="dropdown-top">
 <a class="dropdown-top" href="/">Испания</a>
 <ul class="dropdown-inside">
 <li><a href="/">Мадрид</a></li>
 <li><a href="/">Барселона</a></li>
 <li><a href="/">Валенсия</a></li>
 <li><a href="/">Севилья</a></li>
 </ul>
 </li>

 <li class="dropdown-top">
 <a class="dropdown-top" href="/">Италия</a>
 <ul class="dropdown-inside">
 <li><a href="/">Рим</a></li>
 <li><a href="/">Милан</a></li>
 <li><a href="/">Неаполь</a></li>
 <li><a href="/">Турин</a></li>
 <li><a href="/">Палермо</a></li>
 </ul>
 </li>
</ul>

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

CSS

Чтобы все работало, нам потребуются стили, вот они:

ul.dropdown li { position: relative; }
 ul.dropdown,
 ul.dropdown-inside {
 list-style-type: none;
 padding: 0;
 }
 ul.dropdown-inside {
 position: absolute;
 left: -9999px;
 }
 ul.dropdown li.dropdown-top {
 display: inline;
 float: left;
 margin: 0 1px 0 0;
 }
 ul.dropdown li.dropdown-top a {
 padding: 3px 10px 4px;
 display: block;
 }
 ul.dropdown a.dropdown-top { background: #efefef; }
 ul.dropdown a.dropdown-top:hover { padding: 2px 10px 5px; }
 ul.dropdown li.dropdown-top:hover .dropdown-inside {
 display: block;
 left: 0;
 }
 ul.dropdown .dropdown-inside { background: #fff; }
 ul.dropdown .dropdown-inside a:hover { background: #efefef; }

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

Демо и скачать

    Отправить ответ

    73 Комментарий на "Как создать выпадающее меню на простом HTML без скриптов"

    Уведомлять
    avatar
    5000
    Yulia
    Гость

    Cкажите,почему подпункты странно выплывают слева? т.е. как анимация (как буд-то с левой части экрана приплывает на место) что за фигня..в вашем примере такого нету)

    Yulia
    Гость

    @Yulia, Проблема быстро решилась,как только написала:
    у меня в моем коде была строчка :
    transition: all .5s;

    rumit
    Гость

    Огромное спасибо автору! Статья очень помогла.

    heywait
    Гость

    Проходил мимо и не смог не отметить, что в этом куске

    ul.dropdown li.dropdown-top {
     display: inline;
     float: left;
     margin: 0 1px 0 0;
     }

    display: inline не играет совершенно никакой роли, так как использование float, отличного от none, предполагает, что display автоматически становится block

    Тани
    Гость

    Спасибо!!! Как здорово, что есть Вы, такой умный и добрый человек!! Легким движением руки решили мою проблему))) Я только начинающий пользователь, так сказать, и вот так мне гораздо проще понять механизм действия. Подскажите еще, пож, что надо поменять в css, чтобы меню распологалось по центру страницы?

    Тани
    Гость

    @Назар Токарь, че-то у меня не выходит((( видимо, мне совсем не дано((( а в какое точно место скрипта его надо вставлять?….

    Toka
    Гость

    Спасибо тебе, человек, обладающий знаниями мне нужными да и разрешив их использовать для всех нуждающихся. В том, что я нуждающийся в этом хтмл-коде я сразу понял, увидев этот гениальный по своей простоте и функциональности Этот код. Заменю им прежнюю тяжеловатую панель навигации на своём т.н. сайте. Всеххх благгг! В том числе и веб-денежных! Ну, вот что я хотел и написал тут.

    Toka
    Гость

    с этим меню каждая страница полегчала на 20 Кб!А это в наш век совсем не шутки. Осталось, если получится покопавшись в стилях изменить лимит на ширину выпадающего меню, чтобы каждая ссылка было в одной строчке, а здесь работает перенос слов, что не есть замечательно. А вот и картинка имеется:comment image Хочу изменить цвет и шрифт ссылок, фон тоже, подчёркивание может оставлю. Но я же не программист. В хорошем смысле этого понятия. Я даже не концессионист (но это к делу не относится).
    С уважением ко всем думающим индивидам, Тока(рь) Эвон…

    Toka
    Гость

    @Назар Токарь, спасибо за совет, только смысл выпадающего меню в том, чтобы он выпадал. Можно пояснить для меня точнее смысл этого правила white-space: nowrap;?

    Toka
    Гость

    @Назар Токарь, Понятно вот теперь. Однако я обнаружил досадный недостаток этого меню относительно моего сайта – оно не отображается поверх страниц, другой-же аналогичный не имеет этого недостатка.Сайт делаю конструктором Serif 5. Использовал от вашего меню код в head. Работает нормально, только на некоторых страницах шрифт увеличивается, видимо надо почистить их.
    Не земляки ли мы? Родом я из Донецка, хотя живу сейчас в Испании. Привет из дневного пекла-38 град в тени…

    Toka
    Гость

    @Назар Токарь, Да, я назначал его средствами Serifa, не получалось, другой аналогичный лёг наверх, мистика, ничего не изменял в настройках… Попробую в другом месте

    Webso
    Гость

    В IE8 тоже меню не выпадает. Для IE можно как-то доработать?

    Alex
    Гость

    @Назар Токарь, спасибо! респект вам за труды, я Ваш фанат навеки:)

    Вопрос: как сделать это меню для планшетов и телефонов – 1 нажатие выпадает меню, 2 нажатие можно выбрать пункт. Заранее спасибо.

    Androdeni
    Гость

    в ie6 менюшка вообще не выпадает
    в ie7 выпадает, но со сдвигом вправо
    если на 6-й можно забить, то 7-м к сожалению еще пользуются

    wpDiscuz