CODEWITHSUNDEEP
cssangularjscontrollercss-selectors
Gee
Gee

Reputation: 165

ui-sref-active="active" not working in my navbar menu

I have side nav menu that when you hover over a image link changes from example (imgOn to imgOff). The images link to a page. The issue is when I click outside the nav menu the image does not stay active.

CSS:

#icon-performance{content: url(../app/images/performance-white.png);}
#icon-performance:hover,
#icon-performance.focus{content: url(../app/images/performance-blue.png);}

#icon-overview{content: url(../app/images/overview-white.png);
#icon-overview:hover,
#icon-overview.focus{content: url(../app/images/overview-blue.png);}

#icon-audience{content: url(../app/images/audience-white.png);}
#icon-audience:hover,
#icon-audience.focus{content: url(../app/images/audience-blue.png);}

#icon-socialmedia{content: url(../app/images/socialmedia-white.png);}
#icon-socialmedia:hover,
#icon-socialmedia.focus{content: url(../app/images/socialmedia-blue.png);}

#icon-email{content: url(../app/images/email-white.png);}
#icon-email:hover,
#icon-email.focus{content: url(../app/images/email-blue.png);}'

using :focus does not do the trick.

index page:

<nav class="navbar navbar-fixed-top" role="navigation"> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav" > <li><a ui-sref-active="active" ui-sref="performance"><i id="icon-performance"></i><br>PERFORMANCE SNAPSHOT</a></li> <li><a ui-sref-active="active" ui-sref="overview"><i id="icon-overview"></i><br>OVERVIEW</a></li> <li><a ui-sref-active="active" ui-sref="audience"><i id="icon-audience"></i><br>AUDIENCE</a></li> <li><a ui-sref-active="active" ui-sref="socialMedia"><i id="icon-socialmedia"></i><br>SOCIAL MEDIA</a></li> <li><a ui-sref-active="active" ui-sref="emailCampaign"><i id="icon-email"></i><br>EMAIL CAMPAIGN</a></li> </ul> </div> </nav>

controller:

app.config(function($stateProvider, $urlRouterProvider){

$urlRouterProvider.otherwise("/overview")

$stateProvider
    .state("overview", {
        url: "/overview",
        templateUrl: "partials/partialOverview.html"
    })
    .state('audience',{
        url: "/audience",
        templateUrl: "partials/partialAudience.html"
    })
    .state('socialmedia',{
        url: "/socialmedia",
        templateUrl: "partials/partialSocialMedia.html"
    })
    .state('emailcampaign',{
        url: "/EmailCampaign",
        templateUrl: "partials/partialEmailCampaign.html"
    })
    .state("performance", {
        url: "/Performance",
        templateUrl: "partials/partialPerformance.html"
    })
});})();

Upvotes: 2

Views: 439

Answers (2)

Gee
Gee

Reputation: 165

Figured it out.

HTML:

<li><a ui-sref-active="active" ui-sref="performance"><i id="icon-performance"></i><br>PERFORMANCE SNAPSHOT</a></li>

CSS:

.nav > li > .active #icon-performance{content: url(../app/images/performance-blue.png);}

applied this to all the nav images.

Upvotes: 0

Blaise
Blaise

Reputation: 13479

You cannot do this using :focus. The CSS focus selector only works on form inputs and hyperlinks. You need to do this with JavaScript.

Angular example where the focus class toggles when clicked:

<img ng-class="{focus: hasFocus}" ng-click="hasFocus = !hasFocus">

CSS:

#icon-performance{
    content: url(../app/images/performance-white.png);
}

#icon-performance:hover,
#icon-performance.focus{
    content: url(../app/images/performance-blue.png);
}

Upvotes: 1

Related Questions