Biologii.Net  
   
Поиск по сайту:  
 
Главная arrow Техотдел arrow Сайты arrow Подсветка активного пункта меню на PHP   
Меню
Главная
Об авторе
ФМШ
Биология
Олимпиады
КСЕ
Техотдел
Кулуары
Файловый архив
Карта сайта
Контакты
Редколлегия
Сказать
Написать мне
Последние новости
Кто он-лайн
"Элементы" - новости науки
Авторизация





Забыли пароль?
Прогноз погоды
Подсветка активного пункта меню на PHP Версия для печати
Написал Administrator   
06.10.2009

Когда я делала первый сайт с использованием PHP, то долго мучилась над проблемой - как сделать подсветку активного пункта меню. Понятно, что если на каждый пункт меню - отдельный файл, то все просто - пишем активному пункту свой класс в CSS и на странице указываем его для нужного пункта.

Но если использовать блочное построение страниц, когда страница с меню одна и включается в файлы с содержимым через include, то тогда и встает проблема - как дать знать ей, что здесь надо подсвечивать именно этот пункт?

Надо сказать, что первый раз я решила эту проблему страшно криво, и только потом наткнулась на гораздо более простой путь, через переменные. Наверное, это тоже не верх совершенства, но пока ничего проще не нашла. Приведу две версии - для разных способов сборки сайта из блоков.

Рассмотрим два варианта блочной структуры сайта.  

Вариант 1.  Используется в интерактивных сайтах, где страницы могут содержать php-программы - например, формы обратной связи, гостевые, комментарии посетителей и тому подобное. 

Сайт в этом варанте представляет из себя много страниц с содержимым - назовем их index.php, chapter_1.php, chapter_2.php и т.д., в каждую из которых через include включается файл, содержащий шапку и меню - header.php и другие блоки - подвал, различные модули (с популярными статьями, с комментариями - да что угодно).

Image
Рис.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 и т.д. По этому типу сверстан сайт лаборатории.

Image
Рис.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 )
 
< Предыдущая статья   Следующая статья >
Разделы файлового архива
Последние файлы
vsesib_16-17_bio_3et_otvety.zip
18-03-2017
municipal_16-17_Novosib_bio.zip
25-11-2016
vsesib_16_17_bio_1_etap_otv.zip
03-11-2016
vsesib_15-16_bio_3et_otvety.zip
19-03-2016
biol_2_et_2015_Novosib.zip
18-11-2015

Biologii.Net © 2009-17

Материалы сайта являются авторскими.
Если вы что-то скопировали – не забудьте поставить ссылку.

почта Белка