纵向可折叠导航菜单实现

2012-03-23 22:54:34 | 【大中小】

点击相应的选项可以打开或者跌菜单项：

+01-10

+11-20

+21-30

+31-40

+41-50

+51-60

+61-70

+71-80

最常见的菜单，可以自由折叠打开，动网，Discuz论坛后台菜单均采用这种形式，比较实用

查看全部代码 View Code

第一步：
在<head>区加入以下代码

<script>
  
        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
      
function show(c_Str)
{if(document.all(c_Str).style.display=='none')
{document.all(c_Str).style.display='block';}
else{document.all(c_Str).style.display='none';}}
function high(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="336699"
event.srcElement.style.color="white"
}
}
function low(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="99CCFF"
event.srcElement.style.color=""
}
}
</script>
  
<style>td { cursor: hand; font-family: Tahoma; background-color: #336699; color: #99CCFF; 
               font-size: 10pt }
li           { color: #FF0000; font-family: Tahoma; background-color: #99CCFF; font-size: 9pt}
.up{ background-color: #3A6EA5; border-left: 1 solid #A6C1DF;border-right: 1 solid #002200; border-top: 1 solid #A6C1DF; border-bottom: 1 solid #002200 }
</style>

第二步：
在<body>区加入以下代码

<div align="left">
  <table border="0" width="48" cellspacing="0" cellpadding="0">
    <tr>
      <td><div class=up onclick=show("a0")>+01-10</div><div onmouseover=high() onmouseout=low()  id=a0 style="display:none">
<li class=k>01</li>
<li class=k>02</li>
<li class=k>03</li>
<li class=k>04</li>
<li class=k>04</li>
<li class=k>05</li>
<li class=k>06</li>
<li class=k>07</li>
<li class=k>08</li>
<li class=k>09</li>
<li class=k>10</li>
      </div></td>
    </tr>
    <tr>
      <td><div class=up onclick=show("a1")>+11-20</div><div onmouseover=high() onmouseout=low()  id=a1 style="display:none">
<li class=k>11</li>
<li class=k>12</li>
<li class=k>13</li>
<li class=k>14</li>
<li class=k>15</li>
<li class=k>16</li>
<li class=k>17</li>
<li class=k>18</li>
<li class=k>19</li>
<li class=k>20</li>
      </div></td>
    </tr>
    <tr>
      <td><div class=up onclick=show("a2")>+21-30</div><div onmouseover=high() onmouseout=low()  id=a2 style="display:none">
<li class=k>21</li>
<li class=k>22</li>
<li class=k>23</li>
<li class=k>24</li>
<li class=k>25</li>
<li class=k>26</li>
<li class=k>27</li>
<li class=k>28</li>
<li class=k>29</li>
<li class=k>30</li>
      </div></td>
    </tr>
            <tr>
      <td><div class=up onclick=show("a3")>+31-40</div><div onmouseover=high() onmouseout=low()  id=a3 style="display:none">
<li class=k>31</li>
<li class=k>32</li>
<li class=k>33</li>
<li class=k>34</li>
<li class=k>35</li>
<li class=k>36</li>
<li class=k>37</li>
<li class=k>38</li>
<li class=k>39</li>
<li class=k>40</li>
      </div></td>
    </tr>
        <tr>
      <td><div class=up onclick=show("a4")>+41-50</div><div onmouseover=high() onmouseout=low()  id=a4 style="display:none">
<li class=k>41</li>
<li class=k>42</li>
<li class=k>43</li>
<li class=k>44</li>
<li class=k>45</li>
<li class=k>46</li>
<li class=k>47</li>
<li class=k>48</li>
<li class=k>49</li>
<li class=k>50</li>
      </div></td>
    </tr>
            <tr>
      <td><div class=up onclick=show("a5")>+51-60</div><div onmouseover=high() onmouseout=low()  id=a5 style="display:none">
<li class=k>51</li>
<li class=k>52</li>
<li class=k>53</li>
<li class=k>54</li>
<li class=k>55</li>
<li class=k>56</li>
<li class=k>57</li>
<li class=k>58</li>
<li class=k>59</li>
<li class=k>60</li>
      </div></td>
    </tr>
        <tr>
      <td><div class=up onclick=show("a7")>+61-70</div><div onmouseover=high() onmouseout=low()   id=a7 style="display:none">
<li class=k>61</li>
<li class=k>62</li>
<li class=k>63</li>
<li class=k>64</li>
<li class=k>65</li>
<li class=k>66</li>
<li class=k>67</li>
<li class=k>68</li>
<li class=k>69</li>
<li class=k>70</li>
      </div></td>
    </tr>
        <tr>
      <td><div class=up onclick=show("a8")>+71-80</div><div onmouseover=high() onmouseout=low()  id=a8 style="display:none">
<li class=k>71</li>
<li class=k>72</li>
<li class=k>73</li>
<li class=k>74</li>
<li class=k>75</li>
<li class=k>76</li>
<li class=k>77</li>
<li class=k>78</li>
<li class=k>79</li>
<li class=k>80</li>
      </div></td>
    </tr>
  </table>
</div>

下载"纵向可折叠导航菜单实现"

推荐给朋友

热门标签：

上一篇：滚动的链接提示
下一篇：打开链接时弹出确认框

纵向可折叠导航菜单实现

下载"纵向可折叠导航菜单实现"

相关资源