快捷導(dǎo)航

css實現(xiàn)會折疊、展開的菜單導(dǎo)航欄效果

更新時間：2012年12月26日 09:30:52 作者：

基于css實現(xiàn)的會折疊、展開的樹形菜單導(dǎo)航欄，很早以前寫的，也沒有過多美化，但是比較實用，如果想用的朋友就自己美化吧

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: