Каждому из нас свойственно знать где мы в данный момент находимся. И определяем мы это с помощью внешних “маркеров”, которые сигнализируют о нашем местоположении. Так же и в интернете. Когда мы заходим на тот или иной сайт и переходим со страницы на страницу, то не плохо было бы видеть на какой именно странице мы сейчас.
Многие вэб-разработчики уделяют этому аспекту юзабилити не достаточно внимания или совсем не уделяют, не смотря на то что существует достаточно много способов для реализации “подсветки”.
Давайте рассмотрим несколько сравнительно не сложных примеров.
Первый пример, который я хотел бы вам показать, основывается на том факте, что навигационное меню сайта как правило одинаковое на всех страницах. Соответственно, задав ему определенные параметры один раз, не нужно в дальнейшем изменять их на каждой новой странице.
Пример HTML кода меню:
<ul>
<li><а hrеf="#" class="home">Home</a></li>
<li><а hrеf="#" class="about">About us</a></li>
<li><а hrеf="#" class="contact">Contact us</a></li>
</ul>Хитрость и простота одновременно в этом примере заключаются в том, чтобы задать уникальный id в тэге body, для каждой страницы сайта. Id страницы должен совпадать с названием класса элемента меню и тогда стили к этим элементам можно применять постранично:
#home .home, #about .about, #about .about, #contact .contact{
color:red; font-weight: bold; /*Стили на ваше усмотрение*/
}Получается что когда id страницы это “home”, то к элементу меню с классом .home применяются стили описанные выше. И так далее. Просто, правда?
Меня этот способ привлек тем, что в своей работе я использую id для тэга body очень часто и для меня реализация такой подсветки – описание одного стиля.
Второй способ, который я хотел бы показать, использует JS для того чтобы найти на странице все ссылки с заданным класом, сравнивает document.location с аттрибутом href самой ссылки и если они совпадают – добавляет к ней класс, для которого описывается стиль.
Соответственно, нужно создать .js файл в котором будет описана функция:
function highlight(){
var atags=document.getElementsByTagName("a");
for(var i=0;i
if(atags[i].className=="nav"){
if(document.location.href.indexOf(atags[i].href)!=-1){
atags[i].className="active";
}
}
}
}
Приаттачить файл к странице
<script type="text/javascript" srс="/js/highlight.js"></script>и вызвать функцию при загрузке:
<body onload="highlight()">В самом меню у всех ссылок должен быть один и тот же класс nav, а стиль описывается для класса .active.
<a class="nav" hrеf="/about/">О проекте</a>У каждого способа есть преимущества и недостатки. О том как “включить” подсветку навигации в Wordpress можно почитать в давней, но не потерявшей актуальность, статье Юры Артюха “Wordpress и подсветка навигации” или в Кодексе WP по-английски.
А какое решение используете вы?
З.Ы. В попытке предвосхитить комментарии на тему того что у меня, мол, самого подсветки нет, скажу что работаю над этим :)
Прописываю для активного пункта отдельный класс .active и в css задаю для него стиль.
[quote comment="319"]Прописываю для активного пункта отдельный класс .active и в css задаю для него стиль.[/quote]
Чем определяется активный пункт??
А знает кто-нибудь хороший способ не просто выделять цветом активную страницу, но и делать ссылку не ссылкой, а просто текстом?
А то вручную сложно, особенно если много страниц.
[quote post="92"]А знает кто-нибудь хороший способ не просто выделять цветом активную страницу, но и делать ссылку не ссылкой, а просто текстом?[/quote]
Можно по схожему принципу с помощью JS реплэйсить <a> на <b> вместо добавления класса
[quote post="92"]if(!document.layers)[/quote]
Это конечно зря. Защита от Netscape Navigator 4.7?
Вызов при загрузке — это всего лишь window.onload = highlight; в самом JS-файле, BODY трогать незачем.
На сервере надо это делать… на сервере.
[quote comment="328"]На сервере надо это делать… на сервере.[/quote]
А конкретней?
[quote post="92"]А конкретней?[/quote]
Наверное вот так:
[ul]
[li][a href="#"]Link[/a][/li]
[li][strong]Current Link[/strong][/li]
[li][a href="#"]Link[/a][/li]
[/ul]
> pepelsbey
Вадим, это-то понятно :) В комментах выше даже что-то подобное уже мелькнуло. Интересна реализация.
реализация в каждом случае разная, но логика такова.
Для шаблонов например
[%LOOP LINKS%]
[%IF CURRENT%]CURLINK[%ELSE%]PageLink[%/IF CURRENT%]
[%/LOOP LINKS%]
Для себя подсветку не делаю, но когда верстаю заказчикам, использую класс .current
Dimox
Интересует логика. Как определяешь current?
Я, собственно, только верстаю и создаю этот класс, а заказчик уже его опеределяет с помощью используемого движка.
Я добавляю класс .active, во время генерации меню в php, там же заменяю ссылку на href=”#”.
.active {cursor:default;}
выглядит так как будто это и не ссылка, а при нажатии ничего не произойдёт.
Спасибо, очень помогли)) Я воспользовался 1 способом описанным в коментариях – помогло.
А я делаю на php так:
Создаю функцию formenu($str,$page). В ней создаю массив $menu, в котором ключ элемента – это идентификатор страницы (имя хтмл-файла), а значение этого ключа – название страницы.
Например,
$menu['main']='Главная страница';Дальше вот так:
if ($str!=$page)
echo ''.$menu[$str].'';
else
echo '> '.$menu[$str];
А потом уже, в том месте, где надо отобразить меню, пишу:
Довольно удобно, не считая прописывания содержимого массива.
Но вообще изначально этот скрипт разрабатывался для сайта, где навигация “картиночная”, а имя картинки-пункта меню соответствовало имени страницы, поэтому в массиве $menu надобности не было.
Почему-то не написалось.
Пишу в коде php:
formenu(‘main’,$page)
интересно
Круто
если все прописывать в массив, то какой же массив выйдет, если у меня этих пунктов очень много (дерево)и тем более если заказчику понадобится новый пунктик присобачить