Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


anboza
 Поделиться

Рекомендованные сообщения

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

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

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

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

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

 

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

 

 

1.jpg

2.jpg

Ссылка на комментарий
Поделиться на других сайтах

Только что, Vetroff сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

#top {
    background-color: black;
    height: 100vh;
    width: 30%;
    position: fixed;
    z-index: 3;
}
Ссылка на комментарий
Поделиться на других сайтах

Только что, Blast сказал:

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


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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, Vetroff сказал:

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, Pascha сказал:

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

3 минуты назад, anboza сказал:

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, Vetroff сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах

7 минут назад, anboza сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, Pascha сказал:

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

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, Blast сказал:

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

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

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

Изменено пользователем anboza
Ссылка на комментарий
Поделиться на других сайтах

Только что, Pascha сказал:

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

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

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

Изменено пользователем anboza
Ссылка на комментарий
Поделиться на других сайтах

Только что, Pascha сказал:

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


if(document.documentElement.clientWidth < 767) {

 

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

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, Pascha сказал:

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

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

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

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

Изменено пользователем anboza
Ссылка на комментарий
Поделиться на других сайтах

Только что, Pascha сказал:

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

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

Изменено пользователем 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>

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

Ссылка на комментарий
Поделиться на других сайтах

8 минут назад, anboza сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах


Только что, AWARO сказал:

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

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

 

Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах


3 минуты назад, anboza сказал:

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

 

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

Ссылка на комментарий
Поделиться на других сайтах


Только что, AWARO сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах

Только что, AWARO сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах

1 час назад, anboza сказал:

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

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

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.