выпадающее меню html · GitHub
| <nav > | |
| <button><i></i> | |
| </button> | |
| <ul> | |
| <li><a href=»#» target=»_blank»>Аренда техники</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> | |
| <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> | |
| <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> | |
| </ul> | |
| </li> | |
| <li><a href=»#» >О компании</a></li> | |
| <li><a href=»#» >Контакты</a></li> | |
| <li ><a href=»» title=»Скачать каталог» ><i aria-hidden=»true»></i></a></li> | |
| </ul> | |
| </nav> |
Создать раскрывающееся меню CSS с использованием HTML 5
Меню CSS создаются с использованием форматирования и позиционирования стандартного HTML.
Базовая структура представляет собой просто вложенный список. Видимая часть меню — это самый внешний список, а раскрывающиеся части — это подсписки. Каждый элемент в списке является ссылкой на контент. Соответствующее форматирование листа изменяет отображение подменю в зависимости от того, находится ли указатель мыши над элементом внешнего списка. В зависимости от используемого метода подменю можно настроить так, чтобы оно отображалось за пределами экрана или вообще не отображалось, если только указатель мыши не находится над «Главным заголовком». Когда указатель мыши наводится на заголовок, внутренний список отображается, перекрывая внешний, так что главная страница «выпадает».
На самом деле, навигация с помощью клавиатуры в меню такого типа практически невозможна, потому что, хотя клавиша табуляции перемещает «фокус» на элементы подменю, пользователь не может узнать, какой элемент выбран в данный момент, или даже какие предметы есть в наличии. Единственные элементы, к которым можно надежно получить доступ, — это элементы внешнего списка.
Шаг 1. Откройте Macromedia Dreamweaver.
Шаг 2. Затем создайте новый документ, выбрав в меню «Файл» пункт «Новый документ».
Нажмите кнопку «Создать».
Шаг 3: Тип документа HTML 5:
-
- <голова>
-
-
Название - <тело>
- Создайте здесь текст
Шаг 4: Определите часть тела и задайте содержимое раскрывающегося меню CSS:
Код
- <ул.>
-
-
Шаг 5: Примените таблицу стилей раскрывающегося меню:
Код
Шаг 6: Напишите полный код для разработанного простого выпадающего меню CSS, использующего инструменты HTML 5.
Полное приложение:
Вывод
Выпадающее меню CSS — руководство по Dreamweaver
Поделиться этой статьей Dreamweaver:
Подробнее…
H Вот пример раскрывающегося списка css горизонтальное меню, которое вы можете создать с минимальной разметкой html и небольшим количеством CSS. Эту горизонталь можно создать и оформить менее чем за 15 минут, если вы будете следовать приведенным ниже инструкциям с полными примерами кода!
1. Добавьте HTML-код для раскрывающегося меню CSS
Для создания горизонтального раскрывающегося меню или меню раскрывающегося списка требуется минимальная HTML-разметка. Если вы никогда раньше не использовали технику меню со списком навигации, поначалу это может показаться немного запутанным. Выпадающая навигация использует метод, который берет неупорядоченный список с другим неупорядоченным списком, вложенным в него. Вот html-код горизонтального выпадающего меню, которое вы должны скопировать на свою веб-страницу:
<дел>
В этом случае имя ссылки — «продукты», и она находится внутри нулевой ссылки.
clearFloat {
ясно: оба;
маржа: 0;
заполнение: 0;
}
/* Исправление отображения IE7 */
#navMenu ul li {
дисплей: встроенный;
}
Вы должны поэкспериментировать с цветовой схемой вашего раскрывающегося меню css, и таким образом вы сможете понять, как эффекты меню css rollover используются с каждым селектором, присутствующим в стилях, которые вы вставили в свой файл css.
com Неограниченное количество доменов
04.2010 — видеоруководство — Часть 1
12.2010 — Видеоруководство — Часть 1
13.2010 — Видеоурок, часть 1