This is why we assigned a fixed position to the dropdown, and set its width and height to 100%. įor mobile devices, the basic idea was to let the user focus totally on the dropdown content, once it has been activated. cd-dropdown, which is composed of nested unordered lists. cd-dropdown-trigger, to trigger the dropdown, and a. cd-dropdown-wrapper), and the for all the main content. The HTML is structured in 2 main elements: the, containing the dropdown (. Icons: Nucleo Library Creating the structure In case you disagree, switching from one approach to the other is a piece of cake ) This is why we preferred click over :hover state.
Users generally expect to click to access new content, while :hover effects mostly detect a “potential action”. However these decisions should be based on what we think is the best user experience. We could have achieved the same result using a :hover state instead, no need for js (we do provide a :hover fallback in case javascript is disabled). Here is a quick animation we put together to show you our mobile vs desktop approach:Īs you can notice from the demo, our dropdown is activated with a tap/click.
We’ve been working on a similar concept, a responsive mega dropdown component with sub-categories. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories… that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page. One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content.
0 kommentar(er)
