![]() ![]() It seems like a lot of code is required to make this happen, but there’s just a few key pieces to this puzzle that make it possible. ![]() This example has quite a bit of CSS, but don’t fret, I promise to explain the important bits: However, I learned that it is possible with some very clever uses of HTML input elements and CSS selectors. Hover effects don’t work, because when you open a drawer, you expect it to stay open. ![]() Content DrawersĬreating drawers with CSS alone seemed impossible. Deeply nested menus are a little perilous for the user, so use with caution. The second is that if your user wants to jump from a menu to a nested menu, she may take the shortest path and unintentionally move her mouse cursor out of the current element. Most sites will switch to a different style of menu on smaller devices, regardless of CSS vs JS. This type of menu requires a lot of real-estate and hovers don’t translate to touchscreens very well. The first is that it doesn’t work well on mobile devices. There’s only two caveats to this nested menu. Then check out the Sub Categories! Reset HTML Then within it we can use position: absolute to position the expanded menu around our category title. In the case of our dropdown menus, we make the li tag that contains the menu relative. If not, it is positioned relative to the whole page. If it has a positioned ancestor, it positions relative to that ancestor element. The behavior depends on whether this element is within an element that has some kind of positioning set. The element stays where it is, but when the user scrolls the page, before the element moves out of view, it will still stick to whatever top/bottom/left/right position is set.Īnd lastly, there’s Absolute positioning. Sticky: This is a newer, trickier positioning.So top: 0 wouldn’t move it at all, and top: 10px would push it down 10 pixels. Relative: The element is positioned based on where it would be normally.Eg: top: 0 would be the top of the viewer’s screen. Fixed: The element is positioned relative to the viewport.The element behaves normally, and is unaffected by top/bottom/left/right. When you set positioning, items can be moved around with top, bottom, left, and right options. W3 Schools has a great breakdown of CSS positioning, but here’s the short version: We position the hovered menu next to the category in the header using position: absolute. Note: The menu and category elements must be adjacent to each other so that your mouse stays within one or the other-you can’t position the menu off by itself somewhere and be able to mouse into it. dropdown_category list item, keeping the :hover selector trigger active. ![]() This means that although we’re no longer over the words “Cat 1”, the mouse is still within the. There’s a header up top with a list of categories, and when you mouse over one, a new menu appears with more related items. You’ve probably seen this on any e-commerce site or anything with lots of categories and navigation. The first menu I want to talk about is the dropdown menu. So without further adieu, here’s how I managed to recreate all of those menus with CSS alone. I had always been told that CSS was super powerful, but I don’t think I believed it until that point. I took those new tricks and used them to finish the coding challenge. I hopped on Codepen and began searching for CSS-only versions of these common UI components.Īfter a little digging, I found examples for all of them! While there were some tricks involved that I would have never thought of, the tricks themselves were simple. There were dropdown menus, drawers, and even a Bootstrap-esque mobile hamburger menu on one of the mocks.īeing the intrepid developer that I am, I saw this as a fun challenge. I thought, “No way! There’s menus everywhere! How can I pull that off without JS?” That’s a pretty typical request, except there was one catch: no JavaScript allowed. I was presented a set of mock-ups of a modern website and told to create the website as close to the provided assets as possible. It wasn’t until I had to do a coding challenge for a developer job that I had to reckon with the real power of CSS. I’ve made that choice many times since then, assuming that those were the only options when building navigation menus.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |