Верстка меню с закладками
Человек заходит в магазин, чтобы выбрать себе обувь. Ему сложно быстро сориентироваться. На помощь приходит продавец и советует лучшие товары, которые могут подойти покупателю. Всегда приятно, если консультант вежливо и грамотно все объяснит и подскажет. Рассмотрим эту ситуацию на примере сайта.
Человек заходит на сайт с определенной целью - купить кроссовки для бега. Кто ему подскажет и поможет быстро сориентироваться где искать нужную модель. Вместо продавца на помощь приходит меню сайта. Очень важно, чтобы меню было простое и приятное в использовании. Чтобы оно не путало, а наоборот помогало быстрее выйти на нужный раздел, страницу.
Приведу пример верстки, на мой взгляд, очень приятного и удобного меню с закладками. Смотреться будет красивее, если закладки будут наезжать друг на друга. Очень важно, чтобы меню быстро грузилось и красиво переключалось.
Смотреть пример
Семантически правильно, если верстка меню будет в виде списка. Это поможет легко организовать вложенность. При помощи таблицы стилей мы делаем дизайн. При клике по закладке срабатывает функция, которая делает соответствующий раздел активным, а другие разделы, неактивными. Элементы, расположенные ниже меню, будут подстраиваться под высоту меню.
Эту технологию можно применить и при верстке простых информационных сайтов-визиток. При клике по закладке будет переключаться целый раздел, при этом страница сайта не будет перегружаться.
Смотреть пример
Комментарии
Андрей, здравствуйте!
Мне очень понравилось как вы работаете и как описываете свою работу, принципы. Хотел бы сделать свой сайт на основе меню с закладками (первый пример)
Скажите, пожалуйста, можно ли (целесообразно ли) добиться такого же “очень приятного и удобного меню с закладками” без использования java-скрипта? Только средствами CSS.
С уважением, Павел
В примере по событию onclick срабатывают функции, которые определяют стиль для закладок. Средствами CSS событие по клику не вызвать, к сожалению. Есть много примеров меню с закладками, где динамика делается по наведению мышки при помощи псевдокласса :hover. Меню на моем сайте сделано таким образом.
[...] для меня самая интересная и волнующая: веб-аналитика! Верстка меню с закладкамиЧеловек заходит в магазин, чтобы выбрать себе обувь. [...]
[...] Источник урока webmolot.com [...]