Отзывчивое горизонтальное меню без jQuery

Question

Я ищу гибкое горизонтальное меню, которое динамически сжимает элементы, которые не вписываются в раздел «больше» в меню. Довольно точно как в этом примере: http://www.jqueryscript.net/demo/Responsive-Horizontal-Nav-Menu-with-jQuery-CSS

Поскольку я собираюсь использовать его в статической генерируемой автономной странице, я не хочу всю реализацию JQuery в коде и ищу более простое решение, делать то же самое но с небольшим или без JS, но с чистым CSS.

Возможно ли это? Или мне нужно использовать jQuery для его достижения?

Answer 1

[Ответ обновлен, скрипку добавлен в нижней части]

Вполне возможно, с чистым CSS, вопрос только, если это будет довольно. Поскольку CSS не может знать, когда он разбивает div (он просто делает это), вы должны вручную установить эти точки останова. Поскольку вы говорите об автономной странице, это, вероятно, не проблема, чтобы отслеживать это вручную.

Возможно, вы знакомы с правилами @media в CSS. Вы также, вероятно, использовали для размещения 2 или 3 из них на своей странице, чтобы поймать различные разрешения и отобразить свою веб-страницу в соответствии с этими разрешениями.

Решение для вашей проблемы должно состоять в том, чтобы добавить один пункт @media -breakpoint для каждого пункта меню.

У вас есть 6 пунктов и шестой падает на 600px, затем добавить следующее:

@media screen and (max-width: 600px) { 
    /*your CSS here to hide menu point 6 in the dropdown*/ 
} 

Продолжая выше примере: если пятый пункт меню будет обернуть на следующую строку в 500px, вы добавляете еще одну точку останова:

@media screen and (max-width: 500px) { 
    /*your CSS here to hide menu point 6 AND 5 in the dropdown*/ 
} 

Вы просто продолжаете этот процесс, пока не настроите меню так, как вы хотите.

Редактировать: Я сделал довольно неприятный Fiddle, но он функциональный, и вы, вероятно, можете использовать его в качестве исходного материала. Существует два меню и в зависимости от ширины окна он скрывает или показывает предметы.

Fiddle

Answer 2

Это не возможно еще (то есть, если вы не используете меню фиксированной ширины элемента).

На уровне CSS 4 у вас есть новая вещь под названием regions есть пример из Razvan Calimanhere (вы можете проверить это в Chrome Canary). Но до тех пор я боюсь, что javascript - лучшее решение.