guglinvestments.blogg.se - Hide out clique

#Hide out clique how to#

Let’s use it to make our website menus awesome! Switching to click menus Regardless of your device or input mode, a “click” is a more universal and solid interaction. Using anything other than a mouse? Pressing ENTER or activating a link with any type of switch control is more equivalent to clicking than :focus is equivalent to :hover.File, Edit, etc.)? Those almost never appear on hover! Using a touch device? Hover isn’t really a thing there.When you think about it, click menus are actually what we expect already in most other contexts: We’ll deal with what happens to those top-level pages in a moment. All links are contained in submenus except for top-level items that have no submenu (e.g.Site visitors must click the parent item to view its submenu.This instantly solves the hover menu problem because click menus work unambiguously. Instead of relying on the hover interaction or some other “creative” (and confusing) solution, let’s build menus where parent items are buttons that show and hide submenus when clicked. So, what’s the better option? Enter the click-triggered submenu! Click menus to the rescue Until someone hovers or focuses the arrow button, they probably won’t guess it’s independent of the link.

Because it’s so uncommon, I find that visitors often overlook the top-level page link, and research suggests that users don’t perceive a label and icon as being separately clickable. The Twenty Fifteen default WordPress theme uses that pattern. Probably the least common type of menu I see uses a “split button” design where the parent item is a link and a separate drop-down icon opens and closes the menu. It makes it impossible to satisfy Jakob’s law of usability that “users prefer your site to work the same way as all the other sites they already know.” There is no standard implementation when it comes to hover menus, so we need to do something different to provide a consistent user experience.

Even if the parent item is a unique link, is it worth my time to view?.

Will the parent item be a link to the same page as the first submenu link?.

No matter how we implement hover menus, our visitors can reasonably wonder: Visitors are reasonably confused by hover menus When first seeing a hover menu, a visitor can reasonably wonder which of these four ways the menu might work. Here’s a diagram showing all four possible hover menu setups. These last two configurations waste time for people who do know the parent items are links with redundant or useless content. The page itself serves no real purpose for anyone visiting it.

The parent item links to a page containing useless fluff content or only the links in the submenu.

Making matters worse, the parent item and first submenu links having different link text violates a WCAG 2.1 Level AA accessibility standard.

The parent item and first submenu item link to the same page.

My guess is that these evolved from attempts to compensate for the confusion caused by the first two setups. This leads to the third and fourth not-so-great patterns you’ll encounter. Yet others assume the top-level links are pages and try to click them. Some people skip right past helpful top-level pages, assuming those items aren’t links. This inconsistency - is the parent item a link or not? - leads to lots of confusion when I watch people use websites. In our example, “Services” is still a link, but nothing happens when you click it.

The parent item has href="#" - or even no href at all 😱 - and the only functional links are in the submenus.

For the example above, “Services” would be a unique page and so would every link in the “Services” submenu.īut somewhere along the way, a second very common pattern arose.

The top “parent” menu item links to a page and each submenu item links to another page.

Simple enough, right? The arrow icons show us there are submenus for each item except “Home.” But if those submenus appear on hover, there are at least four ways the menu might work, and you’ve probably experienced all four of them.

Try using both your mouse and the TAB key to move through the demo. These days, we can improve the accessibility of CSS-only menus with a newer trick! Menus can open and close when navigating them with a keyboard, thanks to :focus-within. * Position submenus relative to parent list item */ (It was probably after reading this 2003 article from A List Apart.) At the time, it was a true CSS trick.

#Hide out clique how to#

I still remember my excitement when I learned how to build a hover-triggered submenu with just CSS.