Как реализовать большой адаптаптивный хедер

[vip]

Люди добрые, подскажите, как реализовать такую адаптацию хедера и навигации для адаптивного сайта (особенно , как перенести "подать заявку", личный кабинет и поиск после навигации на маленьких разрешениях?).

 

Как вариант наверное можно делать 2 навигации и ява скриптом скрывать/отображать нужную?

 

Или без отдельной мобильной версии сайта тут не обойтись?

 

Edited January 11, 2015 by vip

[klierik]

картинка не грузится

[vip]

картинка не грузится

Перезалил

Edited January 11, 2015 by vip

[npofopr]

Для меню я бы выбрал что то такое http://alizahid.github.io/jquery-sliding-menu/

 

Остальное:

1 строка - лого и язык

2 строка - Заявка и ЛК

3 строка - поиск

Ну или любой другой порядок. 

2 и 3 строку можно объединить, сделав поиск "выезжающим", т.е. кликаешь на иконку и input увеличивается в длине, заполняя поверх всю строчку.

 

Кнопку ЛК вообще можно в меню спрятать. 

 

Очень странно что у вас нигде телефон не фигурирует, сеошники любят размещать телефон в видном месте.

 

Или вот меню http://ruseller.com/lessons/les1996/demo/index.html если посмотрите, там как раз в верхней строке и поиск спрятан. 

В общем для меню море вариантов. Только его надо выводить поверх контента.

[vip]

В общем для меню море вариантов. Только его надо выводить поверх контента.

Т.е "десктопное" меню прятать (или хедер тоже прятать?) для мобильных девайсов и выводить мобильное через media queries?

Могли бы подробнее расписать? Делаю первый адаптивный сайт, с контентной частью все понятно, а вот с шапкой ступор.

Edited January 11, 2015 by vip

[Светлана Г.]

А если просто продублировать блоки: ПЗ, ЛК, поиск? А потом скрывать/показывать с помощью media-queries? 

 

Можно еще попробовать с помощью position:absolute;

Edited January 11, 2015 by Светлана Г.

[npofopr]

Да, продублировать самое простое будет, если куда то переносить в другое место.

А если "построчно" разбивать, то и дублировать не надо. 

А объяснять можно долго. Меню обычно сами скрипты дублируют, автоматом делают этот "мобильный дубль".

[vip]

Меню обычно сами скрипты дублируют, автоматом делают этот "мобильный дубль".

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

А если "построчно" разбивать, то и дублировать не надо.

а можете здесь подробнее, или где почитать, посмотреть?

[npofopr]

Нельзя. Я не знаю, как у вас там сделать. Смысл как в бутстрапе .col-3 и т.п., при маленьком разрешении они становятся в width: 100%.

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

[vip]

насчет построчности понятно, так и делаю с блоками, только не знал, что это так называется:-)

 

Буду копать

[npofopr]

только не знал, что это так называется:-)

ну это я так назвал)

[vip]

Нашел такой плагин: http://slicknav.com/

там как будто есть опция добавлять контент к оригинальному меню, я правильно понимаю?

// iterate over structure adding additional structure        var items = $this.mobileNav.find('li');        $(items).each(function () {            var item = $(this),                data = {};            data.children = item.children('ul').attr('role', 'menu');            item.data('menu', data);

[Светлана Г.]

Блоки если и будут падать, то в том порядке, в котором они идут в разметке. Поэтому я предлагаю Вам продублировать после меню всего 3 блока: ЛК, ПЗ, поиск. На desktop их скрываете, а для остальных вариантов - показываете. Соответственно блоки до меню - скрыть. SEO это не нанесет никакого вреда.

Я делаю так.