CODEWITHSUNDEEP
javascripthtmlcss
Tom Maxwell
Tom Maxwell

Reputation: 9573

How to implement this way of indicating current tab in navigation?

A new trend in design is to, for navigation menus, show a thin line under the links and make the line thick under the link for the current page you're on. It looks like this:

enter image description here

How would one go about implementing this? Just CSS or JavaScript as well?

Upvotes: 0

Views: 30

Answers (1)

Ivan Seidel
Ivan Seidel

Reputation: 2362

this is only a border being changed I guess.

You can always do something like this:

.menubutton{
  border-bottom: 1px solid #000;
}

.menubutton:hover,
.menubutton.active{
  border-bottom: 2px solid #000;
}

And add some Javascript to activate/deactivate them...

$('.menubutton').click(function (){
  $('.menubutton').removeClass('active');
  $(this).addClass('active');
});

Upvotes: 1

Related Questions