Не знаю, чем вызвана популярность меню в виде вкладок а-ля 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;
}

Вот в принципе и все, можно оценить готовый результат.

Категория: PHP/MySQL

Опубликовано: 23 мая 2008, Обновлено: 19.01.2013 - 22:07 просмотров: 27311