Блог → Верстка меню с закладками

Человек заходит в магазин, чтобы выбрать себе обувь. Ему сложно быстро сориентироваться. На помощь приходит продавец и советует лучшие товары, которые могут подойти покупателю. Всегда приятно, если консультант вежливо и грамотно все объяснит и подскажет. Рассмотрим эту ситуацию на примере сайта.

Человек заходит на сайт с определенной целью – купить кроссовки для бега. Кто ему подскажет и поможет быстро сориентироваться где искать нужную модель. Вместо продавца на помощь приходит меню сайта. Очень важно, чтобы меню было простое и приятное в использовании. Чтобы оно не путало, а наоборот помогало быстрее выйти на нужный раздел, страницу.

Приведу пример верстки, на мой взгляд, очень приятного и удобного меню с закладками. Смотреться будет красивее, если закладки будут наезжать друг на друга. Очень важно, чтобы меню быстро грузилось и красиво переключалось.

Смотреть пример

Семантически правильно, если верстка меню будет в виде списка. Это поможет легко организовать вложенность. При помощи таблицы стилей мы делаем дизайн. При клике по закладке срабатывает функция, которая делает соответствующий раздел активным, а другие разделы, неактивными. Элементы, расположенные ниже меню, будут подстраиваться под высоту меню.

Эту технологию можно применить и при верстке простых информационных сайтов-визиток. При клике по закладке будет переключаться целый раздел, при этом страница сайта не будет перегружаться.

Смотреть пример

• Tweet