Niepotrzebny Ci PHP, jedyne czego potrzebujesz to biblioteka jQuery, oraz krótki tylko kilku linijkowy kod. Oczywiście, jeśli nie wykorzystujesz na swojej stronie biblioteki jQuery nie warto obciążać strony całą biblioteką dla paru linijek. Jednak praktycznie, jQuery znajduje zastosowanie nawet w najmniejszych projektach, z czego skorzystamy tworząc nasze menu w oparciu o tę że bibliotekę. Aktywne menu w JavaScript jak widzisz to nic trudnego.
Oto nasz kod:
$(document).ready(function() {
var path = location.pathname;
var home = "/";
$("a[href='" + [ path ] + "']").parents("li").each(function() {
$(this).addClass("selected");
});
});
A to przykładowe zastosowanie (pamiętaj aby dodać bibliotekę jQuery):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Demo aktywne menu javascript</title>
<link href="default.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var path = location.pathname;
var home = "/";
$("a[href='" + [ path ] + "']").parents("li").each(function() {
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<ul>
<li>
<a href="/index.html">0</a>
</li>
<li>
<a href="/index1.html">1</a>
</li>
<li>
<a href="/index2.html">2</a>
</li>
</ul>
</body>
</html>
Demo można obejrzeć poruszając się po naszym menu, do znacznika </li> dopisywana jest klasa "selected" jeżeli jesteśmy na danej podstronie. To jak ma wyglądać nasz aktywny link określamy w pliku default.css, który importujemy tak jak powyżej. Na przykład, jeżeli link aktywny ma mieć czarne tło to:
.selected {
background: #000;
}
adikos
tomiboy
suexefultable