left-side-bar

HTML

 

 

div.left-side-bar>div.icon-status+nav.menu-box-1>ul>li*4>a[href="#"]{1차 메뉴아이템$}+ul>li*4>a[href="#"]{2차 메뉴아이템$}을 하고 탭을 해주어 left-side-bar안에 icon따로 menu-box따로 만들어준다

 

icon-status의 자식으로 span*2를 하여 두개의 아이콘을 넣어준다

 

 

 

 

 

CSS

 

 

 

 

1. body, ul, li, a를 노말라이즈해준다

 

2. .left-side-bar의 배경색, 유령화, 크기조절을 해주고 transition을 left로 0.3초 지정해준다

       -->transition : 변환옵션을 준다.

        ex) width 1s => 너비를 변환하는데 기간을 1초 동안

 

 

 

 

 

 

 

 

3. left-side-bar에 마우스를 올렸을때 left는 0이 되도록 지정해준다

4. icon의 자식 span들을 맨오른쪽으로 정렬, 블럭화, 안쪽여백을 5px준다

5. span의 마지막 자식은 보이지 않고 마우스를 올렸을 경우 블럭화 시켜준다

 

 

 

 

 

 

 

 

 

 

6. span의 첫번째 자식은 마우스를 올렸을 때 보이지 않도록 설정해준다

7. left-side-bar>.menu-box-1>ul 안의 모든 ul을 보이지 않게 해주고 유령화시킨후 자리를 지정해준다

8. 모든 ul의 색을 맞춰준다

 

 

 

 

 

 

 

9. left-side-bar>.menu-box-1의 모든 ul의 후손 a를 블럭화 10px의 여백 해주고 white-space를 nowrap으로 설정하여 다음줄로 넘어가지 않도록 설정해준다

10. li에 마우스를 올렸을 때 a의 글자색상 배경색을 지정해준다

11. li에 마우스를 올렸을 때 2차 3차 메뉴들이 나오도록 해준다

12. 모든 ul의 자식 li를 position을 relative시켜주어 2차 3차 메뉴들을 가두어준다

 

 

 

 

 

 

13. 1차 메뉴 li에 마우스를 올렸을 때 a중 혼자가 아닌 a들의 뒤에 -를 붙여준다

14. 마우스를 올리기전에는 a의 뒤에 +가 붙이도록 한다

 

 

 

 

 

결과