Каков наиболее эффективный способ присвоить пункту меню активной страницы «выбранный» идентификатор для изменения CSS? - PullRequest
Новая
       8

Каков наиболее эффективный способ присвоить пункту меню активной страницы «выбранный» идентификатор для изменения CSS?

1 голос
/ 10 января 2009

Допустим, у меня есть 5 страниц: A, B, C, D и E. У меня также есть горизонтальное меню, и каждый пункт имеет светло-серый фон.

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

#black {
    background-color: #000;
}

Теперь, когда пользователь находится на B.php, я хочу, чтобы пункт меню B содержал #black id. Каков наилучший способ сделать это?

Ответы [ 3 ]

4 голосов
/ 10 января 2009

предложение; не определяйте, что ваш стиль «есть», определите, что ваш стиль «делает». Не называйте это #black, вместо этого называйте это .current.

Следует также отметить, что идентификаторы предназначены для идентификации уникальных элементов (#header, #footer, #main, #sidebar, #navbar и т. Д.). Определение повторяемого элемента в качестве текущего должно выполняться с помощью класса, поскольку с элементом может быть связано несколько классов, но только один идентификатор. Опять же, этот идентификатор зарезервирован для уникального именования. 

.current
{
    background-color: #000;
}

Чтобы связать это со страницей, вы можете установить на странице переменную, которая указывает, на какой странице она находится, а затем использовать блок if или переключить регистр, чтобы добавить стиль к элементу, который относится к текущей странице:

(псевдокод, мой синтаксис PHP ржавый) 

$current_page = "B"

// -- snip --

<ul>
    <li id="navigation-a" <? if ($current_page == "A") { ?> class="current" <? } ?> >Page A</li>
    <li id="navigation-b" <? if ($current_page == "B") { ?> class="current" <? } ?> >Page B</li>
</ul>

При желании вы можете попробовать получить $ current_page из URL страницы в запросе.

3 голосов
/ 10 января 2009

Когда я могу использовать PHP для проекта (который не работает на CMS), я обычно использую PHP-массив для создания меню. Добавлять, перемещать или удалять страницы из массива довольно просто, и, позволяя PHP выводить это как реальное меню, вам не нужно переписывать один и тот же код снова и снова.

Чтобы указать, какую страницу следует считать активной, вы можете использовать код, подобный следующему: 

$currentPage = "b.php";

Обратите внимание, что я специально использую полное имя файла. Я объясню вкратце, почему.

Поскольку для каждого элемента меню требуется как минимум две переменные (name, url), я использую массив внутри массива меню для каждой записи. Пример: 

$menu = array(array("a.php", "A Title"), array("b.php", "B Title"), array("c.php", "C Title"));

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

foreach($menu as $num => $options){
  $s = ((isset($activePage) && $options[0] == $activePage) OR ($options[0] == basename($_SERVER['PHP_SELF'])) ? " class=\"active\"" : "";
  echo "\n\t<li{$s}><a href=\"" . $options[0] . "\">" . $options[1] . "</a></li>";
}

Вы можете расширить эту концепцию, включив в нее цели, теги заголовков и т. Д.

Прелесть этого пути в том, что вам не нужно много писать для каждого проекта. Вы можете просто скопировать / вставить все это и изменить маленькие биты в массиве $ menu, и при необходимости (например, для элементов подменю) указать $ currentPage. Если $ currentPage не указан, он обратится к проверке текущей страницы (через $ _SERVER ['PHP_SELF']) и основывает на этом активное состояние.

Надеюсь, я объяснил это достаточно хорошо, и что это достаточно хорошо для вас, чтобы использовать!

(Небольшой отказ от ответственности, я просто проснулся и написал этот код с нуля. Хотя концепция работает - я использую ее годами - возможно, я сделал опечатку здесь и там. Извините, если это так!)

2 голосов
/ 10 января 2009

Вы можете присвоить класс или идентификатор элементу <body>, относящемуся к текущей странице. Затем стиль локальной навигации каждой страницы и так далее, используя это. Присвойте каждому элементу списка навигации класс, относящийся к тому, на что указывает ссылка.

т. 

ul.navigation a:link, ul.navigation a:visited {background-color:#eee}
ul.navigation a:active, ul.navigation a:hover, ul.navigation a:focus {background-color:#ccc}

body.about-us .navigation li.about-us-link a:link, body.about-us .navigation li.about-us-link a:visited {background-color:#000}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...