Пример меню с адаптивной версткой

Как это меню выглядит в программе Фотошоп:

Адаптивная верстка – это табличная верстка (верстаем картинку как и таблицу). Однако для подстраховки рекомендуется все «кнопки» делать одинаковыми по размеру. Для этого нужно:

· При разделении ширины меню на количество столбиков должно получиться целое число. В примере: 600 пикселей делим на 5, получается 120.

· При разделении высоты меню на количество строчек должно получиться целое число. В примере 1001 пиксель делим на 11, получается 91.

· Чтобы так аккуратно разделить на ровные кнопки, пользуйтесь пожалуйста функцией раскройки «Разделить фрагмент».

· Старайтесь подгадать раскройку так, чтобы одна кнопка не залезала на другую.

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

Коды меню данного примера (для ознакомления, т.к. это реальный проект заказчика):

{|fixed;nopadding;noborder;

|~ 120px 120px 120px 120px 120px

|[[photo2869726_111111111|nopadding;noborder;120px|page-82601739_49965613]]

Еще примеры меню с адаптивной версткой такого плана:

Более подробно мы рассмотрим адаптивную верстку в уроке по программе курса.

Если возникли вопросы, пишите на форум https://new.vk.com/topic-119005500_33372704

Спасибо за внимание! Встретимся в следующих уроках!

Пример меню с адаптивной версткой

Поиск по сайту