Here's a quick challenge I came up with the other day. A very common navigational pattern is to put the logo on the left side and the list items on...
For further actions, you may consider blocking this person and/or reporting abuse
I think navigation should be part of the footer. So I put it there, where it should be. And then I think that if you don’t add interactivity you might as well use an image. So I added a few link states as well. Some extra lines of CSS because it’s the web, not an image editor (-:
codepen.io/vasilisvg/pen/VEEPZo?ed...
But then, to be honest, I think most of the time these links are really not needed. Who ever clicks on a navigation? Such an overrated pattern! So instead of a lonely
<ul>I would urge everybody to wrap it in something like a<details>with a clear<summary>, so you won't bother people with things they don’t need. In this case you need a lot less CSS, because you don’t really need any layout.codepen.io/vasilisvg/pen/gBBgmw?ed...
Hey Danny, fun challenge!
I've got 5 lines of html and 11 of CSS (13 with proper spacing), using CSS grid.
Are Item 1 and item 2 links? If so, I'm up to 13 lines of css (15 with spacing, adding
text-decoration: none;andcolor: #000000; to ovveride browser link styling). Here's my solution: codepen.io/versavale/pen/VEWKMBNice one! Neat trick with CSS grid, might Flebox be better suited for this?
Unfortunately I'm not that familiar with Flexbox, that's why I'm really interested in your solutions :)
I'm stuck at 7 and 14 with CSS grid... great challenge! Got the gears turning :-)
There must be a way to do the grid shorthand...
codepen.io/eblairmckee/pen/OBgjwe
Blair, if you use grid, I don't think it is necessary for you to use a list. You could be down to 5 lines of HTML :)
For semantic purposes I would use list item here. But indeed, it can be done without.
One line /s
¯_(ツ)_/¯
codepen.io/anon/pen/ZqJBxv
i really tried not to over think this:
7 lines in html
12 lines in css
gotta love Flexbox
codepen.io/Keinchy/pen/RegVYr
Smart solution! I used another alternative.