[CSS]hover를 이용한 세로 메뉴(code)
See the Pen LYxJgXv by minsucoding (@minsucoding) on CodePen.
오늘 만들어본 예제는 세로 메뉴이다
위 예제를 볼때는 x0.5로 보는것을 권장한다
간단하게 어떤식으로 만들었는지 설명을 하겠습니다
기본적으로 블록속성을 가지고 있기때문에 바로 ul과 li에 width값을 200px 부여해줌으로써 안에 있는 요소들이 전부 width가 200px이 되는것을 확인할수 있다
overflow:hidden은 부모의 크기를 넘어가면 자식이 안보이게 하는 속성도 있지만,
만약 부모에 높이를 정해주지 않았을때에는 부모가 자식의 높이에 맞춰서 height값을 가지게 해주는 속성도 가지고 있다
그래서 위에서는 높이를 정해주지 않고 조금 더 탄력을 주기위해서 overflow:hidden으로 처리했다
외에 나머지 속성은 아주 간단하다
menu에 마우스를 오버하면 listBox가 나타나게 해주면 되는것이다
다양한 방법이 있지만 우선 자연스럽게 열리는걸 보여주기 위해서 height:를 조정해주었다
이렇게 하면 기존 listBox에 height:0을 :hover listBox에 height: calc(자식의높이(단위)*자식의갯수)를 해주어야 한다
그 이유는 nonehover => height:0 , hover => height:clac(자식의높이(단위)*자식의갯수) 는 y = 0 , y = clac(자식의높이(단위)*자식의갯수)라고할수있다
즉 y값이 천천히 증가하는 모습을 볼수있게 되는것이다
이제 확인을 해보면 마우스를 오버하면 위에서 리스트가 열리는 모습을 볼수없다
이유는 간단하다 아직 transition을 주지 않았기 때문이다
이제 마지막으로 transition을 넣어주면서 마무리해보자
이제 원하는 메뉴바가 나온것을 확인할수 있다
이 리스트를 사용하고 싶다면 li안에 a태그를 넣어서 사용하면 될것이다
오늘 설명은 더 길게 말할 부분이 없기 때문에 여기서 마치겠다