• Главная
• Новости
• Контакты
• О нас

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

#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

• href ="#" >Главная


• href ="#" >О нас


• href ="#" >Контакты

• href =" ">Главная


• href =" ">О нас


• href =" ">Контакты

В браузере мы увидим обычное меню в виде списка.

Кликая на любом пункте меню мы перейдём на соответствующую страницу, меню при этом будет на всех страницах.

Теперь усложним задачу. Всё удаляем из файла menu.php и...

Пишем многомерный массив.

charset ="utf-8" >



$menu = array (
array ("link"=> "Главная", "href"=> "index.php" ),
array ("link"=> "О нас", "href"=> "about.php" ),
array ("link"=> "Контакты", "href"=> "contact.php" )
);
?>

• href ="[ "href" ]?> ">


• href =" ">


• href =" ">

И на последнем этапе...

Отрисовываем меню с помощью цикла foreach .

Удаляем из файла menu.php список

и вместо него пишем следующий код.

echo "

" ;
foreach ($menu as $item ){
echo "
• {$item }
" ;
}

В браузере увидим тот же результат.

Чтобы изменить пункты меню, достаточно изменить их в файле menu.php всего один раз.

Поскольку она раскрывает содержание модуля menu.php . Ниже будет представлена собственная разработка меню на PHP, которая была написана с нуля в блокноте.

Этот код особенно будет полезен для динамичных сайтов, которые имеют самописные движки . Я предложу два варианта кода, которые имеют незначительные отличия (в чем различие будет пояснено после).

Для начала приведу примерную структуру сайта, для которого подойдет это меню. Структура сайта должна иметь следующий вид (классический вид):

/index.html /razdel_1/ /razdel_1/articles_1.html /razdel_1/articles_2.html ... /razdel_2/ /razdel_2/articles_1.html /razdel_2/articles_2.html ... ... ... /razdel_N/articles_2.html

Сайт может содержать у разделов еще и подразделы:

/razdel_1/podzaderl_1/ /razdel_1/podzaderl_1/articles_1.html /razdel_1/podzaderl_1/articles_2.html ... /razdel_1/podzaderl_2/articles_1.html /razdel_1/podzaderl_2/articles_2.html

Такая структура также будет работать для нашего меню лишь с небольшими отличиями.

Я предлагаю создать отдельный файл для меню на php. Например, menu.php было бы отличным названием для такого файлика. Для реализации меню также представлен стиль меню в CSS, чтобы сразу сделать его более менее красивым. Естественно этот стиль дается только для ознакомления, поскольку дизайны у сайтов очень разные.

Код для стиля меню в CSS:

