Challenge: CSS Navigation

Danny de Vries on October 11, 2018

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 ... [Read Full]
markdown guide
 

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; and color: #000000; to ovveride browser link styling). Here's my solution: codepen.io/versavale/pen/VEWKMB

 

Nice 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 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...

 
 

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.

 
<img src="https://thepracticaldev.s3.amazonaws.com/i/e74vongtncaaalpfi33t.png" />

One line /s

 
 
 

i really tried not to over think this:
7 lines in html
12 lines in css
gotta love Flexbox

codepen.io/Keinchy/pen/RegVYr

 
code of conduct - report abuse