WordPress.org

Support

Support » Themes and Templates » Customising the WordPress Toggle menu [toggle]

Customising the WordPress Toggle menu [toggle]

  • 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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    You’ll need to manipulate this image.

    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!

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try the CSS

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

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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.

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Customising the WordPress Toggle menu [toggle]’ is closed to new replies.