안녕하세요

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


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




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

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

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


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






 



'코딩 > jQuery' 카테고리의 다른 글

jQuery로 이미지 슬라이드 만들기  (1) 2018.08.06

jQuery로 이미지 자동 슬라이드 만들기!


우선 이미지들을 올려줍시다.


 <div id="slide" val="1" mx="3">

<li id="img1"><img src="img/1.jpg" alt=""/></li>

<li id="img2"><img src="img/2.jpg" alt=""/></li>

<li id="img3"><img src="img/3.jpg" alt=""/></li>

</div>


id는 마음대로 설정하셔도 상관없습니다.


다음은 css값을 수정해줍시다.


    #slide{

      position:relative;

      width: 500px;

    }

    #slide li{

      position:absolute;

      top:0;

      left:0;

      display:none;

      -webkit-display:block;

    }

    #slide img{

      width:500px;

      height: 300px;

    } 


#slide li에 -webkit-display:block;를 따로 준 이유는 크롬에는 li를썼을때 이미지에서도 옆에 쩜이 찍혀버려서....굳이 필요없는태그 한줄 넣어봤습니다.

li대신 div태그를 쓰면 안써도 상관없습니다.


그리고 슬라이드 이미지에 크기값을 조정해줬습니다.




그리고 이제 스크립트를 선언해줍시다.



<script type="text/javascript"> 

imgslide(); //페이지가 로딩될때 함수를 실행합니다

function imgslide(){

  $val = $("#slide").attr("val"); //현재 이미지 번호를 가져옵니다

  $mx = $("#slide").attr("mx"); //총 이미지 개수를 가져옵니다

$("#img"+$val).hide(); //현재 이미지를 사라지게 합니다.

if( $val == $mx ){ $val = 1; } //현재이미지가 마지막 번호라면 1번으로 되돌립니다.

else{ $val++; } //마지막 번호가 아니라면 카운트를 증가시켜줍니다

$("#img"+$val).fadeIn(500); //변경된 번호의 이미지영역을 나타나게 합니다.괄호 안에 숫자는 페이드인 되는 시간을 나타냅니다.

$("#slide").attr('val',$val); //변경된 이미지영역의 번호를 부여합니다.

setTimeout('imgslide()',1000); //1초 뒤에 다시 함수를 호출합니다.(숫자값 1000당 1초)

}

</script>


주석으로 설명을 달아놨으니 자세한 설명은 생략합니다...ㅋㅋㅋ


이렇게하면 자동으로 이미지가 넘어가는 슬라이드를 만들 수 있습니다.

슬라이드가 아니어도 베너라던가...팝업이라던가...뭐 이런걸로 응용 할 수도 있겠지요

굳이 저 내용 다 외울 필요도 없어요.

그냥 이런 코드들 몇개 갖다놓고 필요한곳에 복붙하시면 됩니다.

다음 포스팅은 언제가 될지 모르겠지만 이 슬라이드에 버튼 기능을 추가해 볼까합니다.


이상으로 jQuery로 이미지 슬라이드 만들기 포스팅을 마칩니다.



'코딩 > jQuery' 카테고리의 다른 글

제이쿼리로 드롭다운메뉴 만들기  (0) 2018.08.10

+ Recent posts

티스토리툴바