![]() 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. Use Bootstrap menus and include a bunch of JavaScript/jQuery on the page, or.My site had to look good on mobile, so I was left with a choice: As soon as I added a few links to my header, I began to run out of room on smaller screens.
0 Comments
Leave a Reply. |