PHP/MySQL » Меню на php


23 мая 2008 от admin
Не знаю, чем вызвана популярность меню в виде вкладок а-ля Opera или FireFox, но факт остается фактом - в последнее время появляется все больше ресурсов, использующих именно такое оформление навигации. За примерами далеко ходить не надо - достаточно открыть тот же майл.ру (вкладки-табы расположены внизу) или мету (вкладки расположены вверху). Давайте попробуем сделать такую навигацию на своем сайте - ведь это совсем несложно.

Использование php имеет ряд преимуществ:
- при изменении или редактировании достаточно попровить только один файл;
- такое меню будет работать, даже если у посетителя отключен java-script;
- практически любое визуальное оформление (редактируется всего один файл);

Для создания меню будем использовать список - он предоставляет все необходимые возможности.
Создадим файл menu.php:
<ul>
<li><a href="1.php">Раздел 1</a></li>
...
<li><a href="6.php">Раздел 6</a></li>
</ul>
Теперь стили.
Общие - укажем цвет фона, а также цвет, тип и размер, шрифта:
body {
background-color: #f3f3f7;
color: #000;
font-family: verdana,helvetica;
font-size:1em;
}
Стили для списка:
- установим элементы списка горизонтально
- обязательно укажем рамку (border: 1px solid #000)
#tabs ul {
margin: 0;
padding: 0;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 5;
padding: 0px 10px 5px;
border: 1px solid #000;
background-color: #ddd;
list-style: none;
display: inline;
}
и создадим класс here - он будет выделять тот пункт меню, на котором находится посетитель:
#tabs ul li.here {
border-bottom: 1px solid #f3f3f7;
background-color: #f3f3f7;
list-style: none;
display: inline;
}
Выделяем очень просто - цвет цвет элемента и цвет нижнего border-а таким же, как background. Подробнее о списках можно прочитать [link=http://webamator.ru/news.php?extend.8]здесь[/link].

А причем же здесь php? Все очень просто - давайте немножко изменим в menu.php элементы
<li>
а сам список разместим в блоке tabs:
<div id="tabs">
<li <?if ($f_name=="1"){echo"class='here'";}?>><a href="1.php">Раздел 1</a></li>
...
<li <?if ($f_name=="6"){echo"class='here'";}?>><a href="2.php">Раздел 6</a></li>
</div>
а само меню проинклюдим в тех файлах, которые будут его использовать
<?
$f_name="1";
require_once "menu.php";
?>
...
<?
$f_name="6";
require_once "menu.php";
?>
Вроде работает, но чего-то не хватает... Ссылки - неужели нас устроят те что указаны в браузере по умолчанию? Сделаем так, чтобы при наведении курсора ссылка меняла цвет и выглядела подчеркнутой (атрибут underline):
#tabs a
{
color: #511;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#tabs a:hover
{
color: #333;
text-decoration: underline;
}
Вот в принципе и все, можно оценить готовый результат.