Grow your CSS skills. Land your dream job.

Responsive menu is not opening please help

  • # December 31, 2013 at 1:50 pm

    I am trying to get this menu working from

    http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

    I uploaded the CSS & JS folders to my theme’s folder. Added this to my header

    <link rel="stylesheet" type="text/css" href="/css/component.css" />
    <script src="/js/modernizr.custom.js">
    <script src="/js/jquery.dlmenu.js">
    
            $(function() {
                $( '#dl-menu' ).dlmenu({
                    animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
                });
            });
    

    This the HTML used from the example

    <div>
      <div>
        Open Menu <ul>
          <li>
            <a href="#">Item 1</a> <ul>
              <li>
                <a href="#">Sub-Item 1</a>
              </li>
              <li>
                <a href="#">Sub-Item 2</a>
              </li>
              <li>
                <a href="#">Sub-Item 3</a>
              </li>
              <li>
                <a href="#">Sub-Item 4</a> <ul>
                  <li>
                    <a href="#">Sub-Sub-Item 1</a>
                  </li>
                  <li>
                    <a href="#">Sub-Sub-Item 2</a>
                  </li>
                  <li>
                    <a href="#">Sub-Sub-Item 3</a>
                  </li>
                </ul>
              </li>
    
              <li>
                <!-- ... -->
              </li>
    
              <!-- ... -->
            </ul>
          </li>
    
          <li>
            <!-- ... -->
          </li>
    
          <li>
            <!-- ... -->
          </li>
    
          <!-- ... -->
        </ul>
      </div>
    
      <!-- /dl-menuwrapper -->
    </div>
    
    <!---#mobile-menu-->
    

    The issue is when I try to open the menu on my iPhone and even my desktop, nothing happens. The button changes to it’s hover state but the menu doesn’t pop up. I’m a beginner… So I’m really lost on how to get this working. Please help.

    # January 5, 2014 at 2:13 pm

    Hi @Keilowe!

    I can’t tell if the code that was posted just messed up, or not, but when using <script> tags, they must include a closing element

    <script src="/js/modernizr.custom.js"></script>
    <script src="/js/jquery.dlmenu.js"></script>
    

    Also, any included code should be within a script tag that doesn’t have a src attribute:

    <script>
        $(function() {
            $( '#dl-menu' ).dlmenu({
                animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });
        });
    </script>
    

    If that doesn’t work, then please create a demo of the issues you’re having using a demo site like http://jsfiddle.net/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".