Custom image for 'Toggle Menu' event in Side Push Menu

[Neil1]

1) Side Push Menu

2) http://www.dynamicdrive.com/dynamicindex1/pushmenu.htm

3) Is there a) anyway to remove the fa fa-bars icon currently used to open the side menu and instead use solely the toggle option to control it (<a href="#" onClick="menu1.toggle(); return false" class="toggleitem">Toggle Menu</a>) with the link for the toggle being applied to a (preferably absolutely positioned) image?

To try and work it out I simply changed the CSS to hide the default fa fa-bars then replaced Toggle Menu with the image I wanted but as soon as I switched from test to image the link stopped functioning (Same problem when using H1, H2 etc instead of just default text).

Given it refers to fa fa-bars in the JS file I assume if what I want to do is possible it in here that needs the change but unfortunately my usage of JS is pretty much only at a copy > paste > cross fingers and hope level.

Any help greatly appreciated - Thanks.

[Beverleyh]

.menutoggler { display:none } in the stylesheet should hide it, and then you can use the markup/method from the demo page to create a custom button/trigger/toggle;

<a href="#" onClick="menu1.toggle(); return false" class="toggleitem">Toggle Menu</a>
<a href="#" onClick="menu1.toggle('open'); return false" class="toggleitem">Open Menu</a>
<a href="#" onClick="menu1.toggle('closed'); return false" class="toggleitem">Close Menu</a>

If you need more help, please provide a link to your page.

[Neil1]

Thanks Beverley, unfortunately that is what is exactly what I tried (Just the toggle link rather than all three) but as soon as I replace Toggle Menu as the link with anything other than text for some reason I can't fathom it stops the link working. What I am hoping to achieve is:

<a href="#" onClick="menu1.toggle(); return false" class="toggleitem"><img src="compass.png" id="compass"></a>

*Just out of curiosity I tried replacing Toggle Menu with various image formats and putting the 'Toggle Menu' link in <h1> / <h2> / etc. tags but as soon as I do anything to change the link from plain text it stops working.

I am currently working on my website offline so there is nothing online to link to, however I have just uploaded a quick test page to demonstrate the problem at http://www.pleasted.co.uk/test.htm - There are two plain text links to toggle both of which work, then exactly the same links applied to an image and heading text neither of which work.

Thanks again for taking the time to reply :)

[Beverleyh]

Oh, I see... Looks like the onclick event needs to be on the actual element, so either of the 2 options below would work;


<a href="#" onClick="menu1.toggle(); return false" class="toggleitem" style="background:url(compass.png) 0 0 no-repeat; position:absolute; top:50px; width:256px; height:256px; right:50px;"></a>

<img src="compass.png" onClick="menu1.toggle(); return false" class="toggleitem" style="position:absolute; height:100px; top:50px; width:100px; right:50px;"/>

[Neil1]

THANK-YOU! Works perfectly now :) You've saved me a lot of time frowning at my screen and pulling my hair out.