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

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

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

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

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

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

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

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

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

Павел 01 июля 2008 года, 11:49 #

Андрей, здравствуйте!
Мне очень понравилось как вы работаете и как описываете свою работу, принципы. Хотел бы сделать свой сайт на основе меню с закладками (первый пример)
Скажите, пожалуйста, можно ли (целесообразно ли) добиться такого же «очень приятного и удобного меню с закладками» без использования java-скрипта? Только средствами CSS.

С уважением, Павел

webmolot 06 июля 2008 года, 1:45 #

В примере по событию onclick срабатывают функции, которые определяют стиль для закладок. Средствами CSS событие по клику не вызвать, к сожалению. Есть много примеров меню с закладками, где динамика делается по наведению мышки при помощи псевдокласса :hover. Меню на моем сайте сделано таким образом.

Блог о веб-аналитике 30 ноября 2008 года, 6:23 #

[...] для меня самая интересная и волнующая: веб-аналитика! Верстка меню с закладкамиЧеловек заходит в магазин, чтобы выбрать себе обувь. [...]

[...] Источник урока webmolot.com [...]

inst 14 августа 2011 года, 21:29 #

Средствами CSS3 это стало возможным.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com