드롭 다운 제이 쿼리 - deulob daun jei kwoli

html 메뉴, jQuety, 드롭다운, 드롭다운 메뉴, 드롭다운메뉴, 제이쿼리, 제이쿼리 기초, 제이쿼리 드롭다운, 제이쿼리 드롭다운 메뉴, 제이쿼리 드롭다운메뉴, 제이쿼리 메뉴, 코딩 메뉴

안녕하세요

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

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

우선 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()는 써도되고 안써도 됩니다.

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

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

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