Верстка основного меню в мобильной версии

[anboza]

Доброго времени, уважаемые!

не поверите, в ступоре.

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

во вложении, наскальные каракули мои, (не бить ногами) 

как делать из горизонтального вертикальное, как делать выезжающее боковое меню - это понятно.Не понятно, как переносить такие важные элементы, как корзина, поиск, язык. Это основная проблема...

 

Заранее благодарю за мысли и помощь!

 

 

[Vetroff]

javascript, как вариант. 

[anboza]

  В 13.01.2020 в 18:46, Vetroff сказав:

javascript, как вариант. 

Expand  

ну как бы как крайний вариант ((( очень не хотелось бы...может еще варианты найдутся...

[Blast]

а зачем их куда-то переносить? вроде ж все элементы в одном контейнере

#top {
    background-color: black;
    height: 100vh;
    width: 30%;
    position: fixed;
    z-index: 3;
}

[anboza]

  В 13.01.2020 в 19:10, Blast сказав:

а зачем их куда-то переносить? вроде ж все элементы в одном контейнере

#top {
    background-color: black;
    height: 100vh;
    width: 30%;
    position: fixed;
    z-index: 3;
}

Expand  

не все, там еще поиск и корзина, не та, которая переход на корзину, а которая кнопка....

[Vetroff]

Или я не так понял и там не нужно делать из нескольких меню одно?

Тогда не совсем ясно в чем проблема ) 

Завернуть весь блок в div который в выпадающем меню, и дальше работать с css

[anboza]

  В 13.01.2020 в 19:12, Vetroff сказав:

Или я не так понял и там не нужно делать из нескольких меню одно?

Тогда не совсем ясно в чем проблема ) 

Завернуть весь блок в div который в выпадающем меню, и дальше работать с css

Expand  

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

[anboza]

  В 13.01.2020 в 19:20, Pascha сказав:

Вот это дополнение вполне дорабатывается как захочется (код открыт - вставляй что хочется хоть по ID, хоть через echo)

 

Expand  

так а смысл? я меню создать могу, структуру меню тоже.
вопрос как переносить элементы с атрибутом id. - это фактически именно то, что нужно доработать до вашего модуля, если я правильно понял ))
мне не модуль нужен, а совет, как перенести эти элементы. Пока, самым не "подходящим", но рабочим, есть вариант с переносом через js...но это будет жесть.
 

[Vetroff]

  В 13.01.2020 в 19:22, anboza сказав:

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

Expand  

 

Лично я бы перемещал элементы скриптом в зависимости от размера экрана. Ничего страшного в этом не вижу ) 

[anboza]

  В 13.01.2020 в 19:30, Vetroff сказав:

Ничего страшного в этом не вижу )

Expand  

на мобильном интернете, будет эффект "перескока". Или придется тулить скрипт в самый верх и тормозить страницы, пока не отработается скрипт

[Blast]

  В 13.01.2020 в 19:22, anboza сказав:

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

Expand  

ну может тогда закинуть всю шапку в один контейнер, логотипу добавить class="hidden-xs" и продублировать его в другом контейнере, который отобразится только на мобильной версии?

[anboza]

  В 13.01.2020 в 19:32, Pascha сказав:

при уменнии можно сделать и самостоятельно,

Expand  

вот как раз умения и нет, вернее понимания, что делать, что перенести корректно эти элементы((

я исходил из фото, которые прилагаются к модулю. а там, то меню, которое меня интересует, оно как раз и не затронуто )) А весь функционал, я конечно, не успел бы изучить..

Подскажите хоть, куда копать...

А то у меня кроме вариантов "is mobile" и подставлять хэдер, ну и вариант с js, особо фантазия не работает ((

[anboza]

  В 13.01.2020 в 19:34, Blast сказав:

и продублировать его в другом контейнере

Expand  

вариант не подходит - элeменты с атрибутом id

тем более, что логотип остается на своем месте...

Змінено 13 січня 2020 користувачем anboza

[anboza]

  В 13.01.2020 в 19:32, Pascha сказав:

ну или например вот такая.. более расширенная доработка по хотелкам заказчика 

Expand  

меню знатное, спору нет.

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

Змінено 13 січня 2020 користувачем anboza

[anboza]

  В 13.01.2020 в 19:46, Pascha сказав:

как вариант можно копать сюда
естественно указывая отработку скрипта только при определенном разрешении, к примеру так
 

if(document.documentElement.clientWidth < 767) {

 

Expand  

так это ж как раз первый вариант ((

Я думал, может как-то решают люди "красиво"... ))))

[anboza]

  В 13.01.2020 в 19:50, Pascha сказав:

чем Вам не красиво то

Expand  

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

хотя, если хотят именно так, пусть терпят((

а то хочу скорость 99 попугаев, только чтобы все динамично, все двигалось и вообще.

Змінено 13 січня 2020 користувачем anboza

[anboza]

  В 13.01.2020 в 19:56, Pascha сказав:

все делается просто как три рубля)))

Expand  

ну и как мне перенести элементы id? кабы просто class - я бы и не мутил воду дурными вопросами

Змінено 13 січня 2020 користувачем anboza

[anboza]

<div class="row">
<div id="logo"></div><div id="cart"></div>
</div>
<div class="row">
<div id="search"></div>
</div>

//а Это выезжающее меню в мобиной версии

<div class="mob-menu">
//отута хочу в рядочек все элементы из всех row ))))

</div>

вот например структура, как ее организовать медиа и/или стилями? ((

[HyperLabTeam]

  В 13.01.2020 в 19:52, anboza сказав:

что или страницу тормозить и скрипт выполнять

Expand  

медиа это и есть скрипты ж вроде как -
https://html5book.ru/css3-mediazaprosy#media

[anboza]

  В 13.01.2020 в 20:05, AWARO сказав:

медиа это и есть скрипты ж вроде как -
https://html5book.ru/css3-mediazaprosy#media

Expand  

я имел в виду js, не совсем корректно выразился

 

[HyperLabTeam]

в том смысле зачем ещё если уже есть

[HyperLabTeam]

  В 13.01.2020 в 20:06, anboza сказав:

я имел в виду js, не совсем корректно выразился

 

Expand  

я ж об этом.  размеры стилями ж не выловить. размеры скрип и вылавливает.
а в современных арбузах оно вшито как я понимаю..
хз

[anboza]

  В 13.01.2020 в 20:08, AWARO сказав:

в том смысле зачем ещё если уже есть

Expand  

так мой вопрос и есть - как? а то сам не могу придумать...

[anboza]

  В 13.01.2020 в 20:09, AWARO сказав:

я ж об этом.  размеры стилями ж не выловить. размеры скрип и вылавливает.
а в современных арбузах оно вшито как я понимаю

Expand  

проблема не размер экрана выловить, а перенести элементы с атрибутом id, из разных оберток, в одну. Это есть вопрос

[HyperLabTeam]

  В 13.01.2020 в 18:29, anboza сказав:

как перенести элементы в мобильной версии в боковое выезжающее меню, в резиновой верстке

Expand  

подсмотри примеры,