Как выделить активный пункт меню

@tispb · Регистрация: 12.05.2013

Студворк — интернет-сервис помощи студентам

Добрый вечер, форумчане! Помогите пожалуйста новечку!
Сделала меню:

PHP

<?php $uri = $_SERVER["REQUEST_URI"];;?>
<ul>
<li><a href="index.php" <?php if ($uri == "/index.php") {echo 'class="active"';}?>>ГЛАВНАЯ</a></li>
<li><a href="alp.php" <?php if ($uri == "/alp.php") {echo 'class="active"';}?>>ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php" <?php if ($uri == "/conditioners.php" or $uri == "?") {echo 'class="active"';}?>>КОНДИЦИОНЕРЫ</a></li>
<li><a href="foto.php" <?php if ($uri == "/foto.php") {echo 'class="active"';}?>>ФОТО</a></li>
<li><a href="contacts.php" <?php if ($uri == "/contacts.php") {echo 'class="active"';}?>>КОНТАКТЫ</a></li>
</ul>

Так вот - нужно сделать так, что бы пункт меню "КОНДИЦИОНЕРЫ" подсвечивался не только когда я перехожу на стрнаицу conditioners.php, но и на стр с переменными - view_cat.php?cat='.strtolower($row["brand"]).'&type='.$row["type"].'"

Я не знаю как ее вставить!

@MarlboroRed · 04.02.2014, 20:25

Меняете это

Сообщение от tispb

<?php $uri = $_SERVER["REQUEST_URI"];;?>

на это

PHP

1	<?php $uri = $_SERVER["PHP_SELF"];?>

Хотя я бы решил эту задачу с помощью js.

@tispb · 04.02.2014, 21:05 **[ТС]**

У меня не получается... Делаю так

PHP

<?php $uri = $_SERVER["PHP_SELF"];?>
<ul>
<li><a href="index.php" <?php if ($uri == "/index.php") {echo 'class="active"';}?>>ГЛАВНАЯ</a></li>
<li><a href="" <?php if ($uri == "/") {echo 'class="active"';}?>>ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php" <?php if ($uri == "/conditioners.php" or $uri == "view_cat.php?cat=" ) {echo 'class="active"';}?>>КОНДИЦИОНЕРЫ</a></li>
<li><a href="" <?php if ($uri == "/") {echo 'class="active"';}?>>ФОТО</a></li>
<li><a href="contacts.php" <?php if ($uri == "/contacts.php") {echo 'class="active"';}?>>КОНТАКТЫ</a></li>
</ul>

Было бы здорово, если бы Вы рассказали, как сделать это с помощью js

@MarlboroRed · 04.02.2014, 21:40

Сообщение от tispb

У меня не получается

странно, у меня все работает.

Сообщение от tispb

если бы Вы рассказали, как сделать это с помощью js

Между тегами <head> пишите

HTML5

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

дальше вместо меню:

HTML5

<script type="text/javascript">
$().ready(function(){
    var thisUrl = document.location.href.split("/")[3].split("?");
    $.each($('.menu li a'),function(){
        if ($(this).attr("href")==thisUrl[0]){
            $(".active").removeClass("active");
            $(this).addClass("active");
        }
    });
});
</script>
 
<ul>
<li><a href="index.php" class="active">ГЛАВНАЯ</a></li>
<li><a href="">ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php">КОНДИЦИОНЕРЫ</a></li>
<li><a href="">ФОТО</a></li>
<li><a href="contacts.php">КОНТАКТЫ</a></li>
</ul>

@tispb · 04.02.2014, 21:56 **[ТС]**

За скрипт огромное спасибо!

Не получается следующее:

PHP

1	<li><a href="conditioners.php" <?php if ($uri == "/conditioners.php" or $uri == "view_cat.php?cat=") {echo 'class="active"';}?>>КОНДИЦИОНЕРЫ</a></li>

Пункт меню КОНДИЦИОНЕРЫ подсвечивается при переходе на conditioners.php;
а вот при переходе на view_cat.php?cat= НЕТ!!!!
А ссылка изначально с переменными :

PHP

1	view_cat.php?cat='.strtolower($row["brand"]).'&type='.$row["type"].'

Я ее и с переменными вставляла - все равно пункт меню не подсвечивается...

@MarlboroRed · 04.02.2014, 22:04

Сообщение от tispb

а вот при переходе на view_cat.php?cat= НЕТ!!!!

Это я как-то пропустил

после этого

Javascript

