Подсветка активного пункта меню на PHP |
Написал Administrator | |
06.10.2009 | |
Когда я делала первый сайт с использованием 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 прицепляю основной файл сайта лаборатории. Просьба только не тырить дизайн, он авторский. |
|
Последнее обновление ( 28.02.2010 ) |