.menu { height:42px; padding:0 0 0 16px; background:url(images/spacer.png) repeat; } .menu li { display:block; float:left; } .menu li.active { background: #000011; } .menu a { color:#FFF; display:block; line-height:42px; text-decoration:none; padding:0 14px; } .menu a:hover { background:url(images/spacer.png) repeat; }

Теперь, давайте рассмотрим первый вариант реализации меню на PHP, который является немного упрощенным.

Первый вариант кода меню на PHP

\n"; for ($i=0;$i": "

"; echo "".$array_menu[$i]["name"]."

\n"; } echo "

"; ?>

Меню можно разделить на две части. Первая содержит информационный массив $array_menu , в который заносятся названия наших разделов с ссылками на разделы. Есть вариант забить эти данные в базу данных mySQL, но особо смысла в этом нет, поскольку выборка совсем небольшая, поэтому на скорость работы это никак не повлияет.

Вторая часть содержит вывод меню через цикл for . В цикле происходит сравнение адреса сайта с адресом из массива $array_menu . Если есть совпадение, то выводим очередной раздел меню со специальным классом active:

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

  Порядок следования в массиве будет сохранятся и при выводе меню на сайте. То есть массив надо заполнять в порядке, в котором нужно выводить меню.

  Примечание:
  В случае, если URL (адреса) заголовком разделов имеют вид:
  /razdel_1
  или такой
  /razdel_1/nazvanie_razdela.html
  то в array_menu нужно записывать точное совпадение:
  $array_menu[$i]["url"]="/razdel_1"
  или для второго случая:
  $array_menu[$i]["url"]="/razdel_1/nazvanie_razdela.html" ;

  Как работает первый вариант меню?
  Он подсвечивает меню только, если Вы находитесь по адресу заголовка раздела. Например, если адрес страницы будет /razdel_1/articles_1.html , то меню никак не будет подсвечиваться.

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

  Второй вариант кода меню на PHP

  "; for ($i=0;$i": "

  "; echo "".$array_menu[$i]["title"]."

  "; } else { echo ($URL) == ($array_menu[$i]["url"]) ? "

  ": "

  "; echo "".$array_menu[$i]["title"]."

  "; } } echo "

В общем случае задача формирования меню включает:

• выделение HTML элементов для построения меню;
• создание шаблона меню (создание шаблона компонента Меню );
• включение функции показа меню (вызов компонента Меню ) в общем шаблоне ("прологе" и "эпилоге");
• заполнение меню в соответствии со структурой сайта.

Структура меню

Любое меню на сайте строится на основе двух составляющих:

• массива данных $aMenuLinks , определяющего состав меню, задает названия и ссылки для всех пунктов меню. Управление массивом данных осуществляется через административный интерфейс;
• шаблона внешнего представления меню. Шаблон меню - это PHP код, определяющий внешний вид меню (шаблон компонента Меню ). Шаблон меню обрабатывает массив данных, выдавая на выходе HTML-код.

Массив данных меню

Данные для каждого типа меню хранятся в отдельном файле, имя которого имеет следующий формат: .<тип меню>.menu.php . Например, для хранения данных меню типа left будет использоваться файл .left.menu.php , а для хранения данных меню типа top - файл .top.menu.php .

Меню является иерархически наследуемым. Файлы меню размещаются в папках тех разделов сайта, где требуется показ соответствующих типов меню. Если для данного раздела не создан соответствующий файл меню, система производит поиск файла в каталоге уровнем выше.

Например, т.к. основное меню (в демо-версии продукта, это меню типа top ) должно выводиться во всех разделах, то файл данного меню помещается только в корневой каталог сайта.

Соответственно меню второго уровня (в демо-версии продукта, это меню left ) выводится отдельно для каждого раздела сайта. Поэтому в папке каждого раздела создается свой файл для данного типа меню.

Ещё пример : посетитель находится в разделе /ru/company/about/ . Для показа меню типа left файл меню ищется системой в следующей последовательности:

1. /ru/company/about/.left.menu.php
2. /ru/company/.left.menu.php
3. /ru/.left.menu.php
4. /.left.menu.php

Если в одном из каталогов найдено меню, то поиск останавливается и в последующих каталогах уже не ищется.

Система Bitrix Framework позволяет также создавать меню динамического типа Для этого требуется в компоненте Меню включить опцию Подключать файлы с именами вида.тип_меню.menu_ext.php ("USE_EXT" => "Y"), которая по умолчанию выключена. . Т.е. массив данных таких меню генерируется автоматически на основании некоторых данных, получаемых с помощью программного кода. Данный код должен храниться в папке соответствующего раздела сайта в файле с именем .<тип меню>.menu_ext.php.

Основная задача подобных файлов - это манипуляция массивом $aMenuLinks . Данные файлы не редактируются визуально в модуле Управление структурой , поэтому они не смогут быть случайно отредактированы при визуальном редактировании меню. При создании этого файла используйте компонент Пункты меню (bitrix:menu.sections ).

Примечание : В абзаце выше речь идёт только о дополнении созданного меню названиями разделов инфоблоков. Например, для дополнения меню названиями форумов этот вариант не годится.

Внимание! Если в качестве пунктов меню используются разделы каталога без ЧПУ, необходимо указывать переменные в значимых переменных запроса.

Примером такого меню может служить левое меню раздела Каталог книг , представленное в демо-версии продукта. Здесь первые два пункта меню Авторы и Рецензии созданы обычным способом, а остальные (Бизнес-литература , Детская литература и т.д.) формируются динамически.

В данном случае в качестве пунктов меню используются названия групп каталога Книги , созданного на основе информационных блоков. Программный код, на основе которого генерируется меню, хранится в файле .left.menu_ext.php в папке /e-store/books/ .

В файлах .<тип меню>.menu.php могут использоваться следующие стандартные переменные:

• $sMenuTemplate - абсолютный путь к шаблону меню (данная переменная используется крайне редко);
• $aMenuLinks - массив, каждый элемент которого описывает очередной пункт меню.

  Структура данного массива:

  Array ( => пункт меню 1 Array ( => заголовок пункта меню => ссылка на пункте меню => массив дополнительных ссылок для подсветки пункта меню: Array ( => ссылка 1 => ссылка 2 ...) => массив дополнительных переменных передаваемых в шаблон меню: Array ([имя переменной 1] => значение переменной 1 [имя переменной 2] => значение переменной 2 ...) => условие, при котором пункт меню появляется это PHP выражение, которое должно вернуть "true") => пункт меню 2 => пункт меню 3 ...)

Примеры файлов меню

IsAuthorized()"), Array("Журнал обучения", "gradebook.php", Array(), Array(), "\$GLOBALS["USER"]->IsAuthorized()"), Array("Анкета специалиста", "profile.php", Array(), Array(), "\$GLOBALS["USER"]->IsAuthorized()"),); ?> IncludeComponent("bitrix:menu.sections", "", Array("ID" => $_REQUEST["ELEMENT_ID"], "IBLOCK_TYPE" => "books", "IBLOCK_ID" => "30", "SECTION_URL" => "/e-store/books/index.php?SECTION_ID=#ID#", "CACHE_TIME" => "3600")); $aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt); ?>

Организация показа меню

Показ меню на страницах сайта выполняется с помощью компонента Меню (bitrix:menu) . Например, вызов верхнего меню на демо-сайте имеет следующий вид.

В этой статье я покажу, как можно создавать многоуровневое меню на PHP и MySQL . Безусловно, вариантов его создания можно придумать много, но, судя по количеству Ваших вопросов на эту тему, Вам нужен пример. И его я приведу в этой статье. Сразу отмечу, что данная статья имеет смысл только для тех, кто знает PHP и умеет работать с MySQL . Всем остальным сначала надо пройти этот , либо прочитать какие-нибудь книги по PHP и MySQL .

Для начала создадим таблицу в базе данных со следующими полями:

• id - уникальный идентификатор.
• title - анкор ссылки в меню.
• link - адрес, на который будет вести пункт меню.
• parent_id - родительский ID. Если родительского пункта нет, то здесь будет NULL (либо можно ещё 0 поставить).

С таблицей разобрались, теперь пришло время PHP-кода . Полный PHP-код приведён ниже:

$mysqli = new mysqli("localhost", "root", "", "db"); // Подключаемся к БД
$result_set = $mysqli->query("SELECT * FROM `menu`"); // Делаем выборку всех записей из таблицы с меню
$items = array(); // Массив для пунктов меню
while (($row = $result_set->fetch_assoc()) != false) $items[$row["id"]] = $row; // Заполняем массив выборкой из БД
$childrens = array(); // Массив для соответствий дочерних элементов их родительским
foreach ($items as $item) {
if ($item["parent_id"]) $childrens[$item["id"]] = $item["parent_id"]; // Заполняем массив
}
function printItem($item, $items, $childrens) {
/* Выводим пункт меню */
echo "

"; // Начинаем внутренний список, если дочерних элементов ещё не было
$ul = true; // Устанавливаем флаг
}
echo printItem($items[$key], $items, $childrens); // Рекурсивно выводим все дочерние элементы
}
echo "";
}
?>



Меню



foreach ($items as $item) {
if (!$item["parent_id"]) echo printItem($item, $items, $childrens); // Выводим все элементы верхнего уровня
}
?>




Этот код полностью рабочий, однако, Вы должны понимать, что так никто не пишет (в частности, вывод через echo HTML-тегов ). И Ваша задача взять алгоритм из этого кода, но не сам код. А дальше этот алгоритм подключить к своему движку. Я постарался тщательно прокомментировать код вывода многоуровневого меню на PHP и MySQL , но, безусловно, он не самый прозрачный и требует уже неплохих начальных знаний. Если Вы ещё плохо знаете PHP и MySQL , то сначала настоятельно рекомендую пройти этот