[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Как выделить(цветом) активную кнопку меню?
kiss
Добрый день. Делаю сайт несколько страниц. Меню находится на странице "heаder.php" и состоит из нескольких кнопок. В каждую страницу это меню вставляется кодом
(галка ?php include("header.php");?галка) и при листании страниц все клавиши меню одинаковые по цвету.
Ведь получается, что в каждую страницу вставляется одно и то же меню. Поэтому и применить изменение цвета никак не придумаю. Нужно, чтобы в зависимости от того, какая клавиша была нажата- меняла цвет эта клавиша, когда страница откроется.


Как сделать, чтобы при включении соотв. страницы, соответствующая кнопка меню стала другим цветом? Это бы желательно сделать средствами html и сss. Чтоб понятно было мне.
Ron
Цитата (kiss @ 5.03.2017 - 10:24)
Это бы желательно сделать средствами html и сss. Чтоб понятно было мне.

А делается это либо через JS, либо на стороне PHP. =) В первом случае сравнением URL-ов из ссылок меню с текущим (открытым) адресом. Во втором, через флаги из исполняемого кода. Я не знаю как, от архитектуры зависит. Если не используется template engine, то делать придется через костыли. Возможно дикие. wink.gif

HTML и CSS здесь носят второстепенный характер. Задача только с их помощью решений не имеет. Вообще.
kirik
Цитата (Ron @ 5.03.2017 - 02:54)
HTML и CSS здесь носят второстепенный характер. Задача только с их помощью решений не имеет. Вообще.


Ну а как же покостылить?)

header.php:

...
<div class="menu">
<a
href="..." class="page1">page 1</a>
<a
href="..." class="page2">page 2</a>
<a
href="..." class="page3">page 2</a>
</div>

...


pageX.php:

<?
// ...
include 'header.php';
// ...
?>
...
<
style type="text/css">
.
menu .pageX {
color: red;
}
</style>
...

kiss
Спасибо kirik , Сейчас попробую разобраться.
sergeiss
Цитата (kiss @ 5.03.2017 - 10:24)
Меню находится на странице "heаder.php" и состоит из нескольких кнопок. В каждую страницу это меню вставляется кодом
(галка ?php include("header.php");?галка) и при листании страниц все клавиши меню одинаковые по цвету.

Я вижу тут аж целых 2 решения, которые близки по своей сути, если в них вникнуть. Причем оба решения не "костыльные" smile.gif

1. На стороне сервера.
Внутри файла header.php анализируем, с каким УРЛ работаем, и для соответствующего пункта меню добавляем какой-то класс - при этом сохраняем другой класс, который уже был ранее. Например, незамысловато так, добавляем класс "active". Для этого класса выставляем какие-то параметры CSS, отличающиеся от других пунктов меню.

2. На стороне браузера.
Я так думаю, что все пункты меню имеют какой-то определенный класс, которого нет у других элементов.
Тогда, после загрузки страницы, средствами JS определяем все параметры window.location (текущий адрес), находим среди пунктов меню тот, который ему соответствует и добавляем ему тот же класс "active", как и в предыдущем решении.

Суть обоих решений одна: добавить в нужный пункт меню некий класс, который позволит раскрасить этот пункт иначе, чем все остальные.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Ron
Цитата (kirik @ 5.03.2017 - 11:15)

Ну а как же покостылить?)

Так-то да. Хех. =) Правда стили не положено объявлять вне блока head. В HTML5 есть scoped, конечно, но и там есть особенности усложняющие жизнь. Элемент должен идти первым в текущем блоке.

sergeiss, тут вся архитектура костыльная, вот в чем дело. Поэтому любые решения поверх нее - автоматически костыльные. biggrin.gif
sergeiss
Цитата (Ron @ 5.03.2017 - 19:44)
тут вся архитектура костыльная, вот в чем дело

