loading...

Challenge: CSS Navigation

dandevri profile image Danny de Vries ・1 min read

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 the right.

Navigation pattern screenshot

Recreate the layout of this navigation with as little html and css as possible.

My personal solution uses flexbox with 7 lines of html and 13 lines of css. Is it possible with less?


EDIT: This is wat I came up with: https://codepen.io/anon/pen/wYebQg

Discussion

pic
Editor guide
Collapse
vasilisvg profile image
Vasilis van Gemert

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

Collapse
dandevri profile image
Collapse
valeversa profile image
valeversa

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

Collapse
dandevri profile image
Danny de Vries Author

Nice one! Neat trick with CSS grid, might Flebox be better suited for this?

Collapse
valeversa profile image
valeversa

Unfortunately I'm not that familiar with Flexbox, that's why I'm really interested in your solutions :)

Collapse
eblairmckee profile image
Blair McKee

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

Collapse
valeversa profile image
valeversa

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 :)

Collapse
dandevri profile image
Danny de Vries Author

For semantic purposes I would use list item here. But indeed, it can be done without.

Collapse
cad97 profile image
Christopher Durham
<img src="https://thepracticaldev.s3.amazonaws.com/i/e74vongtncaaalpfi33t.png" />

One line /s

Collapse
dandevri profile image
Collapse
keinchy profile image
Frederick Jaime

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

codepen.io/Keinchy/pen/RegVYr

Collapse
dandevri profile image
Danny de Vries Author

Smart solution! I used another alternative.

Collapse
halcika7 profile image