The trick is to toggle the display property of the sub menus when hovering over the top-level menu items. To make this interaction behave nicely on touch devices, a small amount of JavaScript is required to convert hover events into click events – but we’ll take a look at that later. We can use the hover interaction to show and hide a sub-menu by using more complex CSS selectors. Another common design pattern on the web is dropdown menus in a site’s main navigation. We’ve seen a basic use of :hover to give some visual feedback when interacting with links and buttons. Now your state based styles will show during keyboard interactions on elements that can be focused or made active. I like to group this set of four link states together as part of a reset stylesheet that will set sensible defaults for an entire hover-focus-active () the user has used the tab key to jump through the clickable items on a page like links and form inputs. Finally, there’s a:focus for a link that currently has keyboard focus – ie. There’s also a:active for styling a link that is currently being clicked on. There’s a:visited for styling links that the user has in their browser history. There are other pseudo classes that are useful for styling different link states too. You could increase the font-size and rotate the link by 180 degrees if you really wanted to – but don’t do that. In this example, just the colour is being styled but any properties can be changed, overwritten, or cancelled out. We’ll look at a number of them in this video and throughout the rest of the series – and you can check out the :enabled and :disabled pseudo classes in Episode 5. The colon next to the a signifies a pseudo class. The hover state of a link can be styled in CSS as follows: Probably the most common use of :hover is to provide visual feedback to users when mousing over links and buttons. Finally we’ll create a CSS dropdown menu triggered by hover and enhanced with jQuery for touch devices. We’ll also look at some of the downsides of hover and some work-arounds for non-mouse users. In this episode, we’ll look at the :hover pseudo class on text links and cover some of the other other link pseudo classes as well. The hover state is active when a users mouse enters the bounding box of an element and is inactive when the users mouse leaves it. Hover is a pseudo class and can be used to style state. For a demo of doing that for a dropdown nav, check out this demo on Codepen. When dealing with touch devices, key bits of info shouldn’t be hidden behind hover interactions but if this can’t be avoided, hover events can be swapped out for clicks using JavaScript. It’s important to bear in mind that some users don’t have a mouse and :hover on touch devices can be a bit flaky. We can enhance user experience by styling elements that are being interacted with under different states like :hover, :focus and :active.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |