I am struggling to figure out why I cannot highlight the current menu page on a navigation bar (aside from the fact that I am a complete beginner :-) I have tried using a JQuery function that I found online, but none of them seem to work. Here is the function:
<script type="text/javascript">
$(function(){
var path=window.location.pathname;
path=path.replace(/\/$/, "");
path = decodeURIComponent(path);
$('#menu a').each(function() {
var href=$(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
});
</script>
Here is my CSS:
@charset "UTF-8";
/* CSS Document */
#menu{ width:100%; height:40px; background-color: pink; border-bottom: 1px silver solid;}
#menu ul {
list-style: none;
margin:0 auto;
position: relative;
padding:5px 0;
width: 940px;
}
#menu ul li {
display:inline;
margin-left: 150px;
}
#menu li:first-child {
margin-left:0;
}
#menu ul li a {
color: silver;
display:block-inline;
font: 16px "Comic Sans MS", cursive;
text-align: center;
text-decoration: none;
}
#menu ul li a:hover {
background-color: yellow;
text-decoration:underline;
}
.active{
color:green;
}
The HTML markup looks like this:
<?php
echo<<<END
<div id="menu">
<ul>
<li><a id="home" style="color:white; font-size:16px;" href="$doc_root/index.php" title="Home Page">Enzo</a></li>
<li><a id="travel" href="$doc_root/travel/grid.php" title="My Trips"><span>travelling</span></a></li>
<li><a id="images" href="#">images</a></li>
<li><a id="words" href="#">words</a></li>
<li><a id="about" href="#">about</a></li>
</ul>
</div>
END;
?>
I am unsure what is causing the issue, it could be related to my CSS. I have simplified it to just include the color green for now, and I'm not certain if the "active" class is properly inserted into the CSS menu page. Any hints or alternative solutions would be greatly appreciated. Sending love to all! :-)