CODEWITHSUNDEEP
jquerycssmenunavigationnavbar
sunilkjt
sunilkjt

Reputation: 1005

dynamic image on hover on navbar

enter image description here

I need to create css menu like the image above.Images and background must be changed when mouse is hovered over the menu .

Heres my code for the menu

HTML

<ul>
    <li class="active1"> <a href="profile.html" class="act">My Profile</a></li>
    <li><a href="sponsor.html" class="profile1">My Sponsor</a></li>
    <li><a href="bankdetails.html" class="profile2">My Payment Information </a></li>
    <li><a href="mydocuments.html" class="profile3">My Documents (KYC) </a></li>
</ul>

CSS

tabs ul li a {
    color:#5d5c5c;
    list-style:none;
    text-decoration:none;
    font-size:15px;
    line-height:25px;
}
.tabs ul li {
    list-style:none;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border:1px solid #c3c3c3;
    float:left;
    background:#e2e3e4;
    padding:4px 16px;
}
.active1 {
    background:url('../images/profile.jpg') no-repeat left center #004b85 !important;
    color:#fff !important;
    padding-left:35px !important;
    height:40px;
    border:none!important;
}
.act {
    color:#fff!important;
}
.profile1 {
    background: url('../images/profile.png') no-repeat -2px 0;
    width: 23px;
    height: 15px;
    padding-left:25px;
}
.profile2 {
    background: url('../images/profile.png') no-repeat -4px -29px;
    width: 23px;
    height: 18px;
    padding-left:25px;
}
.profile3 {
    background: url('../images/profile.png') no-repeat -6px -61px;
    width: 20px;
    height: 20px;
    padding-left:25px;
}

The main problem is the css is not so dynamic .Can I get help with jquery or css3 to make to make it more dynamic using css nth-child items or jquery ????

Upvotes: 0

Views: 932

Answers (2)

JackW
JackW

Reputation: 999

Use the pseudo-class :hover to add styles to an element when it is hovered over. Just add another selector to your code to say

.profile1:hover {
  background: url('../images/profile_hover.png') no-repeat -2px 0;
  background-color: #FF33CC;
}

And repeat that for each of your images. Ideally, because they all share most of the same styles, give them a common class (each element can have multiple classes (class="profile1 common-nav-class")) and in that one, define

.common-nav-class {
  width: 20px;
  height:20px;
  padding-left:25px;
}
.common-nav-class:hover{
  background-color: #FF33CC;
}

then only define the unique properties in the individual class selectors.

If you want to make it fancy and animate the background color, add transition: 0.2s linear background-color.

Upvotes: 1

Artur Stary
Artur Stary

Reputation: 744

You dont need do to separate active classes, you might just use a :hover pseudoclass

ie.

.profile2{color:#000000;} /* standard css*/
.profile2:hover{color:FFFF00} /* this css will aply when you over a mouse on profile2 */

so you can change your css to:

.profile1:hover {
  background: url('../images/profile_hover.png') no-repeat -2px 0;
  background-color: #FF33CC;
}

Upvotes: 0

Related Questions