Когда я делала первый сайт с использованием PHP, то долго мучилась над проблемой - как сделать подсветку активного пункта меню. Понятно, что если на каждый пункт меню - отдельный файл, то все просто - пишем активному пункту свой класс в CSS и на странице указываем его для нужного пункта.
Но если использовать блочное построение страниц, когда страница с меню одна и включается в файлы с содержимым через include, то тогда и встает проблема - как дать знать ей, что здесь надо подсвечивать именно этот пункт?
Надо сказать, что первый раз я решила эту проблему страшно криво, и только потом наткнулась на гораздо более простой путь, через переменные. Наверное, это тоже не верх совершенства, но пока ничего проще не нашла. Приведу две версии - для разных способов сборки сайта из блоков.
Рассмотрим два варианта блочной структуры сайта.
Вариант 1. Используется в интерактивных сайтах, где страницы могут содержать php-программы - например, формы обратной связи, гостевые, комментарии посетителей и тому подобное.
Сайт в этом варанте представляет из себя много страниц с содержимым - назовем их index.php, chapter_1.php, chapter_2.php и т.д., в каждую из которых через include включается файл, содержащий шапку и меню - header.php и другие блоки - подвал, различные модули (с популярными статьями, с комментариями - да что угодно).
Проблема в чем - файл header.php у нас один на всех страницах, а надо, чтобы подсветка пунктов меню была разной.
Для этого блок меню в header.php пишется примерно так:
Файл header.php
<div id="menu"> <ul> <li class="<?=$main;?>"> <a href="index.php"> Главная </a> </li> <li class="<?=$chapter1;?>"> <a href="chapter_1.php"> Раздел 1 </a> </li> <li class="<?=$chapter2;?>"> <a href="chapter_2.php"> Раздел 2 </a> </li> <li class="<?=$about;?>"> <a href="about.php"> О нас </a> </li> </ul> </div>
Мы задали стиль каждого пункта меню отдельной переменной - в данном примере это $main, $chapter1, $chapter2 и $about.
Дальше в файле CSS сайта создаем класс для активного пункта меню - обычно он другого цвета, но можно сделать что угодно - и больший размер шрифта, и подчеркивание, и даже отдельную картинку фона - дело вкуса. Все нужные вам свойства просто прописываются в этом классе (если не знаете, как - смотрите справочники и учебники по CSS, например здесь).
Файл style.css
#menu .active a { color: #FFFFFF; /* Задаем белый цвет шрифта для этого класса */ }
Итак, мы задали белый цвет для пункта меню, которому присвоен класс "active" (неактивные пункты были красные)
Что делать дальше, я думаю, вы уже догадались сами. В каждом файле с уникальным содержимым осталось только где-нибудь наверху - где угодно, но важно, чтобы ДО строки
include_once(header.php);
присвоить нужной переменной значение active.
Например, во всех файлах, относящихся к разделу 1 - т.е. тех, где мы хотим, чтобы был подсвечен пункт меню РАЗДЕЛ 1 вставляем -
Файл chapter_1.php
<?php $chapter1 = "active"; ## здесь могут быть еще любые строки с кодом include_once(header.php); ?>
Вариант 2. Подходит для статичных сайтов, где контент - это обычные html-страницы.
Весь сайт в данном случае может фактически быть одной страницей - назовем ее index.php, которая представляет собой в сущности "рамку": шапку с меню, боковые и нижние меню, подвал. В центре этой рамки определяем область для контента, в которую мы и будем вставлять html-cтраницы с содержимым - main.html, chapter_1.html, chapter_2.html и т.д. По этому типу сверстан сайт лаборатории.
Проблема все та же - файл, содержащий меню - index.php у нас один, а контент меняется, и надо подсвечивать разные пункты.
Конечно, так же, как в предыдущем случае, в файле css сайта у нас должны быть определены свойства для класса active активного пункта меню.
Файл style.css
#topmenu .item { float: left; background: url(menut.jpg); margin: auto 6px; padding: auto 3px; height: 38px; text-align: center; vertical-align: middle; width:auto; } #topmenu a { font-family: Arial, Verdana; color: #6CA; font-size: 15px; font-family: Arial, Verdana; font-weight: 800; text-decoration: none } #topmenu a.active { color: #FFF; } #topmenu a:hover { color: #FFF; border-bottom: #FFF solid 1px; }
Теперь - фрагменты кода основной страницы упомянутого лабораторного сайта. Там столкнулась с какой-то старой версией PHP на сервере, которая не понимала краткую запись вставки кода через <? а понимала только <?php. Поэтому код несколько корявый.
Файл index.php
<?php /* Определяем, какой пункт меню должен быть активен если включается файл с содержимым с определенным id */ if (isset($_GET['id'])) $id = $_GET['id']; else $id=1; if ($id<=9) $main='active'; else $main=''; if ($id>=10 and $id<=99) $ch1='active'; else $ch1=''; if ($id>=100 and $id<=199) $ch2='active'; else $ch2=''; ?>
/* Блок МЕНЮ. Пишем обычный HTML код, с включениями PHP, в которых класс каждого пункта меню опредеяется через свою отдельную переменную */ <DIV class="item"> <p><a <?php echo'class="'.$main.'"'; ?> href="index.php?id=1">Главная</a></p> </DIV> <DIV class="item"> <p><a <?php echo'class="'.$ch1.'"'; ?> href="?id=10">Раздел 1</a></p> </DIV> <DIV class="item"> <p><a <?php echo'class="'.$ch2.'"'; ?> href="?id=100">Раздел 2</a></p> </DIV>
/* Блок КОНТЕНТА. Определяем, какие файлы должны туда включаться в зависимости от id */ <div id=content> <?php if ($id==1){ include("home.html"); } if ($id==10){ include("chapter_1/main_ch1.html"); } if ($id==100){ include("chapter_2/main_ch2.html"); } if ($id==101){ include("chapter_2/01_ch2.html"); } ?> </div>
Отмечу, что файлов у нас может быть, конечно больше, чем пунктов меню. Так здесь для различных файлов, где должно подсвечиваться меню "Главная", зарезервированы id c 1 по 9, для раздела 1 - с 10 по 99, для раздела 2 - тоже 100 разных id.
В этом варианте сайта все ссылки на любую его страницу имеют вид index.php?id=номер
Можно сделать и по-другому: кроме переменной id, обозначающей конкретный файл, ввести еще и переменную cat, обозначающую раздел, а уже внутри нее присваивать разные id страницам. Тогда ссылки будут вида index.php?cat=номер&id=номер . Это более логично и кратко. Общий принцип, думаю, понятен.
По этому же принципу можно сделать сменяющиеся, в зависимости от контента заголовки у нашей единственной страницы index.php (то, что находится между тегами<title> в ее шапке и видно посетителю в меню браузера) - тоже через переменную.
Сами html-страницы контента тоже могут содержать включаемые блоки - например, подменю данных разделов.
Как пример реализации варианта 2 прицепляю основной файл сайта лаборатории. Просьба только не тырить дизайн, он авторский.