0

Здравствуйте.

Требуется сделать подсветку пункта меню в зависимости от того, на какой странице пользователь. Т.е. вставить в <li> параметр class="current", если мы находимя на той или иной странице.

Так же прошу обратить внимание на data-hover="" в теге <li>
Код меню (подключается в index.php)

.menu_buttons {
  margin: 11px 0 0 133px;
  font-family: Raleway, Arial, sens-serif;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
}
.menu_buttons * {
  box-sizing: border-box;
}
.menu_buttons li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 0.5em;
  padding: 0;
}
.menu_buttons a {
  padding: 0.5em 0;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  letter-spacing: 1px;
  text-decoration: none;
}
.menu_buttons a:before,
.menu_buttons a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.menu_buttons a:before {
  bottom: 0;
  display: block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: #50986d;
}
.menu_buttons a:after {
  left: 0;
  top: 0;
  padding: 0.5em 0;
  position: absolute;
  content: attr(data-hover);
  white-space: nowrap;
  max-width: 0%;
  overflow: hidden;
}
.menu_buttons a:hover:before,
.menu_buttons .current a:before {
  opacity: 1;
  width: 100%;
}
.menu_buttons a:hover:after,
.menu_buttons .current a:after {
  max-width: 100%;
}
/*---------------*/
body {
 padding: 50px;
 background: #333;  
}
<ul class="menu_buttons">
  <li class="current"><a href="#" data-hover="main">main</a>
  </li>
  <li><a href="#" data-hover="archive">archive</a>
  </li>
  <li><a href="#" data-hover="feedback">feedback</a>
  </li>
</ul>

Спасибо за внимание.

4
  • каку вас организовано групирование контента? проще говоря каким образом будут генерится страницы на которые ведут пункты меню
    – torokhkun
    7 дек 2015 в 19:05
  • простите, не очень понял вопроса, если можно, чуть разверните его :)
    – Artur
    7 дек 2015 в 19:08
  • окей, у вас в меню три странцы, это будут отдельные файлы к которым будет подключатся меню? или это будет один файл (тот же index.php) в который будут передаватся параметром переменная и исходя из ее значения у вас в свиче будет выводится тот или иной контент. или другой вариант?
    – torokhkun
    7 дек 2015 в 19:11
  • три отдельные страницы (index.php..., которые будут подключаться К МЕНЮ (header.php) (мне показалось, вы имеете в виду обратное)
    – Artur
    7 дек 2015 в 19:24

1 ответ 1

0

В файле в котором реализована конкретная страница создавать перемнную с названием текущей страницы и в меню проверять эту переменную

например в файле ктороый отвечает за страницу archive

/**
 * файл archive.php
 * 
 */
<?php
$page = 'archive';          // задаем значение текущей страницы
require_once('menu.php');   // подключаем меню

// тут полезный контент

?>

-

/**
 * файл menu.php
 *
 */
<ul class="menu_buttons">
    <li <?php if($page == 'main') echo 'class="current"'?> >
        <a href="#" data-hover="main">main</a>
    </li>
    <li <?php if($page == 'archive') echo 'class="current"'?> >
        <a href="#" data-hover="archive">archive</a>
    </li>
    <li <?php if($page == 'feedback') echo 'class="current"'?> >
        <a href="#" data-hover="feedback">feedback</a>
    </li>
</ul>
5
  • У Вас подключение к menu.php "require_once('menu.php');", а не инклуд, так задумано?
    – Artur
    7 дек 2015 в 19:25
  • include и require отличаются способом реакции на отсутствие включамого файла. Если файла нет include генерирует предупреждение, но работа основного скрипта продолжается, require при отсутствии включамого файла останавливает работу скрипта.
    – torokhkun
    7 дек 2015 в 19:26
  • Всё внедрил, всё работает. Топчик. :) Спасибо за помощь, много времени потратил на поиск ответа.
    – Artur
    7 дек 2015 в 19:31
  • @Artur только с такой реализацией акуратнее в продакшине. Вы обязаны передавать переменную $page или провеерять ее на существование а потом производить дальнейшую обработку
    – torokhkun
    7 дек 2015 в 19:35
  • Я думаю, понял Вас. Я просто пока что не изучал PHP.
    – Artur
    7 дек 2015 в 19:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.