홈페이지 드롭메뉴 전체 배경 들어간 HTML + CSS 짜기

쉽다고 생각하던 HTML이 배신 때리던 날.

드롭메뉴를 짜다가 갑자기 배신당한 기분이 들어 오늘의 코드를 기록으로 남긴다..

오늘은 메뉴1을 호버하면 전체 소메뉴들이 다 보여지는 코드를 짜봤다. + 뒤에 배경까지 덤.

(사실 디자인이 별로라는 소리를 들어서 수정한 건이었다..)

 

개인적으로 소메뉴가 많으면 메뉴1에 따른 소메뉴만 보여지게끔 짜는게 좋지만(가독성 up),

소메뉴 갯수가 적다면 (7개 이하 정도) 전체 메뉴가 한번에 다 보여지게끔 하는 편이 낫다고 생각한다.

 

메뉴가 별로 없는데 일일이 호버하면서 찾기 번거롭기도 하고, 디자인이 좀 읎어보임..

 

---

암튼 HTML은..

<nav>

  <div class="container">

    <ul class="main_menu">

        <li>

          <a her="">메뉴1</a>

          <ul class="sub_menu">

            <li><a href="">소메뉴1-1</a></li>

            <li><a href="">소메뉴1-2</a></li>

            <li><a href="">소메뉴1-3</a></li>

            <li><a href="">소메뉴1-4</a></li>

          </ul>

        </li>

        <li>

          <a her="">메뉴2</a>

          <ul class="sub_menu">

           <li><a href="">소메뉴2-1</a></li>

            <li><a href="">소메뉴2-2</a></li>

            <li><a href="">소메뉴2-3</a></li>

            <li><a href="">소메뉴2-4</a></li>

          </ul>

        </li>

        <li>

          <a her="">메뉴3</a>

          <ul class="sub_menu">

           <li><a href="">소메뉴3-1</a></li>

            <li><a href="">소메뉴3-2</a></li>

            <li><a href="">소메뉴3-3</a></li>

            <li><a href="">소메뉴3-4</a></li>

          </ul>

        </li>

    </ul>

  </div>

</nav>

 

이런식으로 짬. (사실 좀더 복잡하게 짰는데 대충 골격은 이러함)

---

다음은 css. 스타일 준거는 거의 다 뺐다. 그래야 나중에 보기도 편해서.. 대충 골격이 어떻게 짜여지는지만 확인.

 

.nav{position: absolute; width: 100%; background: #fff; z-index: 500; border-bottom: 1px solid #333; box-shadow: 0px 4px 4px -2px rgba(0,0,0,.2);}

.container{width: 1200px; overflow: hidden; margin: 0 auto; text-align: center;}  //1200px너비로 가운데 정렬하기 위한 클래스

.main_menu>li{display: block; float: left; box-sizing: border-box;}
.main_menu>li>a{position: relative; display: block; width: 180px; padding: 18px 0; }

.sub_menu{ display: none; width: 180px; height: 300px; padding-left: 15px; z-index: 9999; text-align: left; background: #fff; border-right: 1px solid #ddd; box-sizing: border-box; }

 

.nav가 메뉴 전체를 싸고 있는데, 얘랑 부모영역에 높이값을 주지 않는다. 대신 (자식요소인) 앵커 태그와 sub_menu에 높이값을 준다.

그러면 호버시 sub_menu가 display:block 되면서 .nav에 높이값이 생긴다. 자연스럽게 배경으로 짜잔 나타남.

 

매우매우 쉽지만 html를 잘 파악하지 못하면 조금 골치아플 수도 있는 부분이다.