Как сделать выпадающий список на сайте

Как сделать выпадающий список на сайте

Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.

Выпадающий список для сайта

Не самое простое решение я рассматривал в январе этого года 🙂 :

Посмотреть примерСкачать

Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .

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

Плавная анимация предусмотрена только в последних браузерах. Также для правильного отображения было добавлено несколько строчек JavaScript. И так, приступим.

Шаг 1. HTML

Для начала рассмотрим простую разметку. Для этого мы будем использовать контейнер с ul для данного выпадающего списка.

Шаг 2. JavaScript

Для работы нам необходимо несколько строчек javascript. Данный сценарий переключает класс .active, когда щелкаете по оболочке. Следует понимать, что если у оболочки нет класса .active, то данный сценарий добавляет его и если он присутствует,или наоборот-удаляет его.

Вторая часть кода служит элементом для сворачивания списка, при нажатии курсора в другой части экрана, то есть список теряет свой класс .active.

Пример 1

Рассмотрим более детально первый пример.

Шаг 1. HTML

Для данного списка нам необходимо несколько элементов. Также поместим несколько элементов в выпадающий список.

C разметкой закончили, приступим к стилям.

Шаг 2. CSS

Организацию стилей мы начнем из создания оболочки:

Далее добавим небольшую стрелку справа с псевдо-элементом.

Также добавим небольшую кнопку, которая будет активна при выпадающем списке.

Когда мы задали позиционирование выпадающего списка и поместили под кнопкой придав ему параметр top: 100%, кроме этого список скрытный, мы уменьшили его непрозрачность до 0. Далее установим некоторые стили для выпадающего списка.

Далее нам необходимо задать параметры когда щелкаете по кнопке, чтобы показать список.

Шаг 3. JavaScript

Теперь мы заставим кнопку выводить некоторые значения значение:

С этим примером мы закончили, приступим к следующему.

Пример 2

Далее мы рассмотрим список, который нам предложит войти в профиль через аккаун различных популярных социальных сетей.

Шаг 1. HTML

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

Читайте также:  Как проверить пинг модема

Шаг 2. CSS

Теперь рассмотрим стили обложки, они мало чем отличаются от первого примера.

Также создаем стрелку, аналогичную можно наблюдать в первом примере.

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

Следует обратить внимание, что мы будем использовать переход, который заставит список постепенно появляться и исчезать. Применим некоторые стили для списков и значков.

К ссылкам мы добавили разноцветные полоски, которые будут придавать списку большей яркости. Далее мы добавим направление стрелки при активном и пассивном состоянии списка.

Шаг 3. JavaScript

Оживим наши элементы с помощью JavaScript.

Пример 3

Данный выпадающий список чаще всего используется на сайтах. Мы детально рассмотрим как его осуществить у себя на сайте.

Шаг 1. HTML

C разметкой закончили, перейдем к стилям.

Шаг 2. CSS

В данном примере мы будем использовать границы, тени и закругленные углы, также мы добавим указательную стрелку.

Рассмотрим стили выпадающего списка и его подпунктов.

Шаг 3. JavaScript

C помощью javascript мы изменим значение выбранной кнопки.

С этим примером закончили, приступим к следующему.

Пример 4

В данном примере мы создадим список с элементами необходимых дел.

Шаг 1. HTML

Мы добавили некоторые ссылки и значки, чтобы скрасить список.

Шаг 2. CSS

Рассмотрим общие стили списка.

Теперь установим отступ слева, чтобы выделить место для красной линии.

Некоторые стили для выпадающего списка.

Установим верхние пространство, для этого установим отступ со значением в 1px, Слева установим в -1px чтобы вытянуть позицию выпадающего списка.

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

Теперь настроим красные полоски по бокам, Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Мы рассмотрим оба способа.

Некоторое дополнительное состояние.

Шаг 3. JavaScript

Пример 5

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

Шаг 1. HTML

С разметкой закончили, перейдем к стилям.

Шаг 2. CSS

