0

I've got a navigation menu which looks as following and, it's concealed and triggered using a menu button.

View of the page while menu is collapsed

mockup

download bmml source – Wireframes created with Balsamiq Mockups

View of the page when menu is opened

mockup

download bmml source

The menu is functioning as expected and some menu items contain sub level menus. In that case, when the parent menu is selected, the rest of the menu entires will dissapear and the parent element will be animated to the left corner of the menu container and symultaniously, the secondary menu will appear using an animation.

This is the expected behaviour, but the menu is not responsive. What will be the best way to make this menu responsive? What I have in mind is to add a horizontal scroll bar, so that the user will have to scroll to see the menu content. Then again, if the user clicks on a menu entry which has child elements, it's going to be hard since the above mentioned animation.

What will be the best way to make this menu responsive, keeping the animation for sub level menus. ( I don't mind changing the animation on responsive views )

  • Totally depends on menu list items content – divy3993 Sep 21 '16 at 5:17
  • The menu is a set of icon boxes with font awesome icon and the menu item name. – Imesh Chandrasiri Sep 21 '16 at 5:24
  • Any idea on how the design should change when it's on a responsive view – Imesh Chandrasiri Sep 21 '16 at 5:25
  • You need to reverse your workflow: How does it work on mobile, then scale up. When possible prevent hiding important navigation options. – Tom.K Sep 21 '16 at 7:51
  • What is the point of hiding the main menu items (by means of the hamburger button) on the first place? – drabsv Feb 11 '18 at 13:03
4

I think your best option is to throw away the current design and start over, I can't see how the UX can ever be anything other than terrible. Sorry.

This is not a user-friendly solution and makes it very hard for a user to interact with your site. Start with accessibility and good UX and then add the visual design and animation states. There are good reasons we don't see this often as a design pattern; it just doesn't work for users.

’Responsive’, like UX, is not something you just drop into a site after it has been designed.

  • I appreciate your thoughts on my design. If you could give me a slight idea on how the design should work or a place where a good implementation is done, I could get an idea on how my design should change. – Imesh Chandrasiri Sep 21 '16 at 8:30
  • My advice would be to just start with the basics of navigation, a list of links. It's accessible, obvious and responsive by default. Then you can start layering on some style and when you hit a point it no longer “works” then you can start designing around the issues you encounter. – Seth Warburton Sep 21 '16 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.