제이쿼리로 드롭다운메뉴 만들기

안녕하세요

이번 포스팅은 제이쿼리를 사용해서 드롭다운메뉴가 부드럽게 움직이도록 만들어보려고 합니다.

↑드롭다운메뉴가 뭔지 모르시는분은 이거 보시면 아마 바로 아~하실듯

우선 HTML부터 써봅시다

<header>       <div class="container">         <ul class="nav">                      <li><a href="">메뉴1</a>             <ul class="sub sub1">               <li><a href="#">메뉴1-1</a></li>               <li><a href="#">메뉴1-2</a></li>               <li><a href="#">메뉴1-3</a></li>             </ul>           </li>                      <li><a href="">메뉴2</a>             <ul class="sub sub2">               <li><a href="#">메뉴2-1</a></li>               <li><a href="#">메뉴2-2</a></li>               <li><a href="#">메뉴2-3</a></li>             </ul>           </li>                      <li><a href="">메뉴3</a>             <ul class="sub sub3">               <li><a href="#">메뉴3-1</a></li>               <li><a href="#">메뉴3-2</a></li>               <li><a href="#">메뉴3-3</a></li>             </ul>           </li>                      <li><a href="">메뉴4</a>             <ul class="sub sub4">               <li><a href="#">메뉴4-1</a></li>               <li><a href="#">메뉴4-2</a></li>               <li><a href="#">메뉴4-3</a></li>             </ul>           </li>                    </ul>       </div>     </header>

원래 저렇게 안쓰는데 보기 편하시라고 덩어리별로 쪼개놔봤습니다.

ul과 li를 이해하고 계신분들이라면 그냥 보셔도 알거라 생각하고 설명 패스하겠습니다.

다음은 css

* {margin: 0;padding: 0;} li {list-style: none} a{text-decoration: none} header {   width: 100%;   height: 50px;   background-color: skyblue; } .container {   width: 1200px;   height: 50px;   margin: 0 auto;   position: relative; } .nav {   float: left;   width: 100%;   overflow: hidden; } .nav>li {   float: left;   width: 25%;   box-sizing: border-box; } .nav>li>a {   display: block;   width: 100%;   text-align: center;   line-height: 3.4;   color: #fcfcfc;   font-size: 15px; } .nav>li>a:hover{   background-color: #3DB7CC; } .sub {   width: 300px;   margin: 0 auto;   position: absolute;   top: 50px;   left: 0;   z-index: 1;   display: none; } .sub2 {   left: 300px; } .sub3 {   left: 600px; } .sub4 {   left: 900px; } .sub>li {   width: 300px;   height: 50px;   border-bottom: 1px solid #000;   color: #fff;   background-color: #FFD8D8;   box-sizing: border-box; } .sub>li:last-child {   border: 0; } .sub>li>a:hover {   background-color: #FFA7A7;   color: #fff; } .sub>li>a {   display: block;   width: 100%;   text-align: center;   line-height: 3.4;   font-size: 15px;   font-weight: 500; }

크기는 제 마음대로 메뉴당 넓이 300 높이 50으로 맞췄습니다.

물론 색깔도 제맘대로입니다

그대로 복붙하셔서 크기 바꾸실때에는 

.sub의 top값, .sub2, sub3, sub4의 left값, .nav>li>a과 .sub>li>a의 line-height값만 수정해주시면 됩니다.

선 빼고싶은분들은 border 빼시면되고.....이런건 설명 안해드려도되겠죠???

이제 기본 와꾸는 잡혔습니다.

이제 기다리고 기다리던 제이쿼리 입니다.

$(".nav li").hover(function() {         $(this).children("ul").stop().slideToggle(500)       })

짧으니까 주석 없이 설명으로 쓰겠습니다.

.nav li에 마우스를 올렸을때 실행되는 함수{

이것에 마우스를 올리면 자녀속성인 ul가 튀어나와라(0.5초에걸쳐서)

}

라는 뜻입니다.

중간에 들어간 stop()는 써도되고 안써도 됩니다.

저게 들어가면 올렸다가 마우스를 바로떼면 바로 다시 사라지고,

저게 안들어가면 일단 마우스를 올리면 무조건 메뉴 전체가 나왔다가 다시 사라집니다.

제 설명이 이해가 안되시면 직접 한번 지워서 실행시켜보시면 바로 아실겁니다.