Используя только HTML, нам придётся делать правки на 100 страницах сайта, это очень много. Так вот на помощь в таких ситуациях к нам приходит PHP. Достаточно будет поменять пункты меню всего лишь один раз в одном файле.
$menu = array (
array ("link"=>"Главная", "href"=>"index.php"),
array ("link"=>"О нас", "href"=>"about.php"),
array ("link"=>"Контакты", "href"=>"contact.php")
);
Отрисовываем меню с помощью цикла foreach:
echo "<ul>";
foreach ($menu as $item){
echo "<li><a href='{$item[href]}'> {$item [link]}</a></li>";
}
Отрисовываем меню отдельными ссылками:
<ul>
<li><a href='<?=$menu [0] ["href"]?>'><?=$menu [0] ["link"]?></a></li>
<li><a href='<?=$menu [1] ["href"]?>'><?=$menu [1] ["link"]?></a></li>
<li><a href='<?=$menu [2] ["href"]?>'><?=$menu [2] ["link"]?></a></li>
</ul>
Еще пример:
$menu_items = array(
"Home" => "index.php",
"Attractions" => "attractions.php",
"Restaurants" => "restaurants.php",
"History" => "history.php",
);
foreach($menu_items as $title => $url) {
echo "<li class='navbar'><a href='$url' title='$title' class='navbar' id='$title'>$title</a></li>";
}
И еще один:
<?
$arDocs = [
[
'group' => 'Маркетинговые издания',
'items' => [
['link' => '/img/pdf/book_HOME SWEET HOME.pdf', 'name' => 'Книга "HOME SWEET HOME"'],
['link' => '/img/pdf/house_EFFECT LIGHT.pdf', 'name' => 'Буклет EFFECT LIGHT'],
],
],
[
'group' => 'Инструкции и паспорта',
'items' => [
['link' => '/img/pdf/44-inzhenernye-seti-1.pdf', 'name' => 'Инженерные сети 1'],
['link' => '/img/pdf/44-inzhenernye-seti-2.pdf', 'name' => 'Инженерные сети 2'],
['link' => '/img/pdf/44_100-technical-passport.pdf.pdf', 'name' => 'Технический паспорт EFFECT LIGHT_100'],
['link' => '/img/pdf/44_120-technical-passport.pdf.pdf', 'name' => 'Технический паспорт EFFECT LIGHT_120'],
['link' => '/img/pdf/44_150-technical-passport.pdf.pdf', 'name' => 'Технический паспорт EFFECT LIGHT_150'],
]
],
[
'group' => 'Транспортировка',
'items' => [
['link' => '/img/pdf/transportirovochnye-shemy-44.pdf', 'name' => 'Транспортировочные схемы'],
]
],
[
'group' => 'Дизайн и отделка дома | Планировочные решения и спецификации',
'items' => [
['link' => '/img/pdf/44-shema-vklyucheniya-osvetitelnyh-priborov.pdf', 'name' => 'Схема включения осветительных приборов'],
['link' => '/img/pdf/44-inzhenernye-seti-3.pdf', 'name' => 'Отопление, водоснабжение'],
['link' => '/img/pdf/44-obschie-dannye-dk-effect-light.pdf', 'name' => 'Общие данные'],
['link' => '/img/pdf/instruction.pdf', 'name' => 'Инструкция по сборке'],
['link' => '/img/pdf/44-specifikacii-dverey-i-okon.pdf', 'name' => 'Спецификации дверей и окон'],
['link' => '/img/pdf/44-specifikaciya-rozetok-i-vyklyuchateley.pdf', 'name' => 'Спецификация розеток и выключателей'],
['link' => '/img/pdf/44-montazhnyy-plan.pdf', 'name' => 'Монтажный план'],
['link' => '/img/pdf/44-plan-privyazki-vyklyuchateley.pdf', 'name' => 'План привязки выключателей'],
['link' => '/img/pdf/44-plan-privyazki-rozetok.pdf', 'name' => 'План привязки розеток'],
['link' => '/img/pdf/44-plan-ulichnyh-fasadov.pdf', 'name' => 'План уличных фасадов'],
['link' => '/img/pdf/44-planirovochnoe-reshenie-i-specifikaciya-otdelki.pdf', 'name' => 'Планировочное решение и спецификация отделки'],
['link' => '/img/pdf/44-planirovochnoe-reshenie-s-rasstanovkoy-mebeli.pdf', 'name' => 'Планировочное решение с расстановкой мебели'],
['link' => '/img/pdf/44-plan-potolka-s-privyazkoy-osvetitelnyh-priborov.pdf', 'name' => 'План потолка с привязкой осветительных приборов'],
]
],
];
?>
<div class="drop-block">
<? foreach ($arDocs as $doc) { ?>
<div class="drop-block__item">
<a href="javasript:void(0)" class="drop-link"><span class="drop-arrow"></span><?=$doc['group']?></a>
<ol class="list-group">
<? foreach ($doc['items'] as $item) { ?>
<li class="list-group-item text-center">
<a href="<?=$item['link']?>" class="text-decoration-none">
<div class="d-md-flex justify-content-between">
<div class="justify-content-start fw-bold link-dark"><?=$item['name']?></div>
<div class="justify-content-end link-danger">Скачать <i class="bi bi-file-earmark-pdf-fill"></i>
</div>
</div>
</a>
</li>
<? } ?>
</ol>
</div>
<? } ?>
</div>