5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Expand/collapse menu navigation problem

by MB Ninja
4 replies
  • WEB DESIGN
    • |
The problem is simple. When I click the menu button, the Starters section is already open. I want it to be closed like the rest of the menu (pizza, pasta, entrees, etc).

To see what I'm talking about, please watch this very short video...

Royal Pizza Navigation Menu - MobileSiteDesigns's library

I've looked for this type of navigation, but I couldn't find one that's similar to what I'm using in the video. Do you know where I can find a solution, or can you help me fix the code so the Starters menu stays closed unless I click on it?

I want to finish making this site as soon as possible, so if you can respond I would really appreciate it.

Thanks!
#expland or collapse #menu #navigation #problem
  • Profile picture of the author Cwantwm
    Without seeing the code it almost impossible to diagnose...

    Two of many possible options

    1. Look in the html for that menu list and check that there isnt a hardcoded 'active' or 'open' class applied to that menu, if there is try it with the class removed.

    2. Use javascript to close the menu after the page loads the first time.

    what is the site built on? jquery/ jquery mobile?
    {{ DiscussionBoard.errors[4391100].message }}
    • Profile picture of the author MB Ninja
      I tried to remove the lines of code with 'active' in them. The result was no change, or the entire blue section opened just like Starters. I didn't see any code with 'open' in it.

      I don't know how to code. This script was given to me, and I'm trying to make it work for a restaurant.

      I uploaded accordion.html, ddaccordion.js, jquery.color.js, jquery.js to my server.

      This isn't all of the code, but it's the most relevant part of it...

      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $(".accordion h3:first").addClass("active");
      $(".accordion p:not(:first)").hide();
      $(".accordion h3").click(function(){
      $(this).next("p").slideToggle("slow")
      .siblings("p:visible").slideUp("slow");
      $(this).toggleClass("active");
      $(this).siblings("h3").removeClass("active");
      });
      });
      </script>
      {{ DiscussionBoard.errors[4391287].message }}
  • Profile picture of the author Cwantwm
    Ok, carefully remove these two lines

    Code:
    $(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
    replace with this one line

    Code:
    $(".accordion p").hide();
    {{ DiscussionBoard.errors[4391400].message }}
  • Profile picture of the author MB Ninja
    Wow! It worked. I thank you very much. I'm grateful.

    *bows down*
    {{ DiscussionBoard.errors[4391459].message }}

Trending Topics