를 사용하면 다음과 같은 ul li의 구조로 카테고리가 출력된다.
link_tit는 전체보기
linked_item은 대카테고리
link_sub_item은 소카테고리를 포함하고 있는 태그이다.
Horizontal nav바를 만들기로 해서 display:inline을 이용하여 가로로 나열하게 만들었는데 예상외의 복병이 있었다.
바로 ul li아래에 있는 ul들때문에 대카테고리들이 일열로 쭉 나열되는 것이 아니라 sub_category_list의 height만큼 아래에서 정렬이 되고 있었다.
게다가 내가 원하는 간격만큼 떨어져서 나열되는 것이 아니라 다닥다닥 붙어서 나열되는 바람에 모습이 너무 보기 안좋았따.
그래서 float:left를 한 후 display:block으로 나열을 했더니 어느정도 내가 원하는 방향대로 navbar가 설정되었다. (솔직히 포스팅하는 이 시점에서 이 것만으로 해결되었던 것인지 기억이 잘 안난다.)
이제 linked_item에 hover하면 sub_category_list들을 dropdown의 형식으로 보여주는 것만 하면 되는데 생각대로 잘 안되서 일단 여기까지의 결과를 정리해서 포스팅한다.
아마 다음번에는 transform:translate3d를 이용해서 나타나게하거나 부트스트랩 dropdown을 이용할 생각이다.
그리고 a에게 hover했을시 sub_category_list를 작동시키는 방법으로는 형제선택자를 이용할 생각이다.
'코딩 > Web' 카테고리의 다른 글
[navbar]하다하다 안되서 잠시 중단. (0) | 2017.08.02 |
---|---|
[navbar]목표 또 변경 ㅋㅋㅋ (0) | 2017.07.28 |
[사이드바]navbar로 변경 (2) | 2017.07.23 |
[사이드바]제작기 1 (0) | 2017.07.23 |
[사이드바] 블로그에 사이드바가 필요할듯 싶다. (0) | 2017.07.18 |
댓글