jQuery实现左侧导航菜单滑动效果。。。

美工给了我一个页面，现在需要将左边的导航菜单做成滑动的效果，小弟不才，使用jQuery未能实现菜单的滑动效果，现将部分HTML代码贴于此，请高手能指导下，看如何实现此菜单的滑动效果：<div class="theLeftInHover">
          <div class="theLeftTable"><image class="" />
            <p  id="h1"class="theWordIn"><a name="main">AA</a></p>
          </div>
          <div class="theLeftLine"><img src="images/line.png" /></div>
          <div class="theLeftInTwo">
            <div class="theLeftSecondTableNotIn">
              <p><span id="aa" class="fontWhite"><img class="fontWhiteimage" src="images/row.gif" /><a ID="SUB1" href="#" style="text-decoration:none; color:#FFFFFF;">aa</a></span></p>
            </div>
            <div class="theLeftSecondTableNotIn">
              <p><span id="aa" class="fontWhite"><img class="fontWhiteimage" src="images/row.gif" /><a ID="SUB2"  href="#" style="text-decoration:none; color:#FFFFFF;">aaaaaaaaa</a></span></p>
            </div>
          </div>
          <div class="theLeftLine"><img src="images/line.png" /></div>
        </div>
        
        
        
         <div class="theLeftIn">
          <div class="theLeftTable"><image class="" />
            <p id="h1" class="theWordIn"><a name="test" href="#">BB</a></p>
          
    </div>
          
          <div class="theLeftInTwo">
            <div class="theLeftSecondTableNotIn">
              <p><span id="aa" class="fontWhite"><img class="fontWhiteimage" src="images/row.gif" /><a name="sub" href="#" style="text-decoration:none; color:#FFFFFF;">bb</a></span></p>
            </div>
            <div class="theLeftSecondTableNotIn">
              <p><span id="aa" class="fontWhite"><img class="fontWhiteimage" src="images/row.gif" /><a name="sub" href="#" style="text-decoration:none; color:#FFFFFF;">bbbbbbbb</a></span></p>
            </div>
          </div>
          <div class="theLeftLine"><img src="images/line.png" /></div>
        </div>
        
        
            <div class="theLeftIn">
          <div class="theLeftTable"><image class="" />
            <p  id="h1" class="theWordIn"><a  name="test" href="#">CC</a></p>
          </div>
          <div class="theLeftLine"><img src="images/line.png" /></div>
          <div class="theLeftInTwo">
            <div class="theLeftSecondTableNotIn">
              <p><span class="fontWhite"><img class="fontWhiteimage" src="images/row.gif" /><a name="sub" href="#" style="text-decoration:none; color:#FFFFFF;">cc</a></span></p>
            </div>
            <div class="theLeftSecondTableNotIn">
              <p><span class="fontWhite"><img class="fontWhiteimage" src="images/row.gif" /><a name="sub" href="#" style="text-decoration:none; color:#FFFFFF;">ccccccccc</a></span></p>
            </div>
          </div>
          <div class="theLeftLine"><img src="images/line.png" /></div>
        </div> 

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>jqSalid.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function () {
    $("p.theWordIn").toggle(function () {
    $(this).parents("div").find("div.theLeftInTwo").slideToggle("normal");
    }, function () {
    $(this).parents("div").find("div.theLeftInTwo").slideToggle("normal");
    });

    });
    </script>
    </head> <body>
    <div class="theLeftInHover">
    <div class="theLeftTable">
    <image class="" />
    <p id="h1" class="theWordIn">
    <a name="main">AA</a>
    </p>
    </div>
    <div class="theLeftLine">
    <img src="images/line.png" />
    </div>
    <div class="theLeftInTwo">
    <div class="theLeftSecondTableNotIn">
    <p>
    <span id="aa" class="fontWhite"><img class="fontWhiteimage"
    src="images/row.gif" /><a ID="SUB1" href="#"
    style="text-decoration: none; color: #FFFFFF;">aa</a>
    </span>
    </p>
    </div>
    <div class="theLeftSecondTableNotIn">
    <p>
    <span id="aa" class="fontWhite"><img class="fontWhiteimage"
    src="images/row.gif" /><a ID="SUB2" href="#"
    style="text-decoration: none; color: #FFFFFF;">aaaaaaaaa</a>
    </span>
    </p>
    </div>
    </div>
    <div class="theLeftLine">
    <img src="images/line.png" />
    </div>
    </div> <div class="theLeftIn">
    <div class="theLeftTable">
    <image class="" />
    <p id="h1" class="theWordIn">
    <a name="test" href="#">BB</a>
    </p>
    </div>
    <div class="theLeftInTwo">
    <div class="theLeftSecondTableNotIn">
    <p>
    <span id="aa" class="fontWhite"><img class="fontWhiteimage"
    src="images/row.gif" /><a name="sub" href="#"
    style="text-decoration: none; color: #FFFFFF;">bb</a>
    </span>
    </p>
    </div>
    <div class="theLeftSecondTableNotIn">
    <p>
    <span id="aa" class="fontWhite"><img class="fontWhiteimage"
    src="images/row.gif" /><a name="sub" href="#"
    style="text-decoration: none; color: #FFFFFF;">bbbbbbbb</a>
    </span>
    </p>
    </div>
    </div>
    <div class="theLeftLine">
    <img src="images/line.png" />
    </div>
    </div>
    <div class="theLeftIn">
    <div class="theLeftTable">
    <image class="" />
    <p id="h1" class="theWordIn">
    <a name="test" href="#">CC</a>
    </p>
    </div>
    <div class="theLeftLine">
    <img src="images/line.png" />
    </div>
    <div class="theLeftInTwo">
    <div class="theLeftSecondTableNotIn">
    <p>
    <span class="fontWhite"><img class="fontWhiteimage"
    src="images/row.gif" /><a name="sub" href="#"
    style="text-decoration: none; color: #FFFFFF;">cc</a>
    </span>
    </p>
    </div>
    <div class="theLeftSecondTableNotIn">
    <p>
    <span class="fontWhite"><img class="fontWhiteimage"
    src="images/row.gif" /><a name="sub" href="#"
    style="text-decoration: none; color: #FFFFFF;">ccccccccc</a>
    </span>
    </p>
    </div>
    </div>
    <div class="theLeftLine">
    <img src="images/line.png" />
    </div>
    </div>
    </body>
    </html>
    够用，有滑入滑出