Активный пункт меню

Обсуждение вопросов клиентского программирования.

Модератор: Duncon

Ответить
recingf1002
Сообщения: 2
Зарегистрирован: 09 июл 2017, 07:58

16 июл 2017, 15:01

Мужики выручайте!!! Весь инет перелазил. Я в javascript не понимаю но хочу сделать активный пункт меню Вот код сайта:

index.php

<?php

if(!isset($_GET['id']))
{
$index_title = "Главная";
}
else
{
mysql_connect("localhost", "business1", "david1");
mysql_select_db("business1");

$index_result = mysql_query("SELECT caption FROM business1 WHERE alias = '$_GET[id]'");

if(mysql_num_rows($index_result) == 0)
{
$index_title = "Неизвестная страница";
}
else
{
$index_row = mysql_fetch_array($index_result);

$index_title = strip_tags($index_row['caption']);

mysql_close();
}
}

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $index_title; ?></title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

<?php require("template/mail-us.php");?>

<?php require("template/logo.php"); ?>

<?php require("template/menu.php"); ?>

<?php require("template/news.php"); ?>

<?php require("template/header-right.php"); ?>

<?php require("template/right-content.php"); ?>

<?php require("template/footer.php"); ?>

</body>
</html>

само меню:

<!--menu-->
<div class="menu">

<ul>
<li><a href="index.php"><img src="images/menu-arrow.png">Главная</a></li>
<li><a href="index.php?id=link2"><img src="images/menu-arrow.png">Link 2</a></li>
<li><a href="index.php?id=link3"><img src="images/menu-arrow.png">Link 3</a></li>
<li><a href="index.php?id=link4"><img src="images/menu-arrow.png">Link 4</a></li>
<li><a href="index.php?id=link5"><img src="images/menu-arrow.png">Link 5</a></li>
<li><a href="index.php?id=link6"><img src="images/menu-arrow.png">Link 6</a></li>
</ul>

</div>
<!--/menu-->


Перепробывал все и jquery и просто javascript ничего не получается. Вообще спасибо тому кто поможет пожалуйста!!!!!!
obivan
Сообщения: 2
Зарегистрирован: 19 авг 2017, 14:16

19 авг 2017, 14:55

Общий алгоритм следующий:
1) активному пункту меню в HTML разметке присваиваешь класс ("active" например);
2) в CSS задаешь визуальное оформление активного пункта меню (цвет текста, размер, тени и т.п. по желанию);
3) подключаешь jQuery (ибо с ним работать проще будет)
4) в отдельном файле со своими JS скриптами прописаваешь рекцию на событие клика мыши на пункт меню (селектор ".menu ul li"), где проверяешь не установлен ли сейчас пункту меню на которое кликаешь класс "active", если не установлен, тогда убираешь класс "active" у других пунктов меню и устанавливаешь в текущее меню

Если, что не так описал просьба поправить...
Ответить