Results 1 to 5 of 5

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

  1. #1
    Join Date
    May 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    .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;
    Code:
    <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.
    Last edited by Beverleyh; 05-28-2014 at 04:12 PM. Reason: Corrected .menutoggler class (previously ".menutogger")
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (05-28-2014)

  4. #3
    Join Date
    May 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by Neil1; 05-28-2014 at 03:28 PM.

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    Oh, I see... Looks like the onclick event needs to be on the actual element, so either of the 2 options below would work;
    Code:
    <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;"/>
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (05-28-2014)

  7. #5
    Join Date
    May 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. Resolved Responsive Side Toggle Menu Reversed
    By adaml_ipa in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 03-25-2014, 07:53 PM
  2. Smooth Navigational Menu (v1.5) want to display as dropline side by side
    By jqdesigner in forum Dynamic Drive scripts help
    Replies: 19
    Last Post: 01-30-2013, 02:35 PM
  3. Replies: 1
    Last Post: 10-04-2011, 02:49 AM
  4. Resolved Animated Collapsible DIV v2.2, toggle event error
    By mitchjburne in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-04-2009, 09:11 PM
  5. Replies: 3
    Last Post: 02-08-2009, 12:15 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •