87,996
社区成员
发帖
与我相关
我的任务
分享单击弹出下拉菜单问题.
谁能把这样的代码告诉我.谢谢.
http://www.sbo2.com/en/product_detail.asp?id=124&bid=164&sid=18
这个网站左边的效果.
http://www.sbo2.com/en/product_detail.asp?id=124&bid=164&sid=18
这个网站左边的效果.
...全文
请发表友善的回复…
发表回复
chenhaoyou 2008-12-17
- 打赏
- 举报
可折叠展开的导航菜单
chenhaoyou 2008-12-17
- 打赏
- 举报
要这种效果的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charsetgb2312" />
<title>导航栏 - 分享JavaScript-sharejs.com</title>
<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>
<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>
<div align="left">
<table border="0" width="285" 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("a6")>+61-70</div><div onmouseover=high() onmouseout=low() id=a6 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>
<a href="/web/ppt"target="_blank">
<div id="Layer1" style=" left:20px; top:247px; width:312px; height:211px; border:1px solid #000000; z-index:1;">22</div>
</a>
</div>
<br><br>
<div align="center">
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
</div>
</body>
</html>
aressaint 2008-12-17
- 打赏
- 举报
现写了一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>点击菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//菜单总数
menunum = 3;
//菜单开关
function switchMenu(n){
for (var i=1; i<=menunum; i++)
{
if (i==n){
$("menucon"+i).style.display="";
}else{
$("menucon"+i).style.display="none";
}
}
}
//获取对象
function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
//-->
</SCRIPT>
<style>
body {
font-size:12px;
line-height:30px;
}
.menubox {
width:200px;
background-color:#EAEAEA;
cursor:normal;
}
.menutitle {
width:200px;
height:30px;
background-color:#999999;
color:#FFFFFF;
cursor:pointer;
text-align:center;
border-top:#FFFFFF 1px solid;
}
.menucontent {
width:200px;
height:120px;
background-color:#CCCCCC;
cursor:normal;
padding:10px;
}
</style>
<BODY>
<div class="menubox">
<div class="menutitle" id="menu1" onclick="switchMenu(1)">菜单标题</div>
<div class="menucontent" id="menucon1" style="display:block;">菜单内容</div>
<div class="menutitle" id="menu2" onclick="switchMenu(2)">菜单标题</div>
<div class="menucontent" id="menucon2" style="display:none;">菜单内容</div>
<div class="menutitle" id="menu3" onclick="switchMenu(3)">菜单标题</div>
<div class="menucontent" id="menucon3" style="display:none;">菜单内容</div>
</div>
</BODY>
</HTML>
chenhaoyou 2008-12-17
- 打赏
- 举报
请教了…
aressaint 2008-12-17
- 打赏
- 举报
切换不同的样式就行了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>点击菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//菜单开关
function switchMenu(n){
if (document.getElementById("menucon"+n).style.display=="none"){
document.getElementById("menu"+n).className="menutitle_on";
document.getElementById("menucon"+n).style.display="";
}else{
document.getElementById("menu"+n).className="menutitle_off";
document.getElementById("menucon"+n).style.display="none";
}
}
//-->
</SCRIPT>
<style>
body {
font-size:12px;
line-height:30px;
}
.menubox {
width:200px;
background-color:#EAEAEA;
cursor:normal;
}
.menutitle_on {
width:200px;
height:30px;
background-color:#999999;
color:#FFFFFF;
cursor:pointer;
text-align:center;
border-top:#FFFFFF 1px solid;
}
.menutitle_off {
width:200px;
height:30px;
background-color:#cccccc;
color:#000000;
cursor:pointer;
text-align:center;
border-top:#FFFFFF 1px solid;
}
.menucontent {
width:200px;
height:120px;
background-color:#EAEAEA;
cursor:normal;
padding:10px;
}
</style>
<BODY>
<div class="menubox">
<div class="menutitle_on" id="menu1" onclick="switchMenu(1)">菜单标题</div>
<div class="menucontent" id="menucon1" style="display:block;">菜单内容</div>
<div class="menutitle_off" id="menu2" onclick="switchMenu(2)">菜单标题</div>
<div class="menucontent" id="menucon2" style="display:none;">菜单内容</div>
<div class="menutitle_off" id="menu3" onclick="switchMenu(3)">菜单标题</div>
<div class="menucontent" id="menucon3" style="display:none;">菜单内容</div>
</div>
</BODY>
</HTML>
chenhaoyou 2008-12-17
- 打赏
- 举报
谢谢，可以了，那如何让一级菜单展开的时候背景替换？
aressaint 2008-12-17
- 打赏
- 举报
那么更简单了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>点击菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//菜单开关
function switchMenu(n){
if (document.getElementById("menucon"+n).style.display=="none"){
document.getElementById("menucon"+n).style.display="";
}else{
document.getElementById("menucon"+n).style.display="none";
}
}
//-->
</SCRIPT>
<style>
body {
font-size:12px;
line-height:30px;
}
.menubox {
width:200px;
background-color:#EAEAEA;
cursor:normal;
}
.menutitle {
width:200px;
height:30px;
background-color:#999999;
color:#FFFFFF;
cursor:pointer;
text-align:center;
border-top:#FFFFFF 1px solid;
}
.menucontent {
width:200px;
height:120px;
background-color:#CCCCCC;
cursor:normal;
padding:10px;
}
</style>
<BODY>
<div class="menubox">
<div class="menutitle" id="menu1" onclick="switchMenu(1)">菜单标题</div>
<div class="menucontent" id="menucon1" style="display:block;">菜单内容</div>
<div class="menutitle" id="menu2" onclick="switchMenu(2)">菜单标题</div>
<div class="menucontent" id="menucon2" style="display:none;">菜单内容</div>
<div class="menutitle" id="menu3" onclick="switchMenu(3)">菜单标题</div>
<div class="menucontent" id="menucon3" style="display:none;">菜单内容</div>
</div>
</BODY>
</HTML>
chenhaoyou 2008-12-17
- 打赏
- 举报
谁能帮我看下上面那段代码为什么在FF浏览器里不能正常的显示折叠效果 完全没有反映
