menu toggle button - help needed

Home Forums Older releases 0.9.x menu toggle button - help needed

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1376
    robii1
    Participant

    I am trying to add a menu toggle button so that the menu is collapsed when viewing on small screens, but after following the instructions here http://www.smartmenus.org/docs/#menu-toggle-button, my menu disappears completely when viewed on a small screen.

    And a second problem is my sub menus no longer appear on a full size screen.

    Everything was working perfectly before I added the additional code.

    Use this page as an example – http://www.thephonefinder.co.uk/proddetail.php?prod=1100lcd (please view source to see how my UL element looks as I can’t seem to post it on here)

    I added this code to sm-blue.css:

    #menu-button {
      display:none;
      background: #3193c0;
      /* style it as you like... */
    }
    #menu-button:before {
      content:'Menu -';
    }
    #menu-button.collapsed:before {
      content:'Menu +';
    }
    @media screen and (max-width: 640px) {
      /* show the button on small screens */
      #menu-button {
        display:inline-block;
      }
      /* hide the menu when it has the "collapsed" class set by the script */
      #main-menu.collapsed {
        display:none;
      }
    }

    I added this code to jquery.smartmenus.js:

    $(function() {
      $('#menu-button').click(function() {
        var $this = $(this),
            $menu = $('#main-menu');
        if (!$this.hasClass('collapsed')) {
          $menu.addClass('collapsed');
          $this.addClass('collapsed');
        } else {
          $menu.removeClass('collapsed');
          $this.removeClass('collapsed');
        }
        return false;
      }).click();
    });
    
    

    What have I done wrong?

    #1692
    admin
    Keymaster

    Hi, the problem is that you have added the menu button as part of your main menu (as the first item). Just move it out and add it, for example, right before the main menu – e.g.:

    <a id="menu-button"></a>
    <ul id="main-menu" class="sm collapsed sm-blue">
    ...

    and it should work.

    Cheers!

    #1694
    robii1
    Participant

    Great! Thank you

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?