WordPress.org

Ready to get started?Download WordPress

Forums

Customising the WordPress Toggle menu [toggle] (11 posts)

  1. adsleeblythe
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

    You'll need to manipulate this image.

  3. adsleeblythe
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year ago #

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

  8. Andrew
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  11. adsleeblythe
    Member
    Posted 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Topic