Как создать выпадающее меню на простом HTML без скриптов
Я расскажу, как можно создать выпадающий список без использования скриптов, на одном HTML и CSS. Работает в любом браузере, создается за пару минут. Прошу-с.
Часто в верстке нужно сделать выпадающий список, обычно для главного меню. Как решается такой вопрос? Конечно, с помощью 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; }
Как видите, решение очень простое и полностью кроссбраузерное. Желаю успехов. Вопросы по уроку жду в комментариях.
Немає коментарів:
Дописати коментар