website design - Best practice for collapsible submenus?

I have a website navigational menu:

• Lorem


• Ipsum <
  
  
  
  • Situs
    
    
    
    • Pratius
    
    
    • Quisque
    
    
    
    
    
  
  
  • Dolor
  
  
  
  


• Duis


• Proin <
  
  
  
  • Folios
    
    
    
    
    • Artius
    
    
    • Zalto
    
    
    
    
  
  
  • Ramo
  
  
  
  


• Neque

What should be the best practice for users; if a user opens up the Ipsum submenu, then opens up the Proin submenu, should the Ipsum submenu close before the Folios submenu opens up, or should it leave the previous open one and simply open up the new one?

Also, are there any scenarios in which the user would want to have a list of collapsable submenus that would open up without closing the sibling submenus?

Answer

"It doesn’t matter how good your website is if users can’t find their way around it."
- By jerrycao

Continuing with my answer posted just a day before. I stated that collapse menu's are better, and also gave some valid reasons.

Note: Please read my previous answer(linked above), come back and continue here.

Now talking about your case, I would like to extend the answer for you.

Everything stated in previous answer was why it was good to have collapse menu from users point of view. Everything goes same for your case too, but you have SUB-SUB Menu. It actually depends on design and changes based on device's width.

The Extended Answer...

Considering 3 device width's(it's "just" 3 could be more):

• Desktop/PC


• Tablet


• Mobile

Best practice on all three types is:

• 
  

  To have collapsible functionality like previous one collapses when any other opened for Parent-Menu in any width's of device(Large to Very-Small).

  
  


• 
  

  While for SUB Menu it would depend on design and device width's. You could allow them to have same functionality as parent does in device with small width's. But on device with large width's it's fine if the previous one doesn't collapse.

  
  

^{download bmml source – Wireframes created with Balsamiq Mockups}

REASON:

• 
  

  Some time it's required that according to design or if there are lots of SUB Menu links, in that case it's better to let SUB Menu remain open.

  
  


• 
  

  Example: Like user searching for some particular link (mostly happens in Admin Panel's). User would be distracted if that time collapsing happen as users' main goal is to find something.

  
  


• 
  

  But again in mobile(small width) devices it's too much for users to do if they wouldn't collapse. As they have to find and scroll and stay focused for what they are looking for.

  
  
  


• 
  

  Also from developers point of view, there may be a chance that application has more pages in future, which happens to have more links.

  
  

---

Conclusion: Collapsing previous one had been the best practice from all point of view, i.e. Developers, Designers and Users. Again lastly it all depends on you how you want users to sail.

"You are the captain of your ship, don't make it hard for sailors to sail with you."