Аккордеон меню с разными стилями на CSS3 и jQuery
Неплохой пример аккордеон меню, каждый пункт которого можно использовать как отдельный слайдер
Для начала посмотрите ДЕМО
Установка:
1#: В самый верх вашего CSS вставьте:
|
1 |
@import url(/css/accordeon.css) all; |
2#: В самый низ перед закрывающим тегом </body> вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script type="text/javascript"> function setDetailsHeight(selector, wrapper = document) { const setHeight = (detail, open = false) => { detail.open = open; const rect = detail.getBoundingClientRect(); detail.dataset.width = rect.width; detail.style.setProperty(open ? `--expanded` : `--collapsed`,`{rect.height}px`); } const details = wrapper.querySelectorAll(selector); const RO = new ResizeObserver(entries => { return entries.forEach(entry => { const detail = entry.target; const width = parseInt(detail.dataset.width, 10); if (width !== entry.contentRect.width) { detail.removeAttribute('style'); setHeight(detail); setHeight(detail, true); detail.open = false; } }) }); details.forEach(detail => { RO.observe(detail); }); } /* Run it */ setDetailsHeight('details'); </script> |
3#: Примеры использования:
Обычный слайдер слева:
|
1 2 3 4 5 6 7 |
<details> <summary> <span data-css-icon="down">Down To Up<i></i></span> </summary> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis. </div> </details> |
Обычный слайдер справа:
|
1 2 3 4 5 6 7 8 9 10 |
<div dir="rtl"> <h2> right-to-left</h2> <details> <summary> <span data-css-icon="down">Down To Up<i></i></span> </summary> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis. </div> </details> </div> |
Больше примеров использования можете посмотреть в исходном коде прикреплённого ДЕМО
Осталось лишь залить CSS файл из прикреплённого файла в папку css