1	var thisUrl = document.location.href.split("/")[3].split("?");

добавьте строчку

Javascript

1	if(thisUrl[0]=="view_cat.php"){thisUrl[0]="conditioners.php";}

Добавлено через 1 минуту
вообще я не пробовал запускать этот скрипт, я свой, что у меня уже был переделал под ваше меню. Но теоретически должно работать)

@tispb · 04.02.2014, 22:14 **[ТС]**

Еще 2 вопросика:
1) Меню подключено ко всем стр (меню в block-header.php)

PHP

1
2
3

<?php
include("include/block-header.php");
?>

2) Сайт на денвере

На скрипте это все будет работать (я смогу ч-з браузер увидеть)?

Добавлено через 8 минут
И все таки можно как-нибудь без js (возвращаясь к первому моему вопросу)???

@MarlboroRed · 04.02.2014, 22:20

Сообщение от tispb

И все таки можно как-нибудь без js (возвращаясь к первому моему вопросу)???

просто без JS это выходит не совсем правильно. С js выходит гибче приложение. Вот то, что я вам написал для замены меню, запишите в файл "block-header.php", а что там было до этого удалите. Переименуйте его в "block-header.html" и подключайте:

PHP

1	<?php include("include/block-header.html");?>

@tispb · 04.02.2014, 22:29 **[ТС]**

Мой блок headr выглядит так:

PHP

<?php
     defined('airshop') or die ('Доступ запрещен!');
?>
<div id="block-header">
<!--Название-->
<img id="nazv" src="https://www.cyberforum.ru/images/name.png" />
<!--Логотип-->
<div id="logo">
<img src="https://www.cyberforum.ru/images/logo.png" width="80px" height="80px"/><br />
<span class="nambers">8 (921) </span><br />
<a href="mailto:info@piter-promalp.ru"></a>
</div>
<!--Меню-->
<?php $uri = $_SERVER["REQUEST_URI"];;?>
<div id="menu">
<ul>
<li><a href="index.php" <?php if ($uri == "/index.php") {echo 'class="active"';}?>>ГЛАВНАЯ</a></li>
<li><a href="" <?php if ($uri == "/") {echo 'class="active"';}?>>ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php" <?php if ($uri == "/conditioners.php" or $uri == "") {echo 'class="active"';}?>>КОНДИЦИОНЕРЫ</a></li>
<li><a href="" <?php if ($uri == "/") {echo 'class="active"';}?>>ФОТО</a></li>
<li><a href="contacts.php" <?php if ($uri == "/contacts.php") {echo 'class="active"';}?>>КОНТАКТЫ</a></li>
</ul>
<!--Поиск-->
<div id="block-search">
<form method="GET" action="search.php?q=" >
<input type="text" id="input-search" name="q" placeholder="Поиск по сайту" value="<?php echo $search; ?>" />
<span></span>
</form>
<ul id="result-search">
</ul>
</div>
</div>
</div>

Будет ли работать ключ defined('airshop') or die ('Доступ запрещен!');
И правильно ли я понимаю что нужно расставить все теги html - типа <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<body> и т.п.?????????????????????

@MarlboroRed · 04.02.2014, 22:36

Сообщение от tispb

Будет ли работать ключ defined('airshop') or die ('Доступ запрещен!');

Ну, работать должен

Сообщение от tispb

И правильно ли я понимаю что нужно расставить все теги html - типа <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<body> и т.п.?????????????????????

Где расставить?

@tispb · 04.02.2014, 22:39 **[ТС]**

Сообщение от MarlboroRed

Где расставить?

в блоке block-header.html
код php, который я выложила - это весь фаил block-header.php

@MarlboroRed · 04.02.2014, 22:50

Вам нужно вместо вашего меню вставить это.

HTML5

<script type="text/javascript">
$().ready(function(){
    var thisUrl = document.location.href.split("/")[3].split("?");
    if(thisUrl[0]=="view_cat.php"){thisUrl[0]="conditioners.php";}
 
    $.each($('.menu li a'),function(){
        if ($(this).attr("href")==thisUrl[0]){
            $(".active").removeClass("active");
            $(this).addClass("active");
        }
    });
});
</script>
 
<ul>
<li><a href="index.php" class="active">ГЛАВНАЯ</a></li>
<li><a href="">ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php">КОНДИЦИОНЕРЫ</a></li>
<li><a href="">ФОТО</a></li>
<li><a href="contacts.php">КОНТАКТЫ</a></li>
</ul>

