Оказывается, выделение пункта меню можно реализовать с помощью 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;
}
7 Комментариев :
ёпт... о чем тема? где стили подсветки?
Смотри апдейт. Если уж вдруг и там непонятно, могу справку по классам/ ид в CSS дать.
Приветствую Croaker!
Подписался на е-mail.
Облако тэгов просто бомба, но у меня диалап и грузится невразумительно долго!
Я по теме в русиан-блогере по поводу меню бара!
Сделал меню по рекомендации в твоём посте " Статические страницы ..." у себя в тестовой странице
http://profitinweb.blogspot.com/
Читал этот пост и "CSS горизонтальные списки" Ты уж извини, я чайник, но не совсем.
-Что-то мне понятно,но не всё, вот хотя бы как продолжить урок из "Статических страниц...", что бы плавно перейти к теме затронутой в этом посте и реализовать такое вот меню как в этом примере?
Добро пожаловать, Numerologger!
Облако тегов – забавная штука, но я не особо приветствую флеш в дизайне. Скорей всего оно исчезнет с ближайшим редизайном.
Пример с подсветкой меню предназначен в первую очередь для «самостоятельных» сайтов. В-частности в нашем проекте мы используем этот прием для пользовательских шаблонов.
Если ответ в теме Blogger Help Group не поможет, попытаюсь проработать пример для платформы Блоггер более подробно. Спасибо за вопрос, кстати.
Спасибо помог
Спасибо, выручил! Удачи, успехов.
Спасибо, выручил! Удачи, успехов!
Отправить комментарий
Жги!