资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
css实现会折叠、展开的菜单导航栏效果
<html> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20show(c_Str)%20%0D%0A%7Bif(document.all(c_Str).style.display%3D%3D'none')%20%0D%0A%7Bdocument.all(c_Str).style.display%3D'block'%3B%7D%20%0D%0Aelse%7Bdocument.all(c_Str).style.display%3D'none'%3B%7D%7D%20%0D%0Afunction%20high()%7B%20%0D%0Aif%20(event.srcElement.className%3D%3D%22k%22)%7B%20%0D%0Aevent.srcElement.style.background%3D%22336699%22%20%0D%0Aevent.srcElement.style.color%3D%22white%22%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20low()%7B%20%0D%0Aif%20(event.srcElement.className%3D%3D%22k%22)%7B%20%0D%0Aevent.srcElement.style.background%3D%2299CCFF%22%20%0D%0Aevent.srcElement.style.color%3D%22%22%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>导航栏</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 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> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程