search

Home  >  Article  >  Web Front-end  >  How to implement simple folding and expanding menu in js

How to implement simple folding and expanding menu in js

PHPz
PHPzforward
2016-05-16 15:41:492555browse

This article mainly introduces the method of implementing simple folding and unfolding menus in js, and involves the related techniques of javascript dynamic operation of page element transformation. It has certain reference value. Friends in need can refer to it. The details are as follows:

What we introduce here is a menu navigation bar that can be folded and expanded. It was written in a very old time. CSS has not been beautified. If you want to use it, you can beautify it yourself.

A screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/ js/2015/js-simple-hidden-show-menu-codes/

The specific code is as follows: 

<html>
<script> 
function show(c_Str)
{if(document.all(c_Str).style.display==&#39;none&#39;)
{document.all(c_Str).style.display=&#39;block&#39;;}
else{document.all(c_Str).style.display=&#39;none&#39;;}}
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">
<p align="left">
 <table border="0" width="48" cellspacing="0" cellpadding="0">
 <tr>
  <td><p class=up onclick=show("a0")>+01-10</p><p 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>
  </p></td>
 </tr>
 <tr>
  <td><p class=up onclick=show("a1")>+11-20</p><p 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>
  </p></td>
 </tr>
 <tr>
  <td><p class=up onclick=show("a2")>+21-30</p><p 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>
  </p></td>
 </tr>
   <tr>
  <td><p class=up onclick=show("a3")>+31-40</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a4")>+41-50</p><p 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>
  </p></td>
 </tr>
   <tr>
  <td><p class=up onclick=show("a5")>+51-60</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a7")>+61-70</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a8")>+71-80</p><p 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>
  </p></td>
 </tr>
 </table>
</p>
</body>
</html>

The above is the entire content of this chapter. For more related tutorials, please Visit JavaScript Video Tutorial!

Statement：
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete
Previous article：Implementation of Div window vibration special effect code based on jQuery - simple code_jqueryNext article：Implementation of Div window vibration special effect code based on jQuery - simple code_jquery

Related articles

See more