CODEWITHSUNDEEP
javascriptcsshovertwitter-bootstrap
Dan Byers
Dan Byers

Reputation: 185

how to use hover images with twitter bootstrap dropdown menus

Using twitter bootstrap. on the site i have a top nav bar consisting of links where some have dd-menus, and some are just static links.

i'm constructing the links using img's instead of text anchors.

i would like to get a hover effect applied to each of the links in the nav bar. this to be done by swapping out the image or loading a different background location in the sprite.

i'm using the regular way of specifying the nav bar, 

  <ul class="nav nav-pills">
         <li class="dropdown" id="hifiMenu">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="$PRE/images/newhifi.png"></a>
         <ul class="dropdown-menu">
               <li class="mainitem"><a href="$PRE/newhifi">BY BRAND</a></li>

is it possible to put a hover on the A link for #hifiMenu, and when the dropdown is activated, have the image swapped out?

not quite sure what the best practice would be using TB's nav bar control. has anyone tried something like this?

thanks in advance.

Upvotes: 1

Views: 5735

Answers (1)

Dan Byers
Dan Byers

Reputation: 185

as mentioned in my question, i have the following nav bar items:

<ul class="nav nav-pills">
     <li class="dropdown" id="hifiMenu">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="newhifi.png"></a>
     <ul class="dropdown-menu">
           <li class="mainitem"><a href="newhifi">BY BRAND</a></li>
....

in order to get the hover to work, i first created a large sprite image that contained every normal/highlighted image.

then i set up a new style for each of my links:

#hifiMenuLink {
    width:71px;
    height: 11px;
    background-image: url(path_to_sprite);
    background-repeat: no-repeat;
    background-position: 0px -6px;
}

then for the hover: 

#hifiMenuLink:hover {
    width:71px;
    height: 11px;
    background-image: url(path_to_sprite);
    background-repeat: no-repeat;
    background-position: 0px -37px;
}

then i assigned the ID, hifiMenuLink, to the anchor itself... 

<a id="hifiMenuLink" ...

that was my quick and dirty solution.

hope this can help out someone else in the future.

Upvotes: 1

Related Questions