В некоторых онлайн конструкторах сайтов на определенных тарифах очень ограничен функционал (например — Битрикс24). Бывает нет возможности вставить свой JavaScript-код, а так же поменять HTML-код готовых блоков. Такая политика в общем то не удивительна, надо же как-то монетизировать такие продукты.
Что если все же хочется выпадающее меню на сайте, а базовые модули с таким функционалом не доступны. Попробуем сделать чисто на CSS. Бывает, что его добавлять как раз разрешают.
Итак пример структуры одноуровневого меню, которое будем превращать в двухуровневое:
1 2 3 4 5 6 7 8 9 | <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Four</li> <li>Five</li> <li>Sub el 1</li> <li>Sub el 2</li> </ul> |
И CSS:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | ul { word-spacing: -.36em; display: table; position: relative; margin: 0; padding: 0; } li { display: inline-block; padding: 10px; word-spacing: normal; height: 20px; width: 80px; background: gray; } ul:hover li { display: inline-block; } li:nth-child(6), li:nth-child(7) { display: none; position: absolute; left: 200px; background: lightgray; } li:nth-child(6) { top: 40px; } li:nth-child(7) { top: 80px; } li:nth-child(1):hover ~ li:nth-child(6), li:nth-child(2):hover ~ li:nth-child(6), li:nth-child(4):hover ~ li:nth-child(6), li:nth-child(5):hover ~ li:nth-child(6), li:nth-child(1):hover ~ li:nth-child(7), li:nth-child(2):hover ~ li:nth-child(7), li:nth-child(4):hover ~ li:nth-child(7), li:nth-child(5):hover ~ li:nth-child(7) { display: none; } |
Вот что у нас получилось:
Как видно, выпадающие пункты меню размещены в конце, иначе начинаются проблемы при отображении. Некоторый CSS-код относится к решению проблемы отступов между элементами типа inline-block (В частности word-spacing и display: table у UL). Неудобство, конечно, еще в том что все отступы пунктов выпадающего меню придется прописывать вручную. А для разных разрешений экрана, по видимому, их надо будет настраивать с помощью медиа-запросов CSS.
Но суть в том, что все же есть техническая возможность сделать выпадающее меню для клиентов, которые пока не готовы платить дополнительный ежемесячный взнос за расширенный функционал онлайн-конструктора.