If you're looking for a more CSS-centric approach, there is a way to achieve the desired effect with some JavaScript to enhance readability. In this method, it's important for your pages to correctly initialize the float line (`.highlight`) and the navigation border (`#sses1 > ul`).
While the optimal solution would involve a class for each float line, below is a JavaScript-only implementation:
<!-- added individual classes for nav items -->
<div id="sse1">
<div id="sses1>
<ul>
<li><a class="nav-item-1" href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
<li><a class="nav-item-2" href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
<li><a class="nav-item-3" href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
</ul>
</div>
</div>
Prior to the page or window loading:
function customHandleMenu() {
// retrieve nav selector
var nav = $('#sses1 > ul');
// retrieve float line selector
var floatLine = $('.highlight'); // .hightlight must be present at this point
// obtain colors for the current page
var defaultBGcolor = floatLine.css('background-color');
var defaultBorderColor = floatLine.css('border-color');
var defaultNavBorderColor = nav.css('border-bottom-color');
// adjust background-color and border-color on mouseenter event
$('.nav-item-1').on({
mouseenter: function () {
setColors({floatColor:'#0f0', borderColor:'#0f0'});
}
});
// Additional mouseenter events for other nav items
// restore default colors on mouseleave event
$('#sses1 > ul > li').on({
mouseleave: function() {
setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
}
});
function setColors(args) {
if (typeof args.floatColor != "undefined") {
floatLine.css('background-color', args.floatColor);
}
if (typeof args.borderColor != "undefined") {
floatLine.css('border-color', args.borderColor);
nav.css('border-bottom-color', args.borderColor);
}
}
}
To ensure the selector only operates once `.highlight` exists, consider modifying the end of the original script as follows:
function initMenu() {
sse1.buildMenu();
customHandleMenu();
}
if (window.addEventListener) {
window.addEventListener("load", initMenu, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", initMenu);
}
else {
window["onload"] = initMenu;
}
You can view a sample implementation in this jsfiddle link.
P.S.: The event chain has been slightly adjusted to accommodate jsfiddle.