Активный пункт меню
Мужики выручайте!!! Весь инет перелазил. Я в 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-->
вот css:
@charset "utf-8";
/* CSS Document */
*{
padding:0px;
margin:0px;
}
h1, h2, h3, h4, h5, h6{
color:#000000;
font-family:"Trebuchet MS", Arial, sans-serif, Verdana;
}
ul{
list-style:none;
}
html{
min-height:100%;
}
body{
background:linear-gradient(to bottom, #003760, #00599d) no-repeat;
color:#2e0067;
font-size:14px;
font-family:Arial, sans-serif, Verdana;
}
/*------frame------*/
.frame{
overflow:hidden;
max-width:1000px;
margin:0px auto;
}
/*------left-hand-side------*/
.left-hand-side{
float:left;
width:34%;
}
/*------mail-us------*/
.mail-us{
text-align:center;
padding:20px 0px;
}
.mail-us a{
text-decoration:none;
color:#ffffff;
}
.mail-us a:hover{
color:#ff4800;
}
.mail-us a img{
margin-left:5px;
vertical-align:middle;
}
/*------logo------*/
.logo{
padding:30px 0px;
background:linear-gradient(to bottom, #eaf5f9, #2a8cc1);
border:2px solid #62afd9;
border-right:none;
border-radius:10px 0px 0px 10px;
}
.logo a{
text-decoration:none;
}
.logo a h1{
font-weight:none;
font-style:italic;
text-align:center;
}
/*------menu------*/
.menu{
margin:10px 0px 38px 0px;
font-size:18px;
}
.menu ul li a img{
margin-right:10px;
vertical-align:central;
}
.menu ul li a{
display:block;
text-decoration:none;
font-style:italic;
background:#2772ac;
color:#ffffff;
padding:5px 0px 5px 20px;
margin:0px 20px 5px 0px;
border-radius:5px;
}
.menu ul li a:hover{
margin:0px 0px 5px 20px;
text-decoration:underline;
}
/*------news------*/
.news{
background:#1a639a;
padding:15px;
}
.news h2{
font-style:italic;
color:#ffc655;
margin-bottom:10px;
}
.news p{
color:#ffffff;
}
/*------right-hand-side------*/
.right-hand-side{
float:right;
width:66%;
}
/*------header-right------*/
.header-right img{
display:block;
max-width:100%;
}
/*------right-content------*/
.right-content{
background:#ccdeec;
padding:20px;
}
.right-content h2{
margin-bottom:15px;
}
.right-content p{
margin-bottom:15px;
}
/*------footer------*/
.footer{
display:block;
text-align:center;
color:#ffffff;
padding:10px 0px;
}
.footer>a{
color:#ffffff;
margin:0px 10px 0px 9px;
}
.footer>a:hover{
color:#ff4800;
}
.footer p a{
color:#ffffff;
}
.footer p a:hover{
color:#ff4800;
}
.footer p{
margin:10px 0px 0px 0px;
}
/*------form-mail-us------*/
.form-mail-us{
margin:0px 15%;
}
.form-mail-us form label{
display:block;
margin-bottom:5px;
}
.form-mail-us form label input{
display:block;
width:100%;
padding:3px 3px;
}
.form-mail-us form label textarea{
display:block;
width:100%;
padding:3px 3px;
height:300px;
}
.form-mail-us form div{
margin:0px 25%;
}
.form-mail-us form>input{
margin-top:15px;
padding:5px 5px;
}
/*------error-form------*/
.error-form p{
background:#ff4800;
color:#ffffff;
text-align:center;
border-top:2px solid #5a00ff;
border-bottom:2px solid #5a00ff;
padding:10px 0px;
}
Перепробывал все и jqury и просто javascript ничего не получается. Вообще спасибо тому кто поможет пожалуйста!!!!!!
|