Как сделать выпадающее меню в html: Как создать выпадающее меню

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

?

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

« previous entry | next entry »

Apr. 7th, 2014 | 02:13 am

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

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

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

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

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

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

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

<ul>
 <li>
 <a href="/">Британия</a>
 <ul>
 <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>
 <a href="/">США</a>
 <ul>
 <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>
 <a href="/">Франция</a>
 <ul>
 <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>
 <a href="/">Испания</a>
 <ul>
 <li><a href="/">Мадрид</a></li>
 <li><a href="/">Барселона</a></li>
 <li><a href="/">Валенсия</a></li>
 <li><a href="/">Севилья</a></li>
 </ul>
 </li>
 <li>
 <a href="/">Италия</a>
 <ul>
 <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; }

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

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

Назар Токарь
Читайте в блоге: http://dedushka. org/uroki/6425.html

Tags: уроки

Link | | Share | Flag

Как сделать выпадающее меню в HTML?

Обзор

Выпадающее меню в HTML представляет собой список опций, отображаемых только тогда, когда пользователь взаимодействует с меню, либо щелкнув меню, либо наведя курсор на меню. Итак, когда пользователь щелкает или наводит курсор, меню опускается вертикально или «выпадает» вниз с параметрами, видимыми пользователям, а когда пользователь отключается от меню, оно снова исчезает в исходном состоянии.

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

Что мы создаем?

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

• Мы научимся создавать раскрывающийся список в HTML.
• Также остановимся на стилях с использованием CSS .
• Впоследствии мы создадим красивое выпадающее меню.
• Мы также обсудим, как сделать выпадающее меню с возможностью наведения курсора мыши вместо меню, на которое можно нажать.
• Мы можем установить значение по умолчанию для раскрывающегося списка. Итак, мы создадим раскрывающийся список со значением по умолчанию.
• В конце мы увидим, как сделать выпадающее меню с несколькими вариантами выбора с примерами.

Тег Select

Тег select используется для создания выпадающего меню в HTML. Мы используем тег option в теге select для добавления элементов в раскрывающееся меню. Прежде чем создавать раскрывающийся список, давайте обсудим атрибуты тега select.

Атрибуты тега выбора

Атрибуты тега select:

• disabled: Мы можем использовать отключенный атрибут с тегом select, этот атрибут, если он указан с параметром, отключает этот параметр и не позволяет пользователю выбрать его.
• имя: Имена назначаются таким образом, чтобы мы могли использовать их для ссылки на данные при их отправке на сервер.
• несколько: Этот атрибут используется для того, чтобы пользователь мог выбрать несколько опций из выпадающего меню, обычно пользователь может выбрать только одну опцию, но с помощью этого тега можно выбрать более одной опции.
• required: Обязательный атрибут тега select используется в качестве валидатора, это гарантирует, что пользователь выбирает значение перед отправкой формы.
• размер: Атрибут размера указывает браузеру, сколько опций будет отображаться в раскрывающемся списке одновременно.
• autofocus: Этот атрибут используется для того, чтобы выпадающее меню в HTML автоматически получало фокус при загрузке страницы.

Выпадающее меню в HTML создается с помощью выберите тег . Процесс ниже показывает, как мы можем создать выпадающее меню в HTML:

Создать Div

Мы создаем div для раскрывающегося списка, чтобы мы могли легко ссылаться на него при применении CSS.

 
 <дел>
 

Создать заголовок

Теперь мы создадим заголовок, чтобы показать, о чем раскрывающийся список.

 
  
ВЫБЕРИТЕ ТЕХНОЛОГИЮ
 
 

Создайте Div для включения тега Select

Теперь мы создаем div, чтобы мы могли заключить тег select и параметры с этим классом и могли легко применить CSS.

 
 <дел>
 

Добавьте тег выбора

Теперь создайте тег выбора с именем и атрибутом id для тега выбора. Код будет выглядеть так:

 
 
 
 Добавить параметры 
 Последний шаг — добавить параметры, поэтому для добавления параметров в раскрывающееся меню в HTML мы используем тег option. Добавляем опции 
  между открывающим и закрывающим тегом выбора , и мы можем добавить любое количество параметров в раскрывающийся список.
  Пример 
 
 
    CSS
    Javascript
    PHP
     NET">ASP.NET
    HTML

 

Объединение всего вместе

 
 


<тело>
  <дел>
     
ВЫБЕРИТЕ ТЕХНОЛОГИЮ
 
    <дел>
      <выбрать имя="выбрать">
        

  
CSS
        Javascript
        PHP
        ASP.NET
        HTML