symbols - Best way to show collapsing menu?

On my Clothing Website navigation panel. On mouse over or click event the jQuery menu collapse / open. Example picture is attached below.

What is the best sign or way to show that it has more menu options or links after click?

Will my customers (females & age 15 years+ ) know that it will open on mouse over or mouse click?

Answer

Definitively if you want to base a decision on the visual side only, you may be be falling short for the right solution. If you want to go the extra mile try this:

1. Load the site with its categories and sections expanded. Then


2. Collapse it after the site finished loading. This allows the user to get a good idea that the categories have content. They might even get familiar with their Information Architecture (IA) or spot something they are interested in while the site loads.


3. Use jQuery animations to go from expanded to collapsed; this way they know this is not an error, and they have an idea on where all that text went.


4. 
   

   On the visual side:

   
   
   
   
   
   • Common icons like ">", "+" for collapsed or "v", "-" for expanded.
   
   
   • Changing them during the animation works well.
   
   
   • using bold letters.
   
   
   • proper indentation.
   
   
   
   

---

Needless to say, that if you plan your IA according to your target audience (15yo females) and name the categories in a way that they recognize, the visual assets that you use become almost irrelevant, because they'll know that they need to go there.

Try to get familiar with the terms 15yo females use so that you can drive them to the sections that you want; i.e. naming the category after what a 15yo female will get engaged by.

There's a few tools like Optimal Workshop That allow you to plan and test that information architecture. Might require work, but you'll notice that the visual assets are the least of your problems.

---

However, if you don't wanna go the extra mile, you cal always find inspiration here: