jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기



jQuery 를 이용하면 드럽게 복잡해질 자바스크립트가 매우매우매우매우매우 심플해 진다. 간단한 몇 라인의 코딩만으로 쉽게 간지나는 것을 맨들 수 있다.

고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.

대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.

우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )

요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 onclick=""; 어쩌고 하는 지저분한 자바스크립트 하나 안들어간 순결하고 *(-_-)* 깔끔한 마크업이다.
<div>
	<ul>
		<li class="menu">
			<a><img src="" alt="상위메뉴이미지1"/></a>
			<ul class="hide">
				<li>메뉴1-1</li>
				<li>메뉴1-2</li>
				<li>메뉴1-3</li>
				<li>메뉴1-4</li>
				<li>메뉴1-5</li>
				<li>메뉴1-6</li>
			</ul>
		</li>

		<li class="menu">
			<a><img src="" alt="상위메뉴이미지2"/></a>
			<ul class="hide">
				<li>메뉴2-1</li>
				<li>메뉴2-2</li>
				<li>메뉴2-3</li>
				<li>메뉴2-4</li>
				<li>메뉴2-5</li>
				<li>메뉴2-6</li>
			</ul>
		</li>
	</ul>
</div>


스타일은 요정도로만
<style>
	.menu a{cursor:pointer;}
	.menu .hide{display:none;}
</style>


중요한 jQuery 를 이용한 자바스크립 소스 부분이다. 심플스럽기 서울역에 그지없다. 주석을 빼면 3~4줄 정도밖에 안된다. 아주 짧으면서도 의미가 쏙쏙 들어오는!
<script>
	// html dom 이 다 로딩된 후 실행된다.
	$(document).ready(function(){
		// memu 클래스 바로 하위에 있는 a 태그를 클릭했을때
		$(".menu>a").click(function(){
			// 현재 클릭한 태그가 a 이기 때문에
			// a 옆의 태그중 ul 태그에 hide 클래스 태그를 넣던지 빼던지 한다.
			$(this).next("ul").toggleClass("hide");
		});
	});
</script>




그냥 뿟뿟 나타났다 사라지는게 허접스럽게 느껴진다면 여기서 한단계 더 나아가

클릭했을때 보드랍게 슬라이딩 되면서 나타났다 사라지는 것을 맨들어 보자. 마크업과 스타일은 손댈필요 없이 자바스크립만 요래 살짝 바꿔 주면 된다.
<script>
	// html dom 이 다 로딩된 후 실행된다.
	$(document).ready(function(){
		// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
		$(".menu>a").click(function(){
			var submenu = $(this).next("ul");

			// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
			if( submenu.is(":visible") ){
				submenu.slideUp();
			}else{
				submenu.slideDown();
			}
		});
	});
</script>

 바꾼결과( 클릭해 보셈 )



그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.
<script>
	$(document).ready(function(){
		$(".menu>a").click(function(){
			var submenu = $(this).next("ul");

			// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
			if( submenu.is(":visible") ){
				submenu.slideUp();
			}else{
				submenu.slideDown();
			}
		}).mouseover(function(){
			$(this).next("ul").slideDown();
		});
	});
</script>

 바꾼결과( 마우스를 올려 보셈 )




진짜 진짜 마지막으로,

맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 ul 에 지정된 hide 클래스를 지우면 되지만,

자바스크립트적인 방법으로는 요렇게 하면 된다.
<script>
	$(document).ready(function(){
		$(".menu>a").click(function(){
			var submenu = $(this).next("ul");

			// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
			if( submenu.is(":visible") ){
				submenu.slideUp();
			}else{
				submenu.slideDown();
			}
		}).mouseover(function(){
			$(this).next("ul").slideDown();
		});


		// menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.
		$(".menu:eq(1)>a").click();
	});
</script>


