Оказывается, выделение пункта меню можно реализовать с помощью 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".Пример из статьи: «»
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;
}
Читать дальше »
