Использование 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 {и создадим класс here - он будет выделять тот пункт меню, на котором находится посетитель:
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;
}
#tabs ul li.here {Выделяем очень просто - цвет цвет элемента и цвет нижнего border-а таким же, как background. Подробнее о списках можно прочитать [link=http://webamator.ru/news.php?extend.8]здесь[/link].
border-bottom: 1px solid #f3f3f7;
background-color: #f3f3f7;
list-style: none;
display: inline;
}
А причем же здесь 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";
?>
<?Вроде работает, но чего-то не хватает... Ссылки - неужели нас устроят те что указаны в браузере по умолчанию? Сделаем так, чтобы при наведении курсора ссылка меняла цвет и выглядела подчеркнутой (атрибут underline):
$f_name="6";
require_once "menu.php";
?>
#tabs aВот в принципе и все, можно оценить готовый результат.
{
color: #511;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#tabs a:hover
{
color: #333;
text-decoration: underline;
}