냐울당 햄버거 메뉴

목차

    반응형

    내비게이션 마우스 올릴 때만 나오게

    안녕하세요. 개자이너 씸플레이입니다.

    하위 카테고리가 평소에는 가려져있다가 마우스를 올렸을 때만 나오게 만들어보겠습니다.


    1. 감추기

    평소에는 안 보이게

    ① 감출 부분 확인

     

    • 감추고 싶은 부분을 확인해봅니다.
    • 하위 카테고리는 평소에는 보이지 않다가 마우스를 올리면 보이게 만들고 싶습니다.

     

    display:none;

    display:none;

     

    • display는 말 그대로 어떻게 보이는지를 결정할 수 있는 css 속성입니다.
    • 속성 값으로 none을 쓰면 없다. 즉, 보이지 않게 됩니다. 
    • 여기서 문제는 선택자를 어떻게 잡으면 좋을까 하는 것입니다. 
    • css는 선택자만 잘 잡아도 코드를 깔끔하게 작성할 수 있습니다. 좋은 방법을 항상 발견하려고 노력해봅시다.

     

    클래스를 기준으로

    
    .gnb>li ul{ display:none; }
    
    

     

    ③ 클래스를 기준

     

    • 일단 기준점이 있다면 한결 편합니다.
    • 클래스가 있다면 더욱 편하죠. 여기는 클래스가 있으니 클래스를 기준으로 생각해보겠습니다.
    • gnb라는 클래스 안의 <li>태그, 그리고 그 안의 <ul>태그가 저희가 css를 넣어주어야 하는 부분입니다.
    • > 이 꺽쇠가 자식 태그 중에서만 선택할 수 있게 하는 기호인 것을 저번 시간에 배웠습니다.
    • 자 이제 한 단계 더 안으로 들어가는데 여기는 <ul>태그가 하나죠.
    • 그럼 꺽쇠 까지는 필요가 없으니 한 칸 띄어쓰기를 하고 적어줍니다.

    하위 카테고리가 감춰진 모습

    ④ 확인

     

    • css가 잘 적용되었는지 확인해줍니다.
    • 하위 카테고리가 보이지 않으면 잘 적용된 것입니다.

    2. 마우스를 올릴 때

    <li>에 마우스 올렸을 때

    ① 선택자 찾기

     

    • 위에서 말했듯 선택자만 잘 찾아도 반은 진행됩니다.
    • 카테고리에 마우스를 올렸을 때 하위가 나오게 하고 싶은 것이니 그 전체를 감싸고 있는 <li>태그를 선택자로 잡아주시면 됩니다.
    • <a> 태그로 잡으셔도 괜찮지만 감싸는 태그가 영역이 좀 더 넓기 때문에 <li>태그를 추천드립니다.

     

    
    .gnb>li:hover{  }
    
    

     

     

     

    ② :hover

     

    • 마우스를 올렸을 때 css를 관리해주는 것은 hover라고 합니다. 
    • 다만 이 친구는 속성이 아니고 상태를 나타내는 것이니 선택자 뒤에 붙여줍니다.
    • 위 코드에서 보는 것처럼 li뒤에 :hover 이렇게 적어줍니다.
    • 그리고 다른 css 속성을 적듯이 안쪽 중괄호 안쪽에 입력해주면 됩니다.
    320x100

    3. 다시 나타나게

    
    .gnb>li:hover{
       ul{ display:block; }
    }
    
    

     

    ① ul

     

    • 그렇다면 다시 나타나게 하는 코드는 어떻게 쓸까?
    • 위에서 hover를 넣은 선택자ul{ display:block; } 를 통째로 넣어줍니다.
    • 마우스를 올렸을 때 안에 있는 <ul> 태그의 상태를 display:block;로 바꾸겠다는 의미입니다.
    • 이때는 이미 <li>까지 선택이 되어있기 때문에 자식 태그만 적어주셔도 됩니다.
    • 여기서 blockdisplay의 기본 상태입니다. 블록에 대한 더 자세한 설명은 지난 시간에 했으니 생략하겠습니다.

     

     

    마우스를 올려보자

    ② 확인

     

    • 마우스를 카테고리 위에 올려서 제대로 동작하는지 확인해봅시다.
    • 하위 카테고리가 나타난다면 제대로 적용이 된 것입니다.

     

    [같이 보면 좋은 글]

    [coding/html + css] - [css] 내비게이션(gnb) 만들기 03 - 가로로 정렬하기

    [coding/html + css] - [html] 내비게이션(gnb) 만들기 02 - 페이지 주소 팁


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바