Tab selection in navigation menu in liferay :-)

IN my current company, i got a task for UI. It was “the tab in navigation must stay selected in color when we are landed on the same page.”

ex:- in my navigation menu i have multiple tabs ('Home','About us','Career','ContactUs'). When we are on “Career's” page the carrer option on the navigation must be selected in colour, to indicate the user that he is on the career's page.

It might be an easy, for me also before working on this task but when i started work i get's tough for me.

The issue was after the selection any tab the page get refresh and it makes clean the selection.

What i did is:

I gave an id for each tab's in Navigation-tamplate in Velocity.

example:

 <div class="collapse navbar-collapse navbar-top-itl">
            <ul class="nav navbar-nav navbar-right">
                <li id='liCompany'>
                    <a href="$company_url" itemprop="sameAs" title="#language("company")" id="company-page-link">#language("company")</a>
                </li>
                <li id='liFeatures'>
                    <a href="$features_url" itemprop="url" title="#language("features")" id="features-page-link">#language("features")</a>
                </li>
                <li id='liUsecases'>
                    <a href="$use_cases_url" title="#language("use-cases")">#language("use-cases")</a>
                </li>
                <li id='liPricing'>
                    <a href="$pricing_url" title="#language("pricing")">#language("pricing")</a>
                </li>

 Then create a function and write the JS in my custom.js file with added a class name "activeMenu1".

function currentPage()

{

var loc=window.location.href;

if(loc.indexOf('company')>0)

{

$("[id$=liCompany]").addClass('activeMenu1');

}

if(loc.indexOf('features')>0)

{

$("[id$=liFeature]").addClass('activeMenu1');

}

if(loc.indexOf('use-cases')>0)

{

$("[id$=liUseCase]").addClass('activeMenu1');

}

if(loc.indexOf('pricing')>0)

{

$("[id$=liPricing]").addClass('activeMenu1');

}

}

   

And define the colour for the Class which i define in js.

.activeMenu1

{

@include itl-gradient($dropdown-link-hover-bg, 5%);

Add a comment to this line

background-color: darken($dropdown-link-hover-bg, 5%);

color: white;

   .caret {

border-top-color: white;

   border-bottom-color: white;

}

}