css实现会折叠、展开的菜单导航栏效果

ttx9n · 发表于 2012-12-26 09:30:52

基于css实现的会折叠、展开的树形菜单导航栏，很早以前写的，也没有过多美化，但是比较实用，如果想用的朋友就自己美化吧

<html> 
<script> 
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> 
<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"> 
 
<table border="0" width="48" cellspacing="0" cellpadding="0"> 
<tr> 
<td>+01-10 
<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> 
</td> 
</tr> 
<tr> 
<td>+11-20 
<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> 
</td> 
</tr> 
<tr> 
<td>+21-30 
<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> 
</td> 
</tr> 
<tr> 
<td>+31-40 
<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> 
</td> 
</tr> 
<tr> 
<td>+41-50 
<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> 
</td> 
</tr> 
<tr> 
<td>+51-60 
<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> 
</td> 
</tr> 
<tr> 
<td>+61-70 
<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> 
</td> 
</tr> 
<tr> 
<td>+71-80 
<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> 
</td> 
</tr> 
</table> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

u7yxn9 · 发表于 2022-10-7 10:13:25

66666666666

3t0ukmu · 发表于 2022-12-4 18:11:03

儿童服务绯闻绯闻绯闻

w18pvaep · 发表于 2022-12-13 19:59:43

好东西可以可以可以可以

醉梦娱乐网 · 发表于 2022-12-30 11:49:23

建军节建军节建军节建军节

i1efp6c · 发表于 2023-2-2 13:30:01

很不错的源码论坛

81708585 · 发表于 2023-9-14 03:27:04

vcxvcxv

白狐软件 · 发表于 2023-9-16 10:05:36

谢谢下载来看看

wqpa63gz · 发表于 2023-9-19 17:46:31

的沙发水电费水电费

0y3yp · 发表于 2023-10-11 17:27:13

管灌灌灌灌灌灌灌灌灌灌

账号		自动登录	找回密码
密码			立即注册

[JavaScript] css实现会折叠、展开的菜单导航栏效果

相关帖子