Superfish Menu Not Using Current State on Current Page
I've been able to develop a vertical menu system with Superfish Menus and have been able to style it. Unfortunately, when I click a link to a different page, it does not highlight the 'current' state on that page's menu item. Rather it just stays on the 'Home' link. Plus, after reviewing the code, after every menu I create there's a bunch of javascript code at the end. I've never seen this before in the past and am wondering why is it loading (and bloating).
Rather odd behavior.
Code:
.sf-menu {
font-size: 11px;
margin: 10px 18px;
padding: 0px;
list-style-type: none;
width: 80%;
}
.sf-menu a {
display: block;
cursor: pointer;
text-decoration: none;
line-height: 25px;
padding-left: 15px;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #2c2c2c;
}
.sf-menu li {
background: url(../../../../templates/sfriends/images/lm_unselected_item.png) no-repeat 2% 50%;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
color: #FFF;
background: #3d3f57 url(../../../../templates/sfriends/images/lm_hover_item.png) no-repeat 2% 50%;
}
.sf-menu #current a:link {
color: #FFF;
background: #3d3f57 url(../../../../templates/sfriends/images/lm_hover_item.png) no-repeat 2% 50%;
}
<ul class="menu sf-menu sf-vertical">
<li id="current" class="first-child active item10"><a href="http://index.php"><span>Home</span></a></li><li class="item1"><a href="/about.html"><span>About</span></a></li><li class="item5"><a href="/presidents-message.html"><span>President's Message</span></a></li><li class="item6"><a href="/how-we-help.html"><span>How We Help</span></a></li><li class="item7"><a href="/board-of-directors.html"><span>Board of Directors</span></a></li><li class="item8"><a href="/membership.html"><span>Membership</span></a></li><li class="last-child item9"><a href="/friends-groups.html"><span>Friends Groups</span></a></li></ul>
<script language="javascript" type="text/javascript" src="http://../modules/mod_superfishmenu/tmpl/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://../modules/mod_superfishmenu/tmpl/js/jquery.event.hover.js"></script>
<script language="javascript" type="text/javascript" src="http://../modules/mod_superfishmenu/tmpl/js/superfish.js"></script>
<link rel="stylesheet" type="text/css" href="http://../modules/mod_superfishmenu/tmpl/css/superfish.css" />
<link rel="stylesheet" type="text/css" href="http://../modules/mod_superfishmenu/tmpl/css/superfish-vertical.css" />
<script language="javascript" type="text/javascript">
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover', pathClass:'active', pathLevels:0, delay:800, animation:{opacity:'show', width:'show'}, speed:'def', autoArrows:0, dropShadows:0}) });
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
</script> </div>