Задать вопрос
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>
  ';
}
?>
  • Вопрос задан
  • 533 просмотра
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать бэк часть (API Эквайринг Тинькофф, VK API, API Cloudpayments)
28 апр. 2024, в 13:02
500000 руб./за проект
Парсер для обновления остатков товаров на МП Вайлдбериз
03 мая 2024, в 12:05
2000 руб./за проект
Построить Zigbee в Contiki OS (Легкая задача)
03 мая 2024, в 11:59
1 руб./за проект
Ещё заказы