코딩

4월 24일

상여브 2020. 4. 25. 01:03

*풀다운 메뉴 만들기 진행할 때 >> border:2px solid red; 와 같은 식으로 표시하며 진행한다.

*풀 다운 메뉴 만들기 진행할 때 1차 메뉴 과정 2차 메뉴 과정... 메모장에 기록하며 진행한다.

 

 

*.menu-box-1 ul > li:hover > ul 
>> 메뉴박스안에 어떤 메뉴던 그의 자식 메뉴 아이템에 마우스를 올렸을 때 그의 자식 메뉴가 보여진다
*.menu-box-1 > ul ul 
>>메뉴박스의 자식인 메뉴안에 속한 모든 메뉴(1차 메뉴를 제외한 2차,3차...등의 모든 메뉴들)

 

 

1 2차 메뉴 아이템까지 전부 배경색을 입히기 위해 .menu-box-1 ul을
   해줌으로서 메뉴 박스 안에 있는 즉 후손들 중 ul의 배경색을 전부
   회색으로 입힌다.
2. 2차 메뉴를 유령화를 해줌으로서 1차 메뉴에 영향이 안가게 해야한다
    그러므로 .menu-box-1 > ul ul 이 식을 보면 메뉴 박스의 자식인:ul 의
     후손인 ul(2차 메뉴)에 유령화
3. 2차 메뉴아이템에 유령화를 했지만 relative를 통해 메뉴 안에 아이템들을 가둔다
4.1차 메뉴 때는 메뉴박스 > ul >li > a 이 식으로 통했지만 2차 메뉴 아이템들
     에게도 패딩을 입혀야 한다. 메뉴 박스 안에 있는  모든 ul의 자식인 li > a들에게
     패딩을 입힌다
5. 마찬가지로 메뉴박스 > ul >li에 호버를 입혔지만 2차 메뉴로 늘어남으로
   메뉴 박스와 ul 사이의 > 제거하고 메뉴 박스 안에 있는 모든 ul의 li 에게 
   마우스를 댔을 때........

 

3차메뉴만들기
-노멀라이징
-1차메뉴를 제외한 메뉴 숨기기
-1차 메뉴 만들기 과정 진행
-1차 메뉴 아이템에 마우스를 올렸을 때 서브 메뉴 보이기
-서브 메뉴 모두 유령화
&포지셔닝(유령화를 하게 되면 위치를 지정해주어야한다 부모를 벗어나므로)
&서브 메뉴들에게 유령화를 걸어주고 위치도 걸어준다
&모든 메뉴 아이템에게 집을 지어주어 유령들을 가둔다
&3차 메뉴 아이템 위치 지정 (ex. 메뉴박스 > ul ul ul의 위치 지정)
&위치 지정 후 넓이 지정 
-모든 메뉴에 배경 입히기
&1차 메뉴 아이템 텍스트에만 있던 여백을 모든 메뉴 아이템 텍스트에도 입히기
&1차 메뉴 아이템에만 있던 hover를 모든 메뉴 아이템에 입히기
&1차 메뉴에만 있던 2차메뉴 보이기를 2차 메뉴에도 입히기
-3차 메뉴 아이템 왼쪽에 나타나게 하기(포지셔닝을 left:auto;을 해줘야 right:100%;가 먹는다)

 

혼자 3차 메뉴까지 만들기는 실패했지만 기록한 것들 되짚으며 내일은 완성하기

'코딩' 카테고리의 다른 글

4월 27일  (0) 2020.04.28
4월 26일  (0) 2020.04.26
4월 23일  (0) 2020.04.23
4월 22일  (0) 2020.04.23
4월 21일  (0) 2020.04.21