Understanding Grid system
Code Pen: https://codepen.io/mab141211/pen/NPGjqbv
I want to use the 0fr to 1fr grid logic in order to make this side bar work in two ways one normally when it will always be displaying and the other when it will be displayed only on hover and the body should be touching the
, but when I try to create the hover effect with
It doesn't work as expected.
If you remove the lines I commented with remove the normal version should work.
I also want the version where body is touching .aside div and and .nav is hovering above. (I tried with absolute in codepen given above)
17 Replies
"It doesn't work as expected."
can you describe what you expect to happen ?
First para:
"I want to use the 0fr to 1fr grid logic in order to make this side bar work in two ways one normally when it will always be displaying and the other when it will be displayed only on hover and the body should be touching the
"
what I mean is "what do you want the thing to look like" ? at the moment it shows on over as you described
I suppose what you want is for it fill the grid column instead of taking the with of the
.main ?
'cause with width: 100% and position: absolute on your nav that it what is happening
so, is what you expect "the nav shows over the body when the aside is hovered" ?https://codepen.io/mab141211/pen/NPGjqbv
I want it to work this way but come above the body content.
I hope this clears it
basically I want to do 0 width to auto in absolute positioning
and you want the transition ?
you want this ?
https://codepen.io/ragnar_ock/pen/MYamyJX?editors=1100
yes
https://codepen.io/mab141211/pen/NPGjqbv
I want this but without set width
the pen I linked above does not have a set width on the nav
Yes but the effect is different
how so ?
you will need to be specific on what you are looking for if you want me to help you
I'm no mind reader
yes sure
thats what I'm trying...
yours has a feeling of translation i.e coming from behind the yellow bar, where as the one I did is like something expanding
from the right of the yellow bar
you can play with the transform then, I used a translation because that's what it looked like on your example but you couls scale it on the x axis or rotate it on the y axis if you wanted to
not the point everything done so far just ends up being set values when taken out of the DOM with position absolute. and just can't get the result of position static/relative when doing with grid-template-rows/columns: 0fr to 1fr
I only used 0 and 100% the only set vales are the width of the yellow aside and the pink box you had in the nav (that I suppose simulates content)
yes but the effect is different I just opened them together and checked 4-5 times the effect is different
indeed it sims content