Задать вопрос
workRave
@workRave
javascript

Как сделать меню сайта (дублирование кода, выбор пути)?

Добрый день, Великие Джедаи!
Я меня следующие трудности...
Я сделал сайт: karlson-tour.ru
Я хочу избавиться от одинакового кода на каждой странице (шапка, меню, подвал).
Как лучше это сделать?
1. Натянуть на WordPress? (Хватит ли знаний? Как потом править сайт просто на локальном компьютере и обновлять основной?)
2. Сделать вставку php-кода? (Напр. require_once(), но как выделить активный пункт меню?)
3. Сделать javascript вставку (тут вообще ничего не понятно)
<div class="collapse navbar-collapse navbar-responsive-collapse">
    <div class="menu-container">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="index.html" class="dropdown-toggle">
                </a>
            </li>
            <li class="">
                <a href="partnership.html" class="dropdown-toggle">
                    Сотрудничество
                </a>
            </li>
            <li class="dropdown">
                <a href="tel:+78122411466" class="dropdown-toggle"><i class="menu-icons-style radius-x fa fa-phone"></i> +7 (812) 241-14-66</a>
            </li>
        </ul>
    </div>
</div>


Решение:
1. Добавил в начало строчку:
<?php require_once('assets/php/costom.php') ?>
<!DOCTYPE html>

В costom.php следующий код:
<?php
function getMenu($arr)
{
  $index = '';
  $parnership = '';

  if($arr == index){$index='class="active"';}
  if($arr == partnership){$parnership='class="active"';}
  
  echo '
    <div class="menu-container">
      <ul class="nav navbar-nav">
        <li '.$index.'>
          <a href="index.php" class="dropdown-toggle">
            Экскурсия по крышам
          </a>
        </li>
        <li '.$parnership.'>
          <a href="partnership.php" class="dropdown-toggle">
            Сотрудничество
          </a>
        </li>
        <li>
          <a href="tel:+78122411466" class="dropdown-toggle"><i class="menu-icons-style radius-x fa fa-phone"></i> +7 (812) 241-14-66</a>
        </li>
        <li>
            <a href="http://vk.com/karlsontour" target="_blank"><i class="menu-icons-style radius-x fa fa-vk"></i></a>
        </li>
      </ul>
    </div>
  ';
}
?>
  • Вопрос задан
  • 540 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
Palehin
@Palehin
Frontend
Я правильно понимаю, что там нет никакой CMS и сайт состоит из пары страниц?

Самый простой (быдлокод) вариант, написать функцию типа:

function getMenu($arr)
{
	$class1 = '';
	$class2 = '';
	$class3 = '';
	
	if($arr == 1){$class1='class="active"';}
	if($arr == 2){$class2='class="active"';}
	if($arr == 3){$class3='class="active"';}
	//...
	
	echo '
	<div class="collapse navbar-collapse navbar-responsive-collapse">
		<div class="menu-container">
			<ul class="nav navbar-nav">
				<li '.$class1.'>
					<a href="index.html" class="dropdown-toggle">
						пункт 1
					</a>
				</li>
				<li '.$class2.'>
					<a href="partnership.html" class="dropdown-toggle">
						Сотрудничество
					</a>
				</li>
				<li '.$class3.'>
					<a href="tel:+78122411466" class="dropdown-toggle"><i class="menu-icons-style radius-x fa fa-phone"></i> +7 (812) 241-14-66</a>
				</li>
			</ul>
		</div>
	</div>
	';
}


Вызываете в нужной странице с аргументом:
getMenu(1); //2, 3
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
mr_jok
@mr_jok
технология SSI
Ответ написан
1 комментарий
1 комментарий
@Maa-Kut
Я бы соорудил функцию на том же PHP, которая бы формировала разметку меню. И параметр, которым можно было бы указать, какой пункт меню отметить активным. Можно и жестко разметку в PHP-файлик вынести и подключать require_once'ом, а активный пункт выделять уже на клиенте с помощью JS (навешивая класс на нужный элемент).
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Ещё заказы