How to make a site menu (code duplication, path selection)?

W

workRave2016-04-20 12:42:29

PHP

workRave, 2016-04-20 12:42:29

Good afternoon, Great Jedi!
I faced the following difficulties...
I made a website: karlson-tour.ru
I want to get rid of the same code on every page (header, menu, footer).
What is the best way to do this?
1. Pull on WordPress? (Will I have enough knowledge? How then to edit the site simply on the local computer and update the main one?)
2. Insert the php code? (For example, require_once(), but how to highlight the active menu item?)
3. Insert javascript (nothing is clear here at all)

<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>

Solution:
1. Added a line to the beginning:

<?php require_once('assets/php/costom.php') ?>
<!DOCTYPE html>

In costom.php the following code:

<?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>
  ';
}
?>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Alexander, 2016-04-20
@workRave

I understand correctly that there is no CMS and the site consists of a couple of pages?
The easiest (bydlokod) option is to write a function like:

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>
  ';
}

Call in the desired page with an argument:
getMenu(1); //2, 3

M

Mikhail Lyalin, 2016-04-20
@mr_jok

SSI technology

M

Maa-Kut, 2016-04-20
@Maa-Kut

I would build a function in the same PHP that would generate the menu markup. And a parameter that could indicate which menu item to mark as active. You can also hardcode the markup into a PHP file and include it with require_once, and select the active item already on the client using JS (by attaching a class to the desired element).