Интересно, что ты увидел костыльного в решении ТС? То, что хедер-пхп инклудится? Так это нормально.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Ron
Цитата (sergeiss @ 5.03.2017 - 22:32)
Интересно, что ты увидел костыльного в решении ТС? То, что хедер-пхп инклудится? Так это нормально.

Сомневаюсь, что это полноценный шаблон, судя по вопросу ТС. =)

Поэтому, дабы не усугублять, я бы реализовал JS вариант. Из двух зол, как говорится. Потому, как через JS, на самом деле, не всегда можно определить принадлежность страницы к пункту меню, особенно если она вложенная. И тут мы плавно подошли к breadcrumbs... biggrin.gif

P.s. Можно завести, конечно, специальный невидимый тэг, где в атрибутах будет указана необходимая информация о том что и как "светить". Через JS.
тык

Костылииии вы мои костылиии, дайте я вас сейчас наговняюююю. (на мотив песни "Родники") biggrin.gif
sergeiss
Ron, ты сказал много слов, но ничего по делу. Каков будет твой вариант решения данной задачи, который ты (лично ты) считаешь не костыльным и который еще не был тут озвучен?

И я, к тому же, так и не понял, где ты увидел эти самые костыли. В твоих словах нету никаких объяснений.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Ron
Цитата (sergeiss @ 6.03.2017 - 09:04)
Ron, ты сказал много слов, но ничего по делу.

Я сказал очень много ценной информации, причем именно по делу. =) Какой конкретно применить вариант, пускай решает ТС. Еще в первом посте дал вполне достаточно информации для решения этого вопроса. И в последнем посте, в ps-е еще один вариант, вполне оригинальный, кстати! =)

Ты же по сути повторил мой первый пост, только более развернуто. Так что это мы от тебя чего-нибудь по делу ждем! wink.gif

Цитата (sergeiss @ 6.03.2017 - 09:04)
который ты (лично ты) считаешь не костыльным и который еще не был тут озвучен?

В конкретной архитектуре их просто нету.

Пусть ТС сам подумает, ты же вроде за использование собственных мозгов. Или уже нет? wink.gif

sergeiss
Цитата (Ron @ 6.03.2017 - 09:57)
Я сказал очень много ценной информации, причем именно по делу. =)

Насчет архитектуры у ТС. Ты телепат, наверное smile.gif Мне лично только известно, что ТС инклудит файл header.php, а ты, оказывается, знаешь всю архитектуру wink.gif При этом, подключение данного файла как раз является совершенно нормальным.

Цитата (Ron @ 6.03.2017 - 09:57)
Пусть ТС сам подумает, ты же вроде за использование собственных мозгов.

Да, я "за" использование собственных мозгов. Но для этого надо дать человеку направление думанья. Не 2-мя словами, а чуть более.


_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Ron
Цитата (sergeiss @ 6.03.2017 - 10:04)
Насчет архитектуры у ТС. Ты телепат, наверное smile.gif

Всякое возможно, может у него и впрямь MVC, но я выражаю сильное сомнение на этот счет. Исходя из содержания вопроса. Но в отсутствии понимания архитектуры и вовсе сказать нечего, кроме абстрактных советов, что я и сделал в самом первом посте. =) Думаю если все же это был бы template engine, ТС сообразил просто дописать в assign какую-нибудь информацию о текущей странице.

Цитата (sergeiss @ 6.03.2017 - 10:04)
Но для этого надо дать человеку направление думанья. Не 2-мя словами, а чуть более.

Может быть, но обвинять меня в трепе не по делу, тоже не стоит, тем более с формулировкой "ничего по делу". Костыльные решения не потому что они твои (они по сути и мои тоже), а потому что архитектура такая, как мне кажется. Так что не знаю чем заслужил такую оценку своих постов.

Телепатить все-равно нужно, потому что ТС ничего и не сообщил толком о своей задаче. wink.gif Но, исходя из подписи, ты тоже телепатией увлекаешься. =) Так что спорить и критиковать друг друга нет смысла. Мы все телепаты, если задуматься.

Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.