пятница, 28 ноября 2008 г.

Подсветка меню с помощью CSS

Большинство веб-сайтов подсвечивает пункт меню навигации в зависимости от раздела, где в данный момент находится пользователь. Это помогает посетителю лучше сориентироваться на сайте (помним о юзабилити!). Как правило, для этого нужно подстраивать код HTML каждой страницы, чтобы выделить соответствующий элемент меню.


Оказывается, выделение пункта меню можно реализовать с помощью CSS.

Перво-наперво вы должны присвоить class каждому элементу навигации.
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

Затем вы должны назначить id каждому тегу <body>. Идентификатор id будет отражать где в данный момент находится пользователь и изменяться при переходе из одного раздела сайта в другой.

Для главной страницы он будет выглядеть <body id="home">, на странице «О нас» так: <body id="about">, а в разделе «Контакты» вот так: <body id="contact">.

После этого вы создаете правило CSS:
#home .home, #about .about, #about .about, #contact .contact
{
/* команды для подсвеченного элемента меню */
}

Это создаёт правило, которое срабатывает только тогда, когда class="home" находится внутри id="home", class="about" внутри id="about" и class="contact" внутри id="contact".

Пример из статьи: «My Top Ten CSS Tricks»

Upd: Специально для Анонима даю код:
/* стили для меню в этом посте */
.listMenu1 {
margin:0; padding:0px;list-style-type:none;background-color:#C61A1A;border-bottom:2px solid #000;
}
.listMenu1 li {
display:inline;
}
.listMenu1 li a, .listMenu1 li a:hover, .listMenu1 li a:visited {
color:#FFF;padding:0px 10px;margin:0px;border-bottom:0px;padding-bottom:3px;
}
/* теперь внимательно!
если у тебя, например, body id="products" как в моем примере,
или body id="contact", то соответствующий пункт меню будет подсвечен черным фоном
*/
#home .home, #about .about, #about .about, #contact .contact, #products .products {
background-color:#000;
}

7 Комментариев :

Анонимный комментирует...

ёпт... о чем тема? где стили подсветки?

Croaker комментирует...

Смотри апдейт. Если уж вдруг и там непонятно, могу справку по классам/ ид в CSS дать.

Numerologger комментирует...

Приветствую Croaker!

Подписался на е-mail.
Облако тэгов просто бомба, но у меня диалап и грузится невразумительно долго!

Я по теме в русиан-блогере по поводу меню бара!
Сделал меню по рекомендации в твоём посте " Статические страницы ..." у себя в тестовой странице
http://profitinweb.blogspot.com/

Читал этот пост и "CSS горизонтальные списки" Ты уж извини, я чайник, но не совсем.

-Что-то мне понятно,но не всё, вот хотя бы как продолжить урок из "Статических страниц...", что бы плавно перейти к теме затронутой в этом посте и реализовать такое вот меню как в этом примере?

Croaker комментирует...

Добро пожаловать, Numerologger!

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

Пример с подсветкой меню предназначен в первую очередь для «самостоятельных» сайтов. В-частности в нашем проекте мы используем этот прием для пользовательских шаблонов.

Если ответ в теме Blogger Help Group не поможет, попытаюсь проработать пример для платформы Блоггер более подробно. Спасибо за вопрос, кстати.

Анонимный комментирует...

Спасибо помог

Евгения Смирнова комментирует...

Спасибо, выручил! Удачи, успехов.

Евгения Смирнова комментирует...

Спасибо, выручил! Удачи, успехов!

Отправить комментарий

Жги!