Jump to content
  • 0

Как сделать правильно навигацию


vladmih
 Share

Question

Есть такая навигация по сайту http://take.ms/DOWKs

Не могу приложить ума как ее правильно сделать и чтоб она еще была адаптивной.

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

Была мысль все тайтлы навигации и подразделы делать колонками, но в мобиле собьется логический порядок, а потом всех расставлять order-ом.
Вариант конечно не очень, ибо если пропадет тайтл или появится новый блок ссылок, то все ордеры собьются.

Или на js, искать по строкам самый высокий и все в ряду прописывать min-height, но js не хотелось бы...

Может у Вас есть какие-нибудь варианты?
 

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
25 минут назад, Switch74 сказал:

inline-block нет?
https://jsfiddle.net/gpq41zLk/

Вы наверное не поняли суть проблемы...

Левая колонка buy идет с тремя подгруппами линков, так же и у sell и discover.
Если адаптировать эту страницу к мобиле, то колонки должны стать таким образом:

buy
блок ссылок
блок ссылок
блок ссылок
sell
блок ссылок
блок ссылок
блок ссылок
discover
блок ссылок
блок ссылок
блок ссылок

А с инлайблоками они просто стану друг под другом, а тайтлы будут сверху.

http://take.ms/Wpl0r
Вот примерно о чем я говорю все что в рамке должно быть одним блоком, чтоб в мобилу они пошли друг под друга

Edited by vladmih
Link to comment
Share on other sites

  • 0
19 минут назад, Switch74 сказал:

если flex не вариант можно тупо 2 верстки сделать и показывать в зависимости от размера нужный блок
 

Вариант делать на флексе каждый тайтл, блок ссылок отдельно, а потом в мобиле проставлять order чтоб они встали нужный мне порядок. Но как по мне это костыль и совсем не гибкий.
Я поэтому и спрашиваю, может есть какой-то вариант более логичный который мне не пришел в голову...?

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   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.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy