#10 — Выпадающее меню и списки
itProger Видеокурсы Изучение технологии Bootstrap (верстка сайта) #10 — Выпадающее меню и списки
Bootstrap HTML5Начиная с этой лекции мы приступаем к изучению Bootstrap стилей в связке с JavaScript скриптами. Мы изучим создание выпадающих списков, а также меню за счёт заранее подготовленных JavaScript скриптов.
Исходный код
Шапка с выпадающими списками
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap уроки</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Навигация</span> <span></span> <span></span> <span></span> </button> <a href="#">itProger</a> </div> <div> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> <li></li> <li><a href="#">Еще одна отдельная ссылка</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Поиск"> </div> <button type="submit">Отправить</button> </form> <ul> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </li> </ul> </div> </div> </nav> <div> <button data-toggle="dropdown">Список <span></span></button> <ul> <li>Заголовок 1</li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jQuery</a></li> <li></li> <li>Заголовок 2</li> <li><a href="#">Javascript</a></li> </ul> </div> <!-- jQuery --> <script src="https://ajax. 
googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
Онлайн редактор кода
Загрузка…
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть
# Веб сайты
Видеокурс по PHP, MySQL / Создание динамического сайта# Веб сайты
Уроки Python Django / Создание сайта12 уроков
# Веб сайты
Вёрстка адаптивного сайта на Bootstrap 46 уроков
# Веб сайты
Создание блога на Ruby On Rails8 уроков
# Веб сайты
Современная вёрстка адаптивного веб-сайтаМы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта.
Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.
Хорошо
Настройки
Выпадающее меню на CSS3
Горизонтальное меню с выпадющими подпунктами с использованием css3.
Размытое меню на CSS3
Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.
Дерево меню на jQuery
Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.
JQuery плагин, позволяющий сделать горизонтальную навигацию, которая будет занимать всю ширину контейнера в котором находится. Добавлена также и поддержка IE7.
Горизонтальное меню с выпадающими подпунктами
Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS.
В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.
Меню с эффектом подпрыгивания
Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.
Выпадающее адаптивное меню
Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.
FlexSlider — адаптивный слайдер
Отличный адаптивный jQuery слайдер — FlexSlider. Включает возможность навигации bullet (точками), позволяет использовать миниатюры вкупе с навигацией, возможность вставки видео в качестве слайда, опция карусели, а также плагин имеет небольшое API.
Многоуровневое выпадающее меню
Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.
Многоцветное меню на CSS3
Горизонтальное выпадающее меню, фишка которого состоит в том, что выпадающие блоки могут изменять цвет на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на jаvascript.
Выпадающее CSS3 меню
Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.
Extremes — круглая навигация
Extremes — это простой и легкий jQuery плагин позволяющий размещать элементы по кругу. Особое внимание уделяется разборчивости — текст никогда не будет перевернут вверх ногами. На его основе можно создать круглую навигацию, как в нашем примере.
Популярные статьи
Реклама
Опрос
В редакторе кода я предпочитаю тему оформления
Темную
Светлую
Новости
Подпишись
Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.
Разное
Реклама
Свежие статьи
Как разработать раскрывающееся меню HTML5 и CSS3 (учебное пособие)
Раскрывающееся меню является основной функцией большинства современных веб-сайтов. Это группа пунктов навигационного меню, в котором нажатие на элемент раскрывает раскрывающийся список. Поскольку меню расширяется вниз, оно называется «выпадающим меню».
В этом уроке мы объясним, как вы можете разработать свои собственные раскрывающиеся меню с помощью кода CSS3 и HTML5. Мы не будем использовать JavaScript или jQuery!
Итак, начнем.
Разметка HTML
Шаг 1:
Создайте документ HTML и добавьте в него следующую строку кода.
<голова> <мета-кодировка="UTF-8">Выпадающее меню <тело>
Шаг 2:
Создайте тег
Внутри тега
Дайте этому списку идентификатор «меню» и добавьте некоторые элементы списка в неупорядоченный список.
Теперь ваш код должен выглядеть следующим образом.
<тело> <навигация> <ул>
Это будет меню верхнего уровня.
Он будет содержать четыре элемента: «Главная», «О нас», «Услуги» и «Свяжитесь с нами».
Шаг 3:
В элементах списка «О программе» и «Услуги», созданных на шаге 2, создайте один неупорядоченный список для каждого из этих элементов и введите указанные ниже элементы списка во вложенный неупорядоченный список.
Теперь код в теле должен выглядеть следующим образом.
<тело> <навигация> <ул>
Если HTML-страница с приведенным выше кодом просматривается в браузере, она будет выглядеть так:
Стиль CSS
Однако мы хотим, чтобы в одной строке отображались только элементы верхнего уровня, а при наведении курсора над этими элементами вложенные элементы списка должны отображаться в виде раскрывающегося меню.
Это будет сделано через CSS.
Создайте новый файл CSS с именем «style.css» и поместите его в тот же каталог, где находится HTML, созданный на начальных этапах.
Добавьте разметку, показанную ниже, в файл CSS. Разметка была объяснена под каждым фрагментом кода.
Шаг 4:
ул{
заполнение: 0;
маржа: 0;
тип стиля списка: нет;
} Эта приведенная выше разметка удалит отступы и поля из всех ненумерованных списков из HTML-кода.
Шаг 5:
ul#menu li{
фон: #47a3da;
плыть налево;
} Приведенная выше разметка говорит, что нужно перейти к ненумерованному списку с идентификатором «menu» и оформить его элементы таким образом, чтобы цвет фона стал синим, а все элементы списка были перемещены влево.
Это расположит все элементы верхнего уровня в одной строке. Он также удаляет маркеры из списка.
Шаг 6:
ul#menu li a{
цвет: #000000;
дисплей: блок;
отступ: 10px 25px;
текстовое оформление: нет;
нижняя граница: 2px сплошная #000000;
} Приведенный выше код говорит, что перейдите к неупорядоченному списку с идентификатором «меню», стилизуйте все ссылки внутри элементов списка, измените цвет на черный, измените стиль отображения на блокировку и добавьте верхнее и нижнее отступы по 10 пикселей.
в то время как правое и левое заполнение до 25px.
Далее, для text-decoration установлено значение none, что удалит подчеркивание ссылки.
Наконец, нижняя граница оформлена.
Шаг 7:
ul#menu li a:hover{
фон: #72caff;
} Эта разметка изменит цвет ссылок при наведении курсора на элементы списка верхнего уровня.
Шаг 8:
ul#menu li ul li{
поплавок: нет;
} Вышеупомянутый фрагмент кода говорит о том, что не плавают элементы списка внутреннего неупорядоченного списка.
ул#меню ли ул{
положение: абсолютное;
дисплей: нет;
} Вышеупомянутая разметка скроет внутренний неупорядоченный список и установит его позицию в абсолютную.
ул{
ul#menu li:наведите ul{
дисплей: блок;
}
Наконец, приведенная выше разметка заставит элементы внутреннего неупорядоченного списка появляться при наведении курсора на один из элементов списка верхнего уровня.
Теперь, если вы добавите ссылку на этот файл CSS в файл HTML, который вы создали в первых трех шагах, а затем обновите страницу, вы сможете увидеть раскрывающееся меню.
Выберите раскрывающийся список в HTML5 — Технический фундамент
Как использовать элемент выбора для создания раскрывающегося списка в HTML5?
Предыдущее сообщение
Следующее сообщение
Выпадающий список:
Выпадающий список используется для выбора элементов в списке. Он используется для выбора одного элемента в списке. В случае, если мы хотим выбрать несколько элементов, нам нужно добавить несколько
Выпадающий список для выбора одного элемента
<выбрать имя="веб-сайт">
В приведенном выше фрагменте кода мы использовали элемент для создания раскрывающегося списка, а также использовали тег
— используется для создания заголовка значений параметров
<значение параметра> — используется для создания значений в списке
вывод
Список для выбора нескольких элементов:
Используется для выбора нескольких элементов в списке
Список для выбора нескольких элементов
<выберите имя = "веб-сайт" несколько = "несколько">
Окно списка для выбора нескольких элементов
В приведенном выше фрагменте кода мы использовали элемент для создания списка, а также использовали тег
используется для выбора нескольких элементов в раскрывающемся списке
вывод
Раскрывающийся список для выбора одного элемента из нескольких элементов
Используется для выбора одного элемента в нескольких списках
Размер используется для отображения заданного списка номеров и прочего после прокрутки
<выбрать имя="веб-сайт" размер="4">
ListBox для выбора одного элемента
В приведенном выше фрагменте кода мы использовали элемент для создания списка, а также использовали тег