[Jquery] slide menu, 슬라이드 메뉴

개발 노트/JQuery  2012.09.19 11:18



 

안녕하세요 개발자 명월입니다.

 

이번 포스팅에서 소개할 소스는 Jquery를 이용한 슬라이드 메뉴입니다. 제가 사용하는 메뉴 중에 가장 깔끔하고 사용하기 편한 메뉴인듯 합니다.

 

   

 

아래는 소스 설명입니다.

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
  5 <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
  6 <style text="text/css">
  7 li a {display:inline-block;}
  8 li a {display:block;}
  9 body {
10 font-family: cursive;
11 font-size: 0.66em; 
12 }
13 p {line-height: 1.5em;}
14 ul#menu, ul#menu ul {
15 list-style-type:none;
16 margin: 0;
17 padding: 0;
18 width: 14.4em;
19 }
20 ul#menu a {
21 display: block;
22 text-decoration: none;
23 }
24 ul#menu li {
25 margin-top: 1px;
26 }
27 ul#menu li a {
28 background: blue;
29 color: #fff;
30 padding: 0.5em;
31 }
32 ul#menu li a:hover {
33 background: green;
34 }
35 ul#menu li ul li a {
36 background: red;
37 color: #000;
38 padding-left: 20px;
39 }
40 ul#menu li ul li a:hover {
41 background: yellow;
42 border-left: 5px #ffffff solid;
43 padding-left: 15px;
44 }
45 </style>
46 <script>
47 $(document).ready(function(){
48 $('#menu ul').hide();
49 $('#menu li a').click(function(){
50 var checkElement = $(this).next();
51 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
52 $('#menu ul:visible').slideUp(300);
53 return false;
54 }
55 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 56 $('#menu ul:visible').slideUp(300);
57 checkElement.slideDown(300);
58 return false;
59 }
60 });
61 });
62 </script>
63 </head>
64 <body leftmargin="0" topmargin="0" bgcolor=#5E5E5E>
65 <div style="width:160px;" id="div1">
66 <tr>
67 <td height="800" valign="top">
68 <ul id="menu" width="160px">
69 <li>
70 <a href="#">Menu1</a>
71 <ul>
72 <li><a href="#">submenu1</a></li>
73 <li><a href="#">submenu2</a></li>
74 </ul>
75 </li>
76 <li>
77 <a href="#">Menu2</a>
78 <ul>
79 <li><a href="#">submenu3</a></li>
80 <li><a href="#">submenu4</a></li>
81 </ul>
82 </li>
83 </ul>
84 </td>
85 </tr>
86 </div>
87 </body>
88 </html>
89
90


메뉴 색은 여기서 설정할 수 있습니다.

 

 

메뉴 추가는 여기에서 할 수 있습니다.

 

 

여기서 보면 li 태그 안에 또 ul 태그와 li태그가 있습니다. 이 순서를 응용하여 코딩하시면 되겠습니다.

※ 메뉴는 되도록이면 서버 스크립트랑 조합하여 하드 코딩이 되지 않도록 해야 하겠습니다.

 

소스 예제 첨부합니다.

 

slide_menu.html

 


댓글 8개가 달렸습니다.
댓글쓰기
  1. 테스터
    2013.01.24 14:07 신고 |  수정/삭제  댓글쓰기

    소스 첨부한거는 되는대..
    위에 긁어서 해본결과 않됩니다.

  2. 질문자
    2013.02.13 14:18 신고 |  수정/삭제  댓글쓰기

    질문이요 5번째 줄에 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js으로 된 부분은 인터넷으로 직접받는 부분이라 jquery홈페이지에서 파일을 받아서 경로를 그 파일로 해봤는데 상위 ul은 나오는데 하위 ul부분이 하얗게 나오네요 왜 그런건가요?;
    경로가 틀리면 상위하위 전부 다 나오더라구요 답좀ㅠ

    • 明月 v명월v
      2013.02.13 23:30 신고 |  수정/삭제

      안녕하세요 먼저 방문 감사드립니다.
      경로가 틀리면 상위하위 안나오는 것은 Jquery 가 작동을 안하니 그런 현상이 나오는 것이구요..

      파일로 다운 받아서 안되는 경우는
      첫째 버전 차이일 수도 있구요.
      옮겨 담으면서 오타가 끼어있을 수 있습니다..

      제가 직접 확인 해 본 사항이 아니라 정확한 답변히 힘드네요...

      메일로 스샷을 찍어 보내 주시면 확인 해 드리겠습니다.

  3. ORally
    2013.04.11 17:34 신고 |  수정/삭제  댓글쓰기

    유용한 정보 감사합니다

  4. 푸른섬
    2013.07.28 01:54 신고 |  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.
    혹시 페이지 이동시 해당 메뉴가 활성화 될수도 있을까요?
    하위메뉴까지 열리게끔이요

  5. 규정
    2013.12.12 18:23 신고 |  수정/삭제  댓글쓰기

    완전 감사합니다~ 메뉴를 늘렸는데도 잘 되네요.. 감사합니다.
    하나더...ㅎㅎ.. 윗분 질물하신 로딩시 설정이 뭔지 저도 좀 알려주세요....

  6. 쑤쑤~
    2014.02.15 14:40 신고 |  수정/삭제  댓글쓰기

    푸른섬님 질문에 명월님이 페이지 이동시에 해당 메뉴가 활성화 시키려면 처음 페이지 로딩시에 설정하면 가능하다고 하시는데 어떤식으로 설정을 해줘야 하는건가요?