웹 디자인 기능사 실기 - 드롭 다운 메뉴(1)

* 공부 및 자격증을 위해 작성하는 글입니다.

* 부족한 내용이나 틀린 내용을 알려주시면 감사하겠습니다.

 

 

 

 

이런 형태의 드롭 다운 메뉴를 만들어 볼거다.

 

 

---

 

 

html 코드

<header id="header" class="clearFix">
  <h1 class="site-logo">
    <a href="#">로고</a>
  </h1>

  <nav>
    <ul class="gnb clearFix">
      <li>
        <a href="#">메뉴1</a>
        <ul class="sub-menu">
          <li><a href="#">서브메뉴11</a></li>
          <li><a href="#">서브메뉴12</a></li>
          <li><a href="#">서브메뉴13</a></li>
          <li><a href="#">서브메뉴14</a></li>
        </ul>
      </li>
      <li>
        <a href="#">메뉴2</a>
        <ul class="sub-menu">
          <li><a href="#">서브메뉴21</a></li>
          <li><a href="#">서브메뉴22</a></li>
          <li><a href="#">서브메뉴23</a></li>
          <li><a href="#">서브메뉴24</a></li>
        </ul>
      </li>
      <li>
        <a href="#">메뉴3</a>
        <ul class="sub-menu">
          <li><a href="#">서브메뉴31</a></li>
          <li><a href="#">서브메뉴32</a></li>
          <li><a href="#">서브메뉴33</a></li>
        </ul>
      </li>
      <li>
        <a href="#">메뉴4</a>
        <ul class="sub-menu">
          <li><a href="#">서브메뉴41</a></li>
          <li><a href="#">서브메뉴42</a></li>
          <li><a href="#">서브메뉴43</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

위의 html 코드는 브라우저상으로 이렇게 보인다.

 

 

css 코드

/* header */
#header {
  width: 1200px;
  margin: 0 auto;
  background-color: #999;
  text-align: center;
}

#header .site-logo {
  float: left;
  width: 200px;
  height: 100px;
  line-height: 100px;
  background-color: #888;
}

#header .site-logo > a {
  color: #fff;
}

#header nav > .gnb {
  float: right;
  width: 800px;
  line-height: 100px;
  background-color: #888;
}

#header nav > .gnb > li {
  position: relative;
  float: left;
  width: 25%;
  height: 100px;
  transition: all 0.15s;
}

#header nav > .gnb > li:hover {
  background: rgba(0,0,0,0.3);
}

#header nav > .gnb > li > a {
  display: block;
  color: #fff;
}


/* sub-menu */
.sub-menu {
  display: none;
  position: absolute;
  width: 100%;
  line-height: 50px;
  background-color: #777;
}

.sub-menu li a {
  display: block;
  color: pink;
}

.sub-menu li a:hover {
  background: rgba(0,0,0,0.4);
}

 

 

.sub-menu 에 position: asolute;를 준 뒤,

#header nav > .gnb > li 에

position: relative;로 고정시킨 이유는

이렇게 하지 않으면  .sub-menu가 내려오면서 

아래의 컨텐츠들과 글자가 겹치는 현상이 나타남

 

 

 

 

 

 

 

그리고 이건 처음 드롭다운 메뉴를

처음 만들었을 때의 실수이긴 한데,

위의 드롭다운메뉴와 컨텐츠들이 충돌하는 코드에서

#header nav > .gnb > li 에 height 값도 주지않으면

.sub-menu가 내려오면서 

content 부분을 같이 밀어내려버린다.

 

 

 

 

 

 

jQuery 코드

$(function(){

  // gnb > li에 마우스 올렸을 때, sub-menu 스르륵 내려옴
  $('.gnb > li').on('mouseenter', function(){
      $(this).children('.sub-menu').stop().slideDown();
  });
    
  // gnb > li에 마우스 내렸을 때, sub-menu 스르륵 올라감
  $('.gnb > li').on('mouseleave', function(){
      $(this).children('.sub-menu').stop().slideUp();
  });
  
});

$('.gnb > li').on('mouseenter', function(){}); 는 

.gnb 안의 li(메뉴)를 선택해서 이벤트 기능 중에 마우스를 올렸을 때,

function안의 내용을 실행한다는 뜻이다.

 

그 function 안의 내용은 this(== .gnb > li)를 선택해서

그 자식 중에(children) .sub-menu를 찾아서

slideDown을 해줘라. 이런 뜻이다.