Проектирование складной отзывчивой панели навигации

Question

У меня возникли трудности с настройкой адаптивного плагина jQuery для навигации под названием slimMenu. Я установил jsFiddle here. В конечном счете, я хотел бы создать отзывчивый заголовок, в котором h1 «логотип» размещается слева от контейнера (т. Е. Заголовок), а ссылки навигации перемещаются вправо. После запуска рухнувшего menu-- здесь я поставил точку останова 600px в инициализации плагина:

$('ul.slimmenu').slimmenu({ 
    resizeWidth: '600' 
}); 

, который вы можете видеть изменения ширины панели «Результаты» в jsFiddle-- Я хотел бы элементы списка выпадающего для заполнения окна просмотра в ширине 100% как я показано на этой схеме:

Этот плагин установлен, чтобы показать текст рядом со значком меню гамбургера, когда triggered-- в этом случае это «Меню», но я бы хотел, чтобы текст не показывался, и только заголовок заголовка «Логотип» остается слева. Я подозреваю, что проблема заключается в том, чтобы плавать заголовочные элементы & и, возможно, они должны быть размещены внутри контейнера и настроены на соответствие запросам медиа-запросов на элементы списка (?), Но мои попытки в этом ключе не сработали.

Спасибо за любую помощь здесь. Я с удовольствием куплю кому-нибудь кофе для тех, кто найдет решение :)

Answer 1

Похоже, вы можете указать, какой текст ярлыка находится в параметрах slimMenu. Установите его так:

$('ul.slimmenu').slimmenu(
{ 
    resizeWidth: '600', 
    collapserTitle: '', 
    easingEffect:'easeInOutQuint', 
    animSpeed:'medium', 
    indentChildren: true, 
    childrenIndenter: '»' 
}); 

и он должен предоставить вам то, что вы ищете.

Edit: и обратиться шириной 100%, что я пренебрегал в оригинальном ответе вы могли бы сделать это:

@media screen and (max-width: 600px) { 
    nav { 
     width:100%; 
    } 
    h1 { 
     position: absolute; 
     z-index: 100; 
    } 
} 

где максимальная ширина устанавливается на таком же ширины, как опция «resizeWidth» в slimMenu.

Кроме того, было бы полезно использовать класс или идентификатор для элементов nav и h1, чтобы убедиться, что вы не нажимаете на все ваши h1 с этим запросом на мультимедиа.