WordPress.org

1. adsleeblythe
   Member
   Posted 9 months ago #
   

   Hi,

   Can somebody please tell me how I can change the toggle menu image on hover? This is doing my head in! I want to change the background image (+ icon) to white like it's active state after the user has clicked on a menu item.

   Please take a look and scroll to the bottom of the page. My toggle menu is contained within a [tab] menu.

   The CSS:

   .toggle {
       padding: 0 0 2px 0;
   }
   .toggle .trigger {
   	background-color: #f5f5f5;
   	background: -moz-linear-gradient(bottom, #F2F2F2 0px, #ffffff 100%);
   	background: -webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #ffffff));
   	border: 1px solid #dddddd;
   	border-radius: 5px;
   	-moz-border-radius: 5px;
   	-webkit-border-radius: 5px;
   	color: #666666;
   	display: block;
   	padding: 10px 12px 10px 40px;
   	position: relative;
   	text-decoration:none;
   	height:1%;
   	}
   
   .toggle .trigger span {
   	background: url(includes/images/toggle.png) 0 0 no-repeat;
   	display: block;
   	position: absolute;
   	top: 9px;
   	left: 10px;
   	text-indent: -9999px;
   	width: 22px;
   	height: 20px;
   	}
   
   .toggle .trigger:hover,
   .toggle .active {
   	background:#333399;
   	color:#fff;
   	}
   .toggle .active span {
   	background: url(includes/images/toggle-white.png) 0 0 no-repeat;
   	background-position: 0 -20px;
   	}
   
   .toggle .box {
   	background-color: #fafafa;
   	border: 1px solid #dddddd;
   	border-radius: 5px;
   	-moz-border-radius: 5px;
   	-webkit-border-radius: 5px;
   	padding: 20px;
   	}

   Please help! Thank you.

2. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   It's an image in the directory:
   includes/images/toggle.png

   You'll need to manipulate this image.

3. adsleeblythe
   Member
   Posted 9 months ago #
   

   Ah yes I have already done this see 'toggle-white.png':

   .toggle .active span {
   	background: url(includes/images/toggle-white.png) 0 0 no-repeat;
   	background-position: 0 -20px;
   	}

   If you look at my menu you will see what I mean, I was able to target the toggle menu item's background image when clicked (active) but I can't seem to change it on hover!

4. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   Try the CSS
   

   .toggle .trigger:hover span{
    background: url(includes/images/toggle-white.png) 0 0 no-repeat;
    background-position: 0 -20px;
   }

5. adsleeblythe
   Member
   Posted 9 months ago #
   

   Thanks again,

   so nearly there! Now on hover of each item (before mouse down), I need the background image to stay as + icon, then when clicked to open the information inside, I want the - icon to show!

   ahhh this is hard :S

6. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   use jQuery for that
   

   jQuery(document).ready(function($) {
    $('.toggle .trigger').click().css('background', url(' + includes/images/toggle-white.png + ')');
   });

   Put that in the bottom of your template

7. adsleeblythe
   Member
   Posted 9 months ago #
   

   Sorry, I'm afraid I don't follow!
   The bottom of my template? footer.php?

8. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   If you want this to repeat on all pages, add it to the footer.php file, just above the </body> element.

   If you want this to apply only to your template, try to find out which template your page is attributed to (on page attributes in admin panel). Then find the file that is that template and plonk this code in the bottom of that file.

9. adsleeblythe
   Member
   Posted 9 months ago #
   

   Ahh I see, ok I found the page template and inserted the jQuery above at the bottom of my page but still no luck.

10. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #
    

    Could you upload it to the website so I can analyse why it isn't working?

11. adsleeblythe
    Member
    Posted 9 months ago #
    

    Please see the code for my template page 'print'.

    By inserting the jQuery above, the browser simply printed the jQuery at the bottom of each page with the template 'print'.

    I appreciate your help on this.

Reply

You must log in to post.