Зададим общие параметры для списка.

Активное состояние для списка.

В активном состоянии, мы устанавливаем max-height выпадающего списка к 400px.

Шаг 3. JavaScript

Также добавлена поддержка устаревших браузеров.

Вот и все. Готово!

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

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по теме CSS3

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.

В данном уроке мы рассмотрим как создать весьма простые ползунки при нажатии на которых будет дополнительно разворачиваться публикация, с желаемым нам контентом, при этом происходит простая плавная анимация. По умолчанию наши блоки с ползунками будут немного отображаться на поверхности, это придаст им большего реализма. Такая стилизация подойдет для блоков которые вы хотите скрасить на сайте, при этом в нем должно изначально содержаться текстовая или другая информация. Все выглядит очень просто, и практично.

Читайте также:  Как перейти на латиницу на клавиатуре

Создаем адаптивный слайдер товаров с помощью плагина анимации Sequence.js. В статье подробно описываются все нюансы инструмента и какие параметры используются в слайдере. Хороший вариант презентации своих продуктов.

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

Раскрутка в соцсетях

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

Хотите уникальный сайт? Ознакомьтесь с нашими ценами!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Форма обратной связи

Все поля обязательны для заполнения!

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Дата публикации: 2018-05-15

От автора: реализация выпадающего меня с помощью HTML и CSS, обеспечение необходимого уровня доступности навигации, фокусировка пунктов, поддержка браузерами — об этом в статье.

CSS становится все более мощным, и с помощью таких функций, как CSS-сетка и пользовательские свойства (также называемые переменные CSS), мы можем реализовать многие действительно креативные решения. Некоторые из этих решений имеют своей целью не только сделать Интернет красивее, но и сделать его более доступным, и улучшить опыт создания доступных стилей. Я определенно придерживаюсь этой точки зрения!

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

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Читайте также:  Как установить драйвера на геймпад

Давайте посмотрим, можем ли мы создать одно из этих меню с помощью только CSS. Мы создадим список ссылок внутри компонента навигации следующим образом например:

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

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

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

Проблема

Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете — это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=»navigation» — это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.

Вы можете навести курсор на любой из элементов списка и четко увидеть, который из них выделен фокусом, но это не так при перемещении по навигации через клавишу табуляции. Попытайтесь сделать это в приведенном выше примере. Вы теряете возможность визуально отслеживать, где сейчас фокус. Когда вы выделяете фокусом элемент Two в главном меню, вы можете видеть, где сейчас находится фокус, но когда вы переходите через клавишу табуляции к следующему элементу (одному из пунктов подменю), этот фокус исчезает.

Теперь важно отметить, что теоретически вы выделили фокусом элемент подменю, и программа чтения с экрана сможет проанализировать это, считав Sub-One, но пользователи клавиатуры не смогут определить, что сейчас происходит.

Причина заключается в том, что, хотя мы настраиваем состояние наведения указателя для родительского элемента, когда мы переходим от родительского элемента к одному из элементов списка внутри него, мы теряем этот стиль. Это логично с точки зрения CSS, но это не то, что нам нужно.

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: «:focus-inside»

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

Ссылка на основную публикацию
Как поставить старую версию скайпа
Программа Skype, как и любой другой активно развивающийся софт, постоянно обновляется. Однако не всегда новые версии выглядят и работают лучше...
Как повернуть диаграмму на 90 градусов
Научимся вращать (поворачивать) график функции относительно начала координат. Для примера используем график функции y=x*sin(10*x). Координаты (x'; y') в результате поворота...
Как повернуть купольную камеру видеонаблюдения
Страница 12 5 Регулировка положения видеокамеры Положение купольной видеокамеры можно регулировать по двум осям. Следя за изображением на мониторе, отрегулируйте...
Как поставить фотографию на контакт в андроид
На любом смартфоне реализована возможность установки изображения на телефонный контакт. Оно будет отображаться при поступлении входящих звонков от этого контакта...
Adblock detector