[animated] Menu interaction

10 Responses

  1. Alex Pankratov Alex Pankratov

    This is the last piece to go into the Interaction section of the portfolio. The GIF is quite large, over 4 megs, so do show some patience.

    ----

    This is a variation of a stacked menu, whereby opened submenus are collected at the top and the active submenu of choices sits at the bottom. What makes this particular menu different is an ability to navigate to its every corner without needing to change current selection.

    Second notable thing is the "currently selected" link at the top line that appears only when the user clicks away from the submenu containing the current selection. It may not look like much, but this ability to always "reset" the menu to its selection-centric state is what make this menu actually usable. It allows synch'ing up the menu with the page content when it's not immediately clear where the current page belongs in the menu.

    ----

    In any case, here's the production version. Any thoughts or comments are welcome.

    about 2 years ago

  2. Cory Hughes Cory Hughes

    Would it make sense to indent the subcategories? as it is now, depending on screen size, this might be a bit confusing.

    about 2 years ago

  3. Alex Pankratov Alex Pankratov

    @Cory At the stacked part?

    about 2 years ago

  4. Sven Read Sven Read

    Its kinda unusual, but I like it. It works for me.

    likes

    about 2 years ago

  5. Alex Pankratov Alex Pankratov

    @Sven - being unusual is the whole point :)

    about 2 years ago

  6. Brian Plemons Brian Plemons

    Too many clicks for me...I would have lost interest. :(

    about 2 years ago

  7. Alex Pankratov Alex Pankratov

    @Brian - Ah, yes, excessive mouse wear and tear is definitely a concern :)

    about 2 years ago

  8. Brian Plemons Brian Plemons

    @Alex Pankratov It's very nice though, don't get me wrong. :)

    about 2 years ago

  9. Cory Hughes Cory Hughes

    @Alex Pankratov yes. when viewed on a phone (in landscape orientation) depending on how many levels down you are in the navigation, its kinda muddled even with the headers and the arrow (especially if you added more content to it).

    On a desktop browser this doesn't really matter, but on mobile, once you zoom in to actually be able to (accurately) tap any links, I think its a different story.

    Mock1
    Mock2

    I like this though, even if needs a few too many clicks as @Brian Plemons said. :)

    about 2 years ago

  10. Alex Pankratov Alex Pankratov

    @Cory - right, I see what you mean. I had no time yet to adjust the site for the mobile viewing. To be honest, I don't like the indenting idea, it solves the ambiguity (which is there) by adding visual complexity. The same can be done by simpler means.

    about 2 years ago

keyboard shortcuts: previous shot next shot L or F like