CSS акордеоните се използват широко за разширяващи се и сгъваеми менюта, фрагменти, изображения, видеоклипове, често задавани въпроси, списъци и откъси от статии. Можете лесно да ги създадете с помощта на HTML, CSS и JavaScript (или jQuery). Създаването на акордеони само за CSS е малко предизвикателна задача, но е много полезно в среди с изключен JavaScript.
В това ръководство ще научите стъпка по стъпка подход за създаване на акордеон само за CSS.
Създаване на основен акордеон само с HTML
Ако вашият приоритет е създаването на достъпен акордеон с помощта на HTML, и етикетите са правилният начин. Няма значение кой език за програмиране използвате, акордеонът само с HTML ще остане непокътнат. Създавам маркирайте като родител и въведете въпроса в a етикет. Напишете описателен отговор в а етикет. Повторете процеса за произволен брой често задавани въпроси.
ЧЗВ 1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!
ЧЗВ 2
Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur.
ЧЗВ 3
Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi и eligendi hic reprehenderit repellendus quos!
Оформяне на акордеона
Можете да стилизирате акордеона, като регулирате Цвят на фона, граница-радиус, марж, подплата, и т.н.
тяло {
семейство шрифтове: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
максимална ширина: 30rem;
марж: 1.5rem auto;
}
резюме {
шрифт-тегло: 600;
цвят: rgb (255, 255, 255);
цвят на фона: rgb (7, 185, 255);
подплата: 1.2rem;
поле-долу: 1.2rem;
радиус на границата: 0.5rem;
курсор: показалец;
}
Изход:
Единственото ограничение е, че няма да имате контрол върху всяка част от кода. HTML структурата може да бъде променена, но не можете да създадете персонализиран акордеон. Затова нека изградим персонализиран раздел с често задавани въпроси, използвайки усъвършенстван CSS.
Създайте своя персонализиран раздел с често задавани въпроси
Има два популярни метода за създаване на персонализиран акордеон само за CSS. Можете да използвате квадратчета за отметка или радио бутони; ще обясним и двата метода.
Използване на метода на квадратчето за отметка
Методът за отметка използва квадратче за отметка като входен тип. Всеки път, когато потребител избере раздел, той поставя отметка в квадратчето и то се отваря. Можете да отваряте няколко раздела едновременно с помощта на метода за отметка, подобно на това как можете да маркирате повече от едно квадратче за отметка в HTML форма.
HTML
Персонализиран CSS само акордеон (ЧЗВ)
Използване на метода за отметка
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
pretpostavljanda a, nesciunt eum nobis eaque, exercitationem differentio alias ullam quia. Corrupti beatae
necessitatibus nihil.
Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
ducimus exceptionuri doloribus aliquam ipsum vel, обвинение quo nemo expedita esse eos libero incidunt
reprehenderit facere ex hic ipsa odit in! Eveniet.
Общ CSS
Приложете основния CSS към тялото.
тяло {
цвят: #502c2c;
фон: #f1edec;
подплата: 1.2rem;
семейство шрифтове: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
максимална ширина: 45rem;
марж: 0 автоматично;
размер на шрифта: 1.2rem;
}
Оформяне на акордеона
Първо, скрийте квадратчетата за отметка, като промените въвеждането.
/* Скриване на квадратчетата за отметка или бутон за избор*/
вход {
позиция: абсолютна;
непрозрачност: 0;
z-индекс: -1;
}
Сега стилизирайте акордеона. Можете да добавите::след псевдоелемент за + знак. Можете да се обърнете към a Референтна диаграма на обекта на символа и използвайте всякакви Калкулатор за преобразуване на обекти за да намерите CSS стойността на числова стойност. Тук CSS стойността на + е \002B.
/* Стилове акордеон */.ЧЗВ {
цвят: #ffe3e3;
поле-долу: 3rem;
}.faq-label {
размер на шрифта: 1.5rem;
дисплей: гъвкав;
align-items: център;
justify-content: пространство между;
подложка: 1em;
фон: #b61818;
шрифт-тегло: получер;
курсор: показалец;
потребителски избор: няма;
}.faq-label:: след {
съдържание: '\002B';
подплата: 0.51rem;
трансформиране: мащаб (1.8);
подравняване на текста: център;
преход: всички 0.35s;
}
.faq-content {
макс. височина: 0;
padding: 0 1em;
цвят: #2c3e50;
фон: бял;
преход: всички 0.35s;
дисплей: няма;
}
Сега, нека добавим функционалност към акордеона с помощта съседни и атрибутни селектори. Тук, \2013 е CSS стойност за –, Числовата стойност, представляваща –.
вход: отметнато + .faq-label {
фон: #8f1414;
}
вход: отметнато + .faq-label:: след {
съдържание: '\2013';
трансформиране: мащаб (1.5);
}
вход: проверено ~ .faq-content {
максимална височина: 100vh;
подложка: 1em;
дисплей: блок;
преход: всички 0.35s;
}
Изход:
Използване на метода на радио бутона
Методът на радиобутона има зададен тип на въвеждане радио. Всеки път, когато потребителят щракне върху раздел, скритият радио бутон, съответстващ на този раздел, се отваря. Когато щракнете върху следващия раздел, предишният раздел се затваря незабавно. Можете да отваряте само един раздел наведнъж, като използвате метода на радио бутона.
HTML
Персонализиран CSS само акордеон (ЧЗВ)
Използване на метода Radio Button
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.
Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.
Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Вел, не!
CSS
Копирайте горния CSS на метода на квадратчето за отметка, тъй като и двата метода се различават само от структурната гледна точка. Може да забележите, че има отворен един раздел през цялото време. Това се случва, защото не можете да премахнете маркировката от радио бутони като квадратчета за отметка. За да постигнете това, добавете долния CSS код към радио бутон „Затвори всички“ без описание.
/* Затваряне на всички */
.faq-label {
позиция: относителна;
}
.faq-close {
дисплей: inline-block;
подплата: 1rem;
размер на шрифта: 1rem;
фон: #b61818;
курсор: показалец;
позиция: абсолютна;
вляво: 64rem;
}
Изход:
Продължете да експериментирате и добавете анимации
Има проста логика зад акордеоните: когато щракнете върху меню, ще се появи скритото му съдържание. Тъй като вече знаете как да създадете акордеон, е крайно време да приложите и експериментирате с обучението си. Можете да създавате хоризонтални акордеони, за да подобрите дизайна, особено при показване на изображения. Експериментирайте с кода, като коригирате ефекта на прехода с помощта на анимации на ключови кадри.
Искате ли да оживите кода си с CSS анимации на ключови кадри? Ето как да го направите.
Прочетете Следващото
- Програмиране
- HTML
- CSS
- Уеб разработка
- Уеб дизайн
Naincy е специализирана в изграждането на високо отзивчиви уебсайтове и ефективна стратегия за съдържание заедно с уеб копия. Тя е технически писател на свободна практика, който следи остро актуалните технологии.
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, ревюта, безплатни електронни книги и ексклузивни оферти!
Щракнете тук, за да се абонирате
