|
Когда я делала первый сайт с использованием PHP, то долго мучилась над проблемой - как сделать подсветку активного пункта меню. Понятно, что если на каждый пункт меню - отдельный файл, то все просто - пишем активному пункту свой класс в CSS и на странице указываем его для нужного пункта.
Но если использовать блочное построение страниц, когда страница с меню одна и включается в файлы с содержимым через include, то тогда и встает проблема - как дать знать ей, что здесь надо подсвечивать именно этот пункт?
Надо сказать, что первый раз я решила эту проблему страшно криво, и только потом наткнулась на гораздо более простой путь, через переменные. Наверное, это тоже не верх совершенства, но пока ничего проще не нашла. Приведу две версии - для разных способов сборки сайта из блоков.
Рассмотрим два варианта блочной структуры сайта.
Вариант 1. Используется в интерактивных сайтах, где страницы могут содержать php-программы - например, формы обратной связи, гостевые, комментарии посетителей и тому подобное.
Сайт в этом варанте представляет из себя много страниц с содержимым -
назовем их index.php, chapter_1.php, chapter_2.php и т.д., в каждую из
которых через include включается файл, содержащий шапку и меню - header.php и другие блоки - подвал, различные модули (с популярными статьями, с комментариями - да что угодно).
 Рис.1. Красным выделены блоки, вставляемые через include в разные страницы сайта. Эти блоки одинаковы на всех страницах, а Сontent на каждой странице свой. На сером фоне – названия файлов. Для примера приведены две разные страницы.
Проблема в чем - файл 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 и т.д. По этому типу сверстан сайт лаборатории.
 Рис.2. Красным выделены страницы с содержимым, вставляемые через include в одну главную страницу сайта, которая служит как бы рамкой. Header и Footer здесь – просто блоки ее кода, которые могут быть div-ами, или ячейками таблицы. Для примера приведены главная страница и - она же, но контент вставлен из html-файла с id=222.
Проблема все та же - файл, содержащий меню - 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 прицепляю основной файл сайта лаборатории. Просьба только не тырить дизайн, он авторский.
|
