Toggle navigation
首页
热门资讯
资源下载
技术博客
会员
中心
会员中心
发布博文
发布资源
首页
文章中心
JavaScript
css实现会折叠、展开的菜单导航栏效果
304 阅读
0 评论
201 点赞
我是
靠谱客
的博主
长情冷风
,这篇文章主要介绍
css实现会折叠、展开的菜单导航栏效果
,现在分享给大家,希望可以做个参考。
<html> <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需刷新才能执行]
最后
以上就是
长情冷风
最近收集整理的关于
css实现会折叠、展开的菜单导航栏效果
的全部内容,更多相关
css实现会折叠、展开
内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(
201
)
本文分类:
JavaScript
浏览次数:
304
次浏览
发布日期:2022-04-03 14:22:01
本文链接:
https://www.kaopuke.com/article/k-p-k_14_u_7_ocfz_13__23__10__27_.html
相关文章
MAC OS怎样恢复出厂设置 里面什么都有一个个删太慢
如何写好原创文章 分享原创文章的写作方法与技巧
Python中基础的socket编程实战攻略
复印机怎么复印身份证? 身份证正确的复印方法
css实现会折叠、展开的菜单导航栏效果
ACProtect Professional 1.3C 主程序脱壳(3)(图)
js 程序执行与顺序实现详解
python如何重载模块实例解析
评论列表
共有
0
条评论
发表评论
取消回复
登录
注册新账号
立即
投稿
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
返回
顶部
发表评论 取消回复