Здравствуйте! Сегодня в этом блоге вы узнаете, как создать адаптивное меню-аккордеон, используя только HTML и CSS. Ранее я поделился блогом о том, как создать раздел адаптивных отзывов, и теперь пришло время создать аккордеон, который в основном используется при создании раздела часто задаваемых вопросов на веб-сайтах.
Меню-аккордеон представляет собой вертикально расположенный список заголовков или элементов, по которому можно щелкнуть, чтобы отобразить или скрыть связанное с ними содержимое. В этом меню аккордеона показаны четыре заголовка аккордеона, а связанное с ними содержимое скрыто. По умолчанию отображается содержимое первого заголовка, а когда вы нажимаете на другую вкладку, отображается содержимое этой метки.
Эти вкладки-аккордеоны управляются с помощью HTML <input type="radio">, поэтому мы можем одновременно отображать содержимое только одного заголовка. Это означает, что когда вы разворачиваете содержимое второго заголовка, содержимое первого заголовка будет автоматически свернуто. Если вам трудно понять, о чем я говорю. Вы можете посмотреть полный видеоурок.
В видео вы видели меню «аккордеон» и то, как его содержимое разворачивается и сворачивается. Я использовал значки Font Awesome (+ и -), чтобы сообщить или указать пользователю, что контент в данный момент свернут или развернут. Это программа на чистом CSS, и если вы новичок, вы также можете создать аккордеон такого типа и использовать его в своих проектах и HTML-страницах.
Эта программа возможна только с HTML-тегом <input type="radio"> и <label>. Вы также можете использовать <input type="checkbox"> для создания этого аккордеона, но когда вы используете флажок, вы не можете автоматически свернуть предыдущую развернутую вкладку при нажатии на новую вкладку, что означает, что вам придется скрывать или показывать контент вручную, если вы используете флажок, но в переключателе ранее открытая вкладка автоматически закрывается при открытии новой вкладки.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете загрузить исходный код, нажав кнопку «СКАЧАТЬ». Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, оставьте комментарий ниже.
0 Комментарии