[script] gnb menu slide toggle2

 

gnb 영역에 마우스 hover 했을때 아래 sub_gnb 리스트 + 하얀색 배경이 같이 내려와야한다.

오른쪽 메뉴버튼 클릭했을때 마찬가지로

서브메뉴와 뒷배경이 같이 보여져야 함.

 

스크립트도 hover 했을 때와 click 했을 때 두가지로 써야함. 

추가되는 class는 on으로 통일해서 css 한번만 써도 될수 있게 했다.

$(document).ready(function(){
  $(".gnb").hover(function(){
    $("#header").toggleClass('on');
    $(".gnb_bar").stop().slideToggle();
    $(".bg").stop().slideToggle();
  });

  $('.gnb_btn').click(function(){
    $('#header').toggleClass('on');
    $(".gnb_bar").stop().slideToggle();
    $('.bg').stop().slideToggle();
  });
});

 

div. class="gnb" 안에 gnb_bg가 있어야되는 구조.

<div id="header">
  <div class="header_inner">
    <h1>CARINA</h1>
    <div class="gnb">
      <ul>
      <li><a href="">메뉴11</a>
        <ul class="gnb_bar">
          <li><a href="">서브 메뉴1</a></li>
          <li><a href="">서브 메뉴2</a></li>
          <li><a href="">서브 메뉴3</a></li>
          <li><a href="">서브 메뉴4</a></li>
          <li><a href="">서브 메뉴5</a></li>
        </ul>
      </li>
      <li><a href="">메뉴12</a>
        <ul class="gnb_bar">
          <li><a href="">서브 메뉴1</a></li>
          <li><a href="">서브 메뉴2</a></li>
          <li><a href="">서브 메뉴3</a></li>
          <li><a href="">서브 메뉴4</a></li>
          <li><a href="">서브 메뉴5</a></li>
        </ul>
      </li>
      <li><a href="">메뉴13</a>
        <ul class="gnb_bar">
          <li><a href="">서브 메뉴1</a></li>
          <li><a href="">서브 메뉴2</a></li>
          <li><a href="">서브 메뉴3</a></li>
          <li><a href="">서브 메뉴4</a></li>
          <li><a href="">서브 메뉴5</a></li>
        </ul>
      </li>
      <li><a href="">메뉴14</a>
        <ul class="gnb_bar">
          <li><a href="">서브 메뉴1</a></li>
          <li><a href="">서브 메뉴2</a></li>
          <li><a href="">서브 메뉴3</a></li>
          <li><a href="">서브 메뉴4</a></li>
          <li><a href="">서브 메뉴5</a></li>
        </ul>
      </li>
      <li><a href="">메뉴15</a></li>
      <li><a href="">메뉴16</a></li>
      </ul>
    <span class="bg"></span>
    </div>
    <div class="gnb_btn"></div>
  </div>
</div>
<div id="visual"></div>

.gnb{float:left; margin-left:300px; height:100%; }
.gnb > ul > li {float:left; position:relative;  height:90px; }
.gnb > ul > li + li{margin-left:70px;}
.gnb > ul > li:hover > a{color:#9c1d22;}
.gnb > ul > li > a {display:block; line-height:90px; font-size:18px; color:#fff;   font-weight:bold;}

.gnb_bar {position:absolute;  width:100px; padding:20px 0; z-index:2; display:none; }
.gnb_bar li a{font-size:16px; color:#444; line-height:2.4; font-weight:bold; }
.gnb_bar li a:hover{color:#9c1d22;}
.bg{position:absolute; left:0; top:91px; width:100%; height:280px; background:#fff; display:none;}
.gnb_btn{float:right; margin-top:35px;  width:25px; height:22px; background:url("버튼 이미지 주소") center top no-repeat; cursor:pointer;}
#header.on .gnb_btn{ width:25px; height:22px; background:url("버튼 on 됐을 때 이미지 주소") center top no-repeat;}


#visual{height:960px; background:#000 url() center top no-repeat;}