Trackback 0 Comment 37
  1. 이전 댓글 더보기
  2. sji 2014.01.10 10:32 address edit & del reply

    대단히 초보도 쉽게할 수 있ㄱ게 해주셨네여~!!!! 확실히 개념잡고 갑니다~~!!!

  3. 쩌뉴 2014.10.14 16:50 address edit & del reply

    맨윗분의 질문이랑 같은건데 이미지 변경은 어떻게 해요??ㅠㅠㅠㅠ

  4. 쩌뉴 2014.10.14 18:58 address edit & del reply

    맨윗분의 질문이랑 같은건데 이미지 변경은 어떻게 해요??ㅠㅠㅠㅠ

    • 스토브 2014.10.15 15:19 신고 address edit & del

      다른분이 질문한걸 지식인으로 대답했었는데

      http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=206996263&page=1#answer1

      요거면 될것 같네요

  5. 찌찌뽕 2014.12.02 12:37 address edit & del reply

    감사합니다 출저 확실히 퍼가겠습니다!

  6. hnm 2016.01.19 15:05 address edit & del reply

    안녕하세요~ 쉽게 되있는 걸로 찾다가 보았는데요 하나 더 추가해야되서 질문 남깁니다.
    메뉴에 마우스 오버하면 화살표가 생기거든요
    근데 메뉴를 클릭하고 해당 페이지가 오른쪽에 보일때도 어느 메뉴인지 알수있게 화살표가 살아있어야 하는데요 이건 어떻게 해야하나요??
    화살표는 백이미지로 넣었습니다.

  7. ㅇㅇㅇ 2016.04.08 13:42 address edit & del reply

    쉽게 써주셔서 잘 배웠습니다!!

  8. 이뿌니 2016.06.16 17:46 address edit & del reply

    초보에게 쉬운 설명 감사드려요~~^^ 도움 많이 받고 갑니다!!

  9. 서울역그지 2016.07.19 15:21 address edit & del reply

    서울역에 그지없다 무슨말인지 한참 생각했네요 ㅋㅋ

  10. minisoo 2016.08.05 11:06 신고 address edit & del reply

    쉽게 설명해주셔서 감사합니다 ^^

  11. 다영 2016.12.22 13:36 address edit & del reply

    응용해서 페이지 여럿페이지를 만들었습니다.
    1.드롭안되는 하나 메뉴
    2.드롭되는메뉴
    3.드롭되는메뉴
    4.드롭안되는 하나 메뉴
    이런식으로 만들었는데
    2번을 들어갔을때 3번이 마우스만 대도 세부메뉴가 나오더라구요
    2번을 들어갔을때 또는 3번을 들어갔을때 해당되는드롭메뉴의 세부메뉴는 보이되 나머지 드롭메뉴를 클릭해야 세부메뉴가 나오게 하는 방법은 없을까요

  12. ㄴㅇ 2017.08.10 17:41 address edit & del reply

    아직 해보진 않았지만 검색하다 여기까지 들어왔네요!
    정말 간단하게 설명되있어서 꼭 해볼꼐요!!

  13. dada 2017.09.15 14:57 address edit & del reply

    완벽합니다 간단한 스크립트!! 최고예요 정말 감사합니다!!!

  14. ㅎㅎㅈ 2017.09.27 10:33 address edit & del reply

    감사합니다. 많은 도움이 됐습니다.

  15. ㅇㅇ 2017.11.05 18:32 address edit & del reply

    한번 펼치면 다시 접기를 누르기 전까지 접히지 않게 하려면어떻게 해야할까요?

  16. 저는ㄱ허뎝입니다 2018.02.01 19:33 address edit & del reply

    좋은코드 감사합니다~~그런데 a로 냅두니까 안먹길래 a hre f="#" 로 바꿨더니 잘 되는거같네요^^;

  17. 우앙굳굳 2018.08.20 22:42 address edit & del reply

    짱입니다 ㅠㅠ

  18. 압도적감사 2019.09.05 10:12 address edit & del reply

    말씀도 너무 재미있게 하시고 쏙쏙 박히네요 감사합니다 ㅎㅎ

  19. pinemint 2020.04.09 23:49 신고 address edit & del reply

    찾고 있던 코드였는데 이 포스팅 덕분에 성공했어요. 감사합니다.

  20. htcho 2020.10.26 00:10 신고 address edit & del reply

    좌우배열시 설정하면 로딩이 있는것처럼 하단배열되있다가 우측으로 배열되면서 열리는데.. 이건어떻게해결하죠?

    누르면

    (A)



    이런식으로 있다가

    (A).



    (A). .
    .

    (A). . .

    이렇게 밀리면서 떠요..

  21. 아이윤맨 2020.12.12 14:21 신고 address edit & del reply

    링크해갑니다~

prev 1 ··· 117 118 119 120 121 122 123 124 125 ··· 223 next