- This topic is empty.
-
AuthorPosts
-
March 29, 2014 at 9:04 am #167091tjgriffiths1Participant
Hey awesome community.
I am trying to get my head around making a drop down menu bar using css. I have created this bar (see html / css) but am really struggling with getting my head around the size of each ‘li’ element, and their subsequent drop down items. The way I have spread each of my 5 ‘li’ elements is by defining each box width at 18%. Obviously I cannot do this for the drop down box, so am wondering how to make them the same size?
Here is the codepen:
Thank you in advance,
tjgriffiths1
March 29, 2014 at 9:20 am #167093Paulie_DMemberThis will get you started:
#navlist li:hover ul { left:0; width:100%; }
BTW…the -9999px thing has a real performance hit.
Here’s one I keep around for reference: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294
March 29, 2014 at 9:24 am #167094AtelierbramParticipantAlso notice how Paulie_D’s example uses the child combinator selector
>
, which selects only the first direct list-elements, instead of all of the child list-elements.March 29, 2014 at 4:29 pm #167112tjgriffiths1ParticipantThank you Paulie_D & Atelierbram! I am seriously in awe of your skills. Do you have any recommendations as an alternative to using ‘-9999px’ ?
March 29, 2014 at 4:45 pm #167113AtelierbramParticipantvisibility: hidden
like in Paulie_D’s codepen example, or my fork of your codepenMarch 30, 2014 at 10:19 am #167136AtelierbramParticipant@jurotek for this thing
inline-block
could indeed be a better fit. I never feel quite comfortable with it, but that’s just me … Could be interesting making this work as flexbox:display: flex
, withdisplay: inline-block
as fallback. Might fork your fork of my fork for that :\
@tjgriffiths1 The negative top margin on thenav
in my example, with the top-border of the body as kind of “pseudo background”, is no longer needed when you would go withinline-block
instead offloats
. But if you would ever want to change the source order of the HTML markup, and put theheader
withh1
before thenav
, then pulling an element up with negative top margin is a useful trick to keep in mind.March 30, 2014 at 11:38 am #167140AtelierbramParticipantDidn’t noticed that, that is weird. Don’t really understand, … does this has to do with fighting-the-space-between-inline-block-elements ?
March 30, 2014 at 12:49 pm #167146AtelierbramParticipant@wolfcry911
You can be so thorough sir :)Just move the background from the nav to the li and it’s all good.
Have you tried to getting the alignment right with this method? Wouldn’t that involve using some ‘magic numbers’?
In my mind one can make it much easier, and also more bulletproof (giving away my preference here) when separating concerns (aesthetic and structural ) like I did in my fork with pulling-up-of-an-element with negative top margin. Only slight ‘ugly’ bit is the
min-height
on thenav
andul
, not really magic numbers though …March 30, 2014 at 1:07 pm #167148AtelierbramParticipantMost of the time I try to avoid the word always ;\ For example, his latest comment on that horizontally-scroll thread is worthy of a blog-post, and yes, I love to read all that intricate stuff too.
March 30, 2014 at 1:58 pm #167152AtelierbramParticipantYes, well that vertical alignment (top of the links in the sub list-items – with the bottom of the white background ) is what I had in mind from the start of making that fork. Kind of thinking ahead there: if that’s the design that is wanted/needed (which I like) then that’s what’s comes first in my book.
On formulating: what can drive me up the wall, as a non-native English speaker, is abbreviations, like for example the one you used just now: “OP”. Stands for Original Pen, no? I’m nitpicking here, but a thing like that can stop me in my tracks for a moment when reading. But never mind, I have that with listening to podcasts too, missing a punchline because of some <abbr>BS</abbr> abbreviation ;!
March 30, 2014 at 4:39 pm #167157AtelierbramParticipantDon’t be sorry, I am laughing out loud!
Also reminds me of that big nineties hit by “Naughty by Nature“, that one is more ambiguous though.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.