Jump to content
Sign in to follow this  
anboza

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

Recommended Posts

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

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

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

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

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

 

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

 

 

1.jpg

2.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Только что, Vetroff сказал:

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Только что, Blast сказал:

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


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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
53 минуты назад, anboza сказал:

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

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

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

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

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

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

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

 

Share this post


Link to post
Share on other sites
Только что, Vetroff сказал:

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

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

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

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

Share this post


Link to post
Share on other sites
Только что, Pascha сказал:

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

 

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

Share this post


Link to post
Share on other sites
3 минуты назад, anboza сказал:

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

 

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

Share this post


Link to post
Share on other sites
Только что, Vetroff сказал:

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

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

Share this post


Link to post
Share on other sites
1 минуту назад, anboza сказал:

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

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

Share this post


Link to post
Share on other sites
7 минут назад, anboza сказал:

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

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

Share this post


Link to post
Share on other sites
Только что, Pascha сказал:

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

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

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

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

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

Share this post


Link to post
Share on other sites
Только что, Blast сказал:

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

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

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

Edited by anboza

Share this post


Link to post
Share on other sites
Только что, Pascha сказал:

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

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

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

Edited by anboza

Share this post


Link to post
Share on other sites
10 минут назад, anboza сказал:

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

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

if(document.documentElement.clientWidth < 767) {
Цитата

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

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

Share this post


Link to post
Share on other sites
Только что, Pascha сказал:

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


if(document.documentElement.clientWidth < 767) {

 

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

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

Share this post


Link to post
Share on other sites
2 минуты назад, anboza сказал:

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

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

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

Share this post


Link to post
Share on other sites
Только что, Pascha сказал:

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

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

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

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

Edited by anboza

Share this post


Link to post
Share on other sites
4 минуты назад, anboza сказал:

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

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

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

 у вас в руках бутстрап и медиазапросы в css....чего Вы уперлись в эти скрипты? 
все делается просто как три рубля)))
99 папугаев - это общераспространенный бред...тем более для магазинов с большим количеством товара... не ведитесь на фикции о которых Вам рассказывают... скорость загрузки сайта это комплексная работа... код, БД и прочее... менюха в мобильном - это не то о чем надо заморачиваться

Share this post


Link to post
Share on other sites
Только что, Pascha сказал:

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

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

Edited by anboza

Share this post


Link to post
Share on other sites
<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>

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

Share this post


Link to post
Share on other sites
8 минут назад, anboza сказал:

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

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

Share this post


Link to post
Share on other sites
Только что, AWARO сказал:

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

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.