Адаптивное выпадающее меню
Добрый день! Подскажите, пожалуйста, как сделать так, чтобы при уменьшении экрана ссылки помещались в выпадающее меню? А именно не все сразу, а поочередно, по мере их выхода за пределы видимости экрана. Спасибо!
<style> .header-item { padding: 7px 0; } .hi { display: inline-block; } .hi:after { content: '|'; margin: 0 17px 0; display: inline-block; color: #ccc; vertical-align: middle; } </style> <div class="header-item"> <div class="hi"><a href="#">Первый пункт</a></div> <div class="hi"><a href="#">Второй пункт</a></div> <div class="hi"><a href="#">Третий пункт</a></div> <div class="hi"><a href="#">Четвертый пункт</a></div> <div class="hi"><a href="#">Пятый пункт</a></div> <div class="hi"><a href="#">Шестой пункт</a></div> <div class="hi"><a href="#">Седьмой пункт</a></div> <div class="hi"><a href="#">Восьмой пункт</a></div> </div> |
LADYX,
А где у вас пределы видимости? И каким же должен быть экран? И куда тогда выпадать? <style> .header-item { padding: 7px 0; } .hi { display: inline-block; } .hi:after { content: '|'; margin: 0 17px 0; display: inline-block; color: #ccc; vertical-align: middle; } </style> <div class="header-item"> <div class="hi"><a href="#">Первый пункт</a></div> <div class="hi"><a href="#">Второй пункт</a></div> <div class="hi"><a href="#">Третий пункт</a></div> <div class="hi"><a href="#">Четвертый пункт</a></div> <div class="hi"><a href="#">Пятый пункт</a></div> <div class="hi"><a href="#">Шестой пункт</a></div> <div class="hi"><a href="#">Седьмой пункт</a></div> <div class="hi"><a href="#">Восьмой пункт</a></div> </div> |
Все ссылки расположены в ряд, в блоке шириной 100%, который растянут на весь экран. Мне нужно, чтобы при уменьшении окна браузера ссылки, которые не помещаются, собирались в отдельный блок, т.е. появляется кнопка "еще", при нажатии на которую этот блок открываем. Стили мне не обязательны, мне главное нужен сам механизм.
|
LADYX,
Вы указали как критерий включения ссылок в отдельный блок Цитата:
Какая-то очень странная постановка задачи. |
Ссылки, которые перемещаются на вторую строчку по мере уменьшения экрана, нужно перемещать в отдельный блок, который будет открываться на кнопку "еще". В этот блок должны перемещаться все ссылки, которые не помещаются в одну строчку. А куда выпадать? Ну например сюда - http://codepen.io/joshgreen/pen/yxmfv
|
Часовой пояс GMT +3, время: 07:32. |