Я вижу что тут просто код, без <head>. Там где подключается этот файл скорее всего есть эти блоки. Вот так и надо ставить в <head></head> ту строчку, что я дал для этих целей.
Ну как объяснить? инклуд это вот какое дело, например:

HTML5

<html>
<head>
<title>title</title>
</head>
<body>
<p>Какой-то контент</p>
</body>
</html>

это тоже самое, что:

HTML5

<html>
<head>
<title>title</title>
</head>
<body>
<?php include("include.html");?>;
</body>
</html>

и include.html

HTML5

1	<p>Какой-то контент</p>

@tispb · 05.02.2014, 16:03 **[ТС]**

Вроде понятно) Я просто первый раз php стр делаю (по видео урокам).
Попробую сделать!!!
Спасибо!

Добавлено через 39 минут
Все равно та же беда

HTML5

<?php
     defined('airshop') or die ('Доступ запрещен!');
?>
<div id="block-header">
<!--Название-->
<img id="nazv" src="https://www.cyberforum.ru/images/name.png" />
<!--Логотип-->
<div id="logo">
<img src="https://www.cyberforum.ru/images/logo.png" width="80px" height="80px"/><br />
<span class="nambers"></span><br />
<a href="mailto:info@piter-promalp.ru"></a>
</div>
<!--Меню-->
<script type="text/javascript">
$().ready(function(){
    var thisUrl = document.location.href.split("/")[3].split("?");
    if(thisUrl[0]=="view_cat.php?cat="){thisUrl[0]="conditioners.php";}
 
    $.each($('.menu li a'),function(){
        if ($(this).attr("href")==thisUrl[0]){
            $(".active").removeClass("active");
            $(this).addClass("active");
        }
    });
});
</script>
<div id="menu">
<ul>
<li><a href="index.php" class="active">ГЛАВНАЯ</a></li>
<li><a href="">ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php">КОНДИЦИОНЕРЫ</a></li>
<li><a href="">ФОТО</a></li>
<li><a href="contacts.php">КОНТАКТЫ</a></li>
</ul>
<!--Поиск-->
<div id="block-search">
<form method="GET" action="search.php?q=" >
<input type="text" id="input-search" name="q" placeholder="Поиск по сайту" value="<?php echo $search; ?>" />
<span></span>
</form>
<ul id="result-search">
</ul>
</div>
</div>
</div>

Все пункты работают нормально, но!
Я наверно не так объясняю....

Не подсвечивается - когда я перехожу на

HTML5

1	if(thisUrl[0]=="view_cat.php?cat="){thisUrl[0]="conditioners.php";}

и на

HTML5

1	if(thisUrl[0]=="view_cat.php"){thisUrl[0]="conditioners.php";}

тоже.

Дело вот в чем - сама по себе стр view_cat.php - пустая, она выводиться только с переменными
view_cat.php?cat='.strtolower($row["brand"]).'&type='.$row["type"].'"
т.к. является переходом на стр результатов поиска

