[Jquery] 슬라이드 메뉴

Development note/Javascript, JQuery, CSS  2012. 9. 19. 11:18

안녕하세요. 명월입니다.

 

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

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
  <style text="text/css">
    li a {
      display:inline-block;
    }
    li a {
      display:block;
    }
    body {
      font-family: cursive;
      font-size: 0.66em;  
    }
    p {
      line-height: 1.5em;
    }
    ul#menu, ul#menu ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      width: 14.4em;
    }
    ul#menu a {
      display: block;
      text-decoration: none;
    }
    ul#menu li {
      margin-top: 1px;
    }
    ul#menu li a {
      background: blue;
      color: #fff; 
      padding: 0.5em;
    }
    ul#menu li a:hover {
      background: green;
    }
    ul#menu li ul li a {
      background: red;
      color: #000;
      padding-left: 20px;
    }
    ul#menu li ul li a:hover {
      background: yellow;
      border-left: 5px #ffffff solid;
      padding-left: 15px;
    }
    </style>
    <script>
      $(document).ready(function(){
        $('#menu ul').hide();
        $('#menu li a').click(function(){
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp(300);
            return false;
          }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp(300);
            checkElement.slideDown(300);
            return false;
          }
        });
      });
    </script>
  </head>
  <body leftmargin="0" topmargin="0" bgcolor=#5E5E5E>
    <div style="width:160px;" id="div1">
      <tr>
        <td height="800" valign="top">
          <ul id="menu" width="160px">
            <li>
              <a href="#">Menu1</a>
              <ul>
                <li>
                  <a href="#">submenu1</a>
                </li>
                <li>
                  <a href="#">submenu2</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Menu2</a>
              <ul>
                <li>
                  <a href="#">submenu3</a>
                </li>
                <li>
                  <a href="#">submenu4</a>
                </li>
              </ul>
            </li>
          </ul>
        </td>
      </tr>
    </div>
  </body>
</html>

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

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

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

소스 예제 첨부합니다.

slide_menu.html

'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글

[Javascript] 소스 보기 라이브러리 - Syntaxhighlighter  (0) 2013.03.12
[Jquery] 스크롤링 효과 예제  (0) 2012.10.06
[Jquery] 롤링 라이브러리 - jcarousellite  (0) 2012.09.24
[Jquery] Html에서 나타내는 Treeview  (0) 2012.09.22
[Jquery] Ajax xml 파싱  (0) 2012.09.13
[Jquery] append(), appendto()  (0) 2012.09.09
[Jquery] 소스보기, 새로고침, 드래기 막기 소스  (0) 2012.09.08
[Jquery] Ajax 관련 이벤트  (0) 2012.09.07