drop down menu

Hey, i'm trying to learn how to create a drop down menu for a nav link and i have a few questions - i'm trying to center the drop down container in the middle of the about link but left: -50%; doesn't quite do it for me, is this because the container is absolutely positioned in relation to the nav link therefore only moving it to the left half of the nav link? If this is the case would a transform be better? - i've seen a few people do it this way so i tried it out here, the arrow is absolutely positioned in relation to the container which has also has a value of position: absolute;, does an absolutely positioned element in relation to another absolutely positioned element set the first element absolute to the second? it seems to work here but i'm not sure if that's good practice or is valid? here's the codepen if it helps https://codepen.io/deerCabin/pen/abPoNoo, thanks in advance
12 Replies
croganm
croganm15mo ago
Little secret for you, to center with absolute and relative positioning. Left 50% and transform translateX -50%
croganm
croganm15mo ago
To center vertically and horizontally (not useful for this case but sometimes useful in general), left 50% top 50% and transform translate -50% -50% Haha it's a very useful little tidbit of knowledge
vince
vince15mo ago
For your second question, I believe a position: absolute element will position itself relative to its nearest positioned (position property is something other than static) ancestor. See: https://developer.mozilla.org/en-US/docs/Web/CSS/position I'm not really sure what you mean by "does an absolutely positioned element in relation to another absolutely positioned element set the first element absolute to the second?". If I understand, and element X is a child of element Y - and they are both position absolute - then I believe element X should be positioned relative to element Y.
croganm
croganm15mo ago
That is correct in my experience, yes. And it's also fine practice
snxxwyy
snxxwyy15mo ago
ahhh i see how that all works now 😄, i appreciate the help guys. could i ask how Left 50% and transform translateX -50% works?
vince
vince15mo ago
I confirmed this in the codepen, just updated https://codepen.io/vince1444/pen/vYvBGLx When you transform: translate(%, %), it translates by the percentage of the element's own width/height. When you use top/left/bottom/right properties, the percentages are based off the parent's dimensions
croganm
croganm15mo ago
Haha it's so cool actually how it works. Pretty clever solution
snxxwyy
snxxwyy15mo ago
ah yeah i see. i'll try to explain it in the context.. the drop down container is an absolutely positioned element of the nav link and the arrow on top of the container is an absolutely positioned element of the container. so since they both have position: absolute; on them, i was wondering if the arrow would be absolutely positioned to the container and if that's good practice. yeah it really is ayy thanks for the explanation, and all of the codepens!
croganm
croganm15mo ago
👍
vince
vince15mo ago
Yup that seems to be the case 🙂 👍
snxxwyy
snxxwyy15mo ago
ah cool, i'm glad
Want results from more Discord servers?
Add your server