У меня есть сайт WordPress, где меню перемещается справа от логотипа в заголовке. Логотип занимает около 25% от ширины, а остальные 75% содержат 7 опций меню. Если добавлена опция 8-го меню, она превышает доступное пространство, и все меню в основном сдвигается вниз под логотипом. Я уверен, что многие из вас знакомы с таким ответом в меню.WordPress: Динамическое меню Условное

Я хочу, чтобы иметь возможность реализовать определенный набор новых стилей, если меню опускается ниже логотипа. Другими словами, это не зависит от размера браузера, а от количества меню, которое клиент может в конечном итоге добавить на сайт. Кто-нибудь знает правильный синтаксис или метод его реализации?

Заранее благодарен!

2014-09-30 user2325396

Просто используйте меньшие прокладки элементов меню или измените размер меньшего размера на фактический размер окна просмотра медиа-запросов. И не используйте плавающие элементы li, лучше используйте атрибут css для отображения в строке. Вы также можете использовать счетчик JQ, и если элементы исследуют 8 элементов, измените класс на мобильное меню или меньшее меню. – Foxsk8

Hi Foxsk8, thx для информации. Я принял ваш совет и уменьшил заполнение в меню, которое является хорошим и простым решением. Тем не менее, я не против, что меню попадает под логотип. Помимо JQuery, есть ли другие варианты, которые вы можете рекомендовать для применения разных стилей, когда это происходит? Спасибо! – user2325396

В прошлом году в апреле они выпустили новую обновленную версию свойства flex, это работает в mo st браузерами и до IE10. Это похоже на отображение встроенного блока, но он интерполирует ширину и позволяет повысить гибкость для любых чувствительных встроенных элементов.

вот полное описание его возможностей. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

проверить эту скрипку

http://jsfiddle.net/yznby99f/3/

по существу вы выложили эти свойства отображения на родителе в то, что вы хотите увидеть отображаемую инлайн.

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -ms-flexbox;/* TWEENER - IE 10 */ 
display: -webkit-flex;/* NEW - Chrome */ 
display: -moz-box; /* MOZILLA */ 
display: flex; /* standard syntax */

источник

2014-09-30 21:02:13

Спасибо, что нашли время, чтобы собрать это вместе. Я определенно собираюсь поиграть с ним. Возможно, я должен был быть более ясным в своем оригинальном посте. Я не против, чтобы меню попало под логотип. В основном я ищу условную формулировку, когда меню перестраивается под логотипом. Когда он это сделает, я бы хотел применить другой набор стилей. Есть ли способ для браузера определить, когда это произойдет? – user2325396

О, ладно! Очень легко, я обновлю ответ. –

Держу пари, у вас есть что-то вроде этого

LOGOMenu

плавал оставил

вы можете попробовать

#logo{ 
    width:40%; 
    background:green;  
    height:20px; 
    float:left; 
} 
#menu{ 
    min-width:60%; 
    background:blue;  
    height:20px; 
    display:inline-block; 
}

Смотрите, если результаты ...

источник

2014-09-30 20:36:53 jpganz18

Hi Jpganz18, thx для ответа. На самом деле я не против, чтобы меню попадало под логотип. Мне было интересно, есть ли условный код css, который может применять другой набор стилей при перестановке меню. – user2325396

вы можете использовать медиа-запросы – jpganz18

Используя предыдущий пример скрипта, я добавил небольшой фрагмент кода, чтобы решить вашу проблему!

http://jsfiddle.net/yznby99f/4/

Огромный ключ в отзывчивый веб-дизайн был доступен для использования, когда CSS3 был освобожден. это то, что называется медиа-запросом.

@media all and (max-width: 699px){ 

    /* Put any styles here */ 

}

http://www.w3schools.com/css/css_mediatypes.asp

это означает, что, когда размер экрана ниже 699px он будет выполнять любые стили в пределах их ограничений.

Важно, чтобы в адаптивном дизайне добавить «тег просмотра» к вашему документу.это позволяет браузеру читать и ширину устройства вашего пользователя IE: таблетки и смартфон:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Вы также можете установить, когда стили происходят между через 2 пикселя шириной:

@media all and (max-width: 699px) and (min-width: 500px){ 

    /* Put any styles here */ 

}

Чтобы проверить отзывчивость в скрипке, перетащите правую сторону вашего браузера влево, чтобы уменьшить ширину.

источник

2014-10-02 01:04:10

Thx для подробного сообщения и обратной связи Justin. Я знаком с медиа-запросами, но проблема, с которой я сталкиваюсь, не зависит от размера браузера. Он основан на том, сколько элементов меню добавляется клиентом независимо от размера окна браузера. Например, если имеется более 7 элементов меню, меню переходит на свою линию, что отлично. Я просто хочу уметь стилизовать его, когда он это делает. – user2325396

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

WordPress: Динамическое меню Условное

ответ

http://jsfiddle.net/yznby99f/3/

http://jsfiddle.net/yznby99f/4/

Чтобы проверить отзывчивость в скрипке, перетащите правую сторону вашего браузера влево, чтобы уменьшить ширину.

Смежные вопросы