Что делать?(((

Добавлено через 4 минуты
Кстати я в браузере набрала просто view_cat.php - тоже не подсвечивается

Добавлено через 1 час 9 минут
Вообще-то я Вас обманула:
Я на всех страницах заменила include("include.php") на include("include.html")
и в итоге ничего не подсвечивается, кроме ГЛАВНОЙ

Добавлено через 33 минуты
Я нашла ошибку в - $.each($('.menu li a'),function(){
а должно быть $.each($('#menu li a'),function(){

Огромное Вам человеческое спасибо за помощь!

Добавлено через 14 часов 33 минуты
Добрый день!

Случилось страшное! - Дополнительное меню теперь не подсвечивается!!!

Все по порядку:

1) Вместо

HTML5

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

У меня подключен

HTML5

1	<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>

Главное меню, которое мы обсуждали работает нормально!

2) Но к этому же скрипту

HTML5

1	<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>

изначально подключено и дополнительное боковое меню! Оно разворачивается аккордеоном.

Дополнительное Меню:

PHP

<?php
     defined('airshop') or die ('Доступ запрещен!');
?>
<div id="cond_menu">
<!-- Производители -->
<p class="proizvoditeli">ПРОИЗВОДИТЕЛИ</p>
 
<ul>
<li><a id="index1">QuattroClima</a>
<ul class="category-section">
<?php
    $result = mysql_query("SELECT * FROM category WHERE type='QuattroClima'",$link);
    
 If (mysql_num_rows($result) > 0)
{
   $row = mysql_fetch_array($result);
   do
   {
    echo '
    <li><a href="view_cat.php?cat='.strtolower($row["brand"]).'&type='.$row["type"].'">'.$row["brand"].'</a></li>
    ';
    }
    while ($row = mysql_fetch_array($result));
    }
?>
</ul>
</li>
 
<li><a id="index2">Tosot</a>
<ul class="category-section">
<?php
    $result = mysql_query("SELECT * FROM category WHERE type='Tosot'",$link);
    
 If (mysql_num_rows($result) > 0)
{
   $row = mysql_fetch_array($result);
   do
   {
    echo '
    <li><a href="view_cat.php?cat='.strtolower($row["brand"]).'&type='.$row["type"].'">'.$row["brand"].'</a></li>
    ';
    }
    while ($row = mysql_fetch_array($result));
    }
?>
</ul>
</li>
</ul>
</div>

Скрипт дополнительного меню (подключен к стр фаил.js)

Javascript

$(document).ready(function() {
    
    
    loadcart();
    
 
  $('#cond_menu > ul > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
        
        $('#cond_menu > ul > li > ul').slideUp(400);
        $(this).next().slideToggle(400);
             
           $('#cond_menu > ul > li > a').removeClass('active');
           $(this).addClass('active');
           $.cookie('select_cat', $(this).attr('id'));
           
        }else
        {
            $('#cond_menu > ul > li > a').removeClass('active');
            $('#cond_menu> ul > li > ul').slideUp(400);
            $.cookie('select_cat', '');     
        }
    });
 
if ($.cookie('select_cat') != '')
{
    $('#cond_menu > ul > li > #'+$.cookie('select_cat')).addClass('active').next().show();
}
});

Так вот проблема в том, что при нажатии на

PHP

1	<li><a id="index1">QuattroClima</a>

разворачиваются подпункты и "QuattroClima" подсвечивается, а при нажатии на подпункт в этой категории "QuattroClima" - гаснет.

До переделки главного меню было так: нажали "QuattroClima" , подсветилось и раскрылись подпункты;
нажали на подпункт, "QuattroClima" продолжает подсвечиваться.

Помогите пожалуйста.

@tispb · 05.02.2014, 16:11 **[ТС]**

Вот для наглядности:
Название: 1.JPG
Просмотров: 283

Размер: 18.4 Кб

Нажала на QuattroClima - раскрылись подпункты (настенные, кассетные и т.д.)

2 Название: 2.JPG
Просмотров: 285

Размер: 18.3 Кб

Нажала на "настенные", QuattroClima - погасла...

@tispb · 05.02.2014, 16:14 **[ТС]**

Вот еще стили от дополнительного меню

CSS

#cond_menu{
    height: auto; 
    border: 0px;
}
.proizvoditeli{
    height: auto;
    width: auto;
    margin-top: 0px;
    padding-bottom: 10px;
    text-align: center;
    color: #F60;
}
#cond_menu > ul > li{
    text-align: left;
    padding-left: 10px;
}
#cond_menu > ul > li >a{
    text-align: left;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 10px;
    cursor: pointer;
    display: block;
}
#cond_menu > ul > li >a:hover{
    text-align: left;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 10px;
    cursor: pointer;
}
#cond_menu > ul > li >a:active{
    color: #F60;
}
.category-section{
    margin-left: 35px;
    margin-bottom: 5px;
    padding-bottom: 3px;
    padding-top: 3px;
    display: none;
}
.category-section li{
    margin-top: 3px;
    padding-bottom: 3px;
    padding-top: 3px;
}

@MarlboroRed · 06.02.2014, 22:57

tispb,
1.Трудно гадать на пальцах. Дайте ссылку, если сайт "в интернете".
2. А что работает не так?

@tispb · 06.02.2014, 23:00 **[ТС]**

Добрый вечер!
Сайт, к сожалению на денвере!
Вообщем там не одно доп меню полетело, поэтому я вернулась к тому с чего начала (мой самый первы вопрос)
Пускай это будет криво, но может подскажете как все таки ссылку с переменными вставить?

@MarlboroRed · 07.02.2014, 01:47

tispb,

Сообщение от MarlboroRed

А что работает не так?

Как-то я пролистал ваш пост https://www.cyberforum.ru/post5740184.html

Сообщение от tispb

Пускай это будет криво, но может подскажете как все таки ссылку с переменными вставить?

Честно говоря, я не понимаю почему, сразу что я вам предложил не работает. В вашем случае $_SERVER['PHP_SELF'] должен возвращать "/имя_скрипта.php", так как вы не используете директории в url и маршрутизации тоже нет. А вот почему он при сравнении выдает ложь - загадка для меня.

Что касается js,

Сообщение от tispb

Я нашла ошибку в - $.each($('.menu li a'),function(){
а должно быть $.each($('#menu li a'),function(){

в этом то и дело, я забыл добавить класс к списку с ссылками верхнего меню. И у вас как оказалось есть блок с id="menu", в который скорее всего входит и боковое меню, оттуда и такие ошибки.

Напишите в js для верхнего

Javascript

1	$.each($('.menu-top li a'),function(){

а вместо

Javascript

1	$(".active").removeClass("active");

напишите

Javascript

1	$(".menu-top li .active").removeClass("active");

и списке верхнего меню допишите класс.

HTML5

1	<ul class="menu-top">

И кстати интересно почему $_SERVER['PHP_SELF'] не проходит проверку. Напишите где-нибудь

PHP

1	var_dump($_SERVER['PHP_SELF']);

и пришлите сюда что выведет.

@tispb · 07.02.2014, 13:06 **[ТС]**

Сообщение от MarlboroRed

Честно говоря, я не понимаю почему, сразу что я вам предложил не работает. В вашем случае $_SERVER['PHP_SELF'] должен возвращать "/имя_скрипта.php", так как вы не используете директории в url и маршрутизации тоже нет. А вот почему он при сравнении выдает ложь - загадка для меня.

Отгадка: у меня кривые руки

PHP

<?php $uri = $_SERVER["PHP_SELF"];?>
<div id="menu">
<ul>
<li><a href="index.php" <?php if ($uri == "/index.php") {echo 'class="active"';}?>>ГЛАВНАЯ</a></li>
<li><a href="" <?php if ($uri == "/") {echo 'class="active"';}?>>ПРОМЫШЛЕННЫЙ АЛЬПИНИЗМ</a></li>
<li><a href="conditioners.php" <?php if ($uri == "/conditioners.php" 
                                      or $uri == "/cart.php"
                                      or $uri == "/search.php"
                                      or $uri == "/view_cat.php"
                                      or $uri == "/search_filter.php") {echo 'class="active"';}?>>КОНДИЦИОНЕРЫ</a></li>
<li><a href="" <?php if ($uri == "/") {echo 'class="active"';}?>>ФОТО</a></li>
<li><a href="contacts.php" <?php if ($uri == "/contacts.php") {echo 'class="active"';}?>>КОНТАКТЫ</a></li>
</ul>
</div>

Добавлено через 52 секунды
Все работает

@tispb 0 / 0 / 1 Регистрация: 12.05.2013 Сообщений: 57
	06.02.2014, 23:00 [ТС]	17
	Добрый вечер! Сайт, к сожалению на денвере! Вообщем там не одно доп меню полетело, поэтому я вернулась к тому с чего начала (мой самый первы вопрос) Пускай это будет криво, но может подскажете как все таки ссылку с переменными вставить? 0

@MarlboroRed Марсианин 87 / 87 / 22 Регистрация: 11.10.2012 Сообщений: 333
	04.02.2014, 22:36	10
	Сообщение от tispb Будет ли работать ключ defined('airshop') or die ('Доступ запрещен!'); Ну, работать должен Сообщение от tispb И правильно ли я понимаю что нужно расставить все теги html - типа <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <body> и т.п.????????????????????? Где расставить? 0

@tispb 0 / 0 / 1 Регистрация: 12.05.2013 Сообщений: 57
	04.02.2014, 22:39 [ТС]	11
	Сообщение от MarlboroRed Где расставить? в блоке block-header.html код php, который я выложила - это весь фаил block-header.php 0

@tispb 0 / 0 / 1 Регистрация: 12.05.2013 Сообщений: 57
	05.02.2014, 16:11 [ТС]	14
	Вот для наглядности: Нажала на QuattroClima - раскрылись подпункты (настенные, кассетные и т.д.) 2 Нажала на "настенные", QuattroClima - погасла... 0

@MarlboroRed Марсианин 87 / 87 / 22 Регистрация: 11.10.2012 Сообщений: 333
	06.02.2014, 22:57	16
	tispb, 1.Трудно гадать на пальцах. Дайте ссылку, если сайт "в интернете". 2. А что работает не так? 0