javascript - highlight current menu item via <div> inside <a>

Question

i'd like to highlight the current menu item via javascript using a div class INSIDE the link. In a first attempt i just added the class "top-bar-underline" to the a-tag, but since the menu items are "display: block;" and this way the underline exceeds the font of the menu item, i put the underline in a div-container inside the a-tag. For the hover-effect this works perfectly fine.

The question:

How can i add the class "top-bar-underline-current" to the class "top-bar-underline" for the current active menu item?

My current code looks like:

html menu:

<ul class="right">                
                <li>
                    <a href="{{ site.url }}"><div class="top-bar-underline">LATEST</div></a>
                </li>
                <li>
                    <a href="{{ site.url }}/pages/about/"><div class="top-bar-underline">ABOUT</div></a>
                </li>

</ul>

js to highlight current a in the menu:

<script type="text/javascript">
var url = window.location.href;
$('.top-bar-section li:not(.has-form) a:not(.button)').filter(function() {
    return this.href == url;
}).addClass('top-bar-underline-current');
</script>

css:

.top-bar-underline {
position: relative;
color: #ff3296;
}
.top-bar-underline:after {
display: block;
position: absolute;
top: 70%;
left: 0;
width: 100%;
height: 2px;
background: rgba($body-font-color,0.9);
content: '';
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-moz-transition: opacity 0.2s, -moz-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
.top-bar-underline:hover {
color: #98004a;

}
.top-bar-underline:hover:after,
.top-bar-underline:focus:after {
 width: 100%;
 opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.top-bar-underline-current {
position: relative;
}
.top-bar-underline-current:after {
position: absolute;
top: 70%;
left: 0;
width: 100%;
height: 2px;
background: rgba($body-font-color,0.9);
content: '';
opacity: 1;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-moz-transition: opacity 0.2s, -moz-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.top-bar-underline-current:hover:after,
.top-bar-underline-current:focus:after {
width: 100%;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}

Thanks for your help!

Perhaps you're not seeing the problem for what it is: blog.huidesign.com/… . Plenty of examples of highlighting active pages. In this example you'd add div to the selector, you can even include the class name, however... span tags are best practice for where you're adding your divs, just food for thought. — RandomUs1r
To add to what RandomUs1r wrote, link/anchor elements are inline and should not contain block elements like divs so use span instead — yitwail
thanks for the hints. i think i need to reconsider my highlightnight approach, its a little bloaded anyway! — Vin Banton

Gary Storey Gary Storey · Accepted Answer · 2014-08-14T22:17:17

var url = window.location.href;
$('.top-bar-section li:not(.has-form) a:not(.button)').filter(function() {
    return this.href == url;
}).find('.top-bar-underline').addClass('top-bar-underline-current');

I think that is what you need....

javascript - highlight current menu item via <div> inside <a>

1 Answers