-
js实现弹出式菜单
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
body{
}{
margin:0;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
#wrap{
}{
font-size:15px;
}
#nav
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
margin:0 0 0 0;
padding: 3px 0;
line-height: normal;
font-size:15px;
width: 100%px;
}
#nav ul
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
padding: 0;
margin:0;
list-style: none;
}
#nav li
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
display: inline;
margin:0;
padding:0;
background-color:White;
}
#nav a
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
float:left;
margin:0;
padding: 0 0 0 2px;
background-color: white;
text-decoration: none;
}
#nav a span
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
display: block;
margin:0;
color: #000000;
padding: 5px 13px 3px 13px;
background-color:Gray;
}
#nav a:hover
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color: #FFFFFF;
}
#nav a:hover span
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color: #00CCFF;
color:#FFFFFF;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
#nav #selected
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color:#00CCFF;
color: #FFFFFF;
}
#subnav
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
margin: 0;
padding:0;
width: 100%;
height: 25px;
}
#sub_nav_3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color:#00CCFF;
color: #FFFFFF;
padding:4px 5px 4px 30px;
}
#sub_nav_3 a
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
color: #FFFFFF;
font-size: 13px;
}
function fetch_object(idname)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
var my_obj = document.getElementById(idname);
return my_obj;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
function wskm_nav(obj)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
for (i = 1; i<= 10; i++ )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var sub_nav = fetch_object("sub_nav_" + i);
if (obj == i)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
sub_nav.style.display = "block";
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
sub_nav.style.display="none";
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!-- 主导行栏开始 -->
<div id="nav">
<ul>
<li><a href="#"><span id="selected" onmouseover="javasrcipt:wskm_nav(1)">首页</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(2)">云南旅游</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(3)">云南酒店</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(4)">云南美食</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(5)">云南风光</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(6)">云南风情</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(7)">云南特产</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(8)">票务中心</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(9)">会议会展</span></a></li>
<li><a href="#"><span onmouseover="javasrcipt:wskm_nav(10)">客户留言</span></a></li>
</ul>
</div>
<!-- 主导行栏结束 -->
<!-- 次导行栏开始 -->
<div id="subnav">
<div id="sub_nav_1" style="display:none;"></div>
<div id="sub_nav_2" style="display:none;"></div>
<div id="sub_nav_3" style="display:none;">
<a href="#">昆明</a> | <a href="#">丽江</a> | <a href="#">版纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a>
</div>
<div id="sub_nav_4" style="display:none;">
<a href="#">昆</a> | <a href="#">丽江</a> | <a href="#">版纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a>
</div>
<div id="sub_nav_5" style="display:none;">
<a href="#">昆明</a> | <a href="#">丽</a> | <a href="#">版纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a>
</div>
<div id="sub_nav_6" style="display:none;">
<a href="#">昆明</a> | <a href="#">丽江</a> | <a href="#">纳</a> | <a href="#">迪庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a>
</div>
<div id="sub_nav_7" style="display:none;">
<a href="#">昆明</a> | <a href="#">丽江</a> | <a href="#">版纳</a> | <a href="#">庆</a> | <a href="#">德宏</a> | <a href="#">曲靖</a> | <a href="#">思茅</a> | <a href="#">玉溪</a> | <a href="#">临沧</a> | <a href="#">保山</a> | <a href="#">红河</a> | <a href="#">大理</a>
</div>
<div id="sub_nav_8" style="display:none;"></div>
<div id="sub_nav_9" style="display:none;"></div>
<div id="sub_nav_10" style="display:none;"></div>
</div>
<!-- 次导行栏结束 -->
-
相关阅读:
Node.js安装及环境配置之Windows篇
盘点.NET JIT在Release下由循环体优化所产生的不确定性Bug
开源!一款功能强大的高性能二进制序列化器Bssom.Net
开源 , KoobooJson一款高性能且轻量的JSON框架
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?
.Net Web开发技术栈
web安全:通俗易懂,以实例讲述破解网站的原理及如何进行防护!如何让网站变得更安全。
.Net高级进阶,教你如何构建企业模型数据拦截层,动态控制字段验证
.Net 如何模拟会话级别的信号量,对http接口调用频率进行限制(有demo)
.Net高级进阶,在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码?
-
原文地址:https://www.cnblogs.com/ddr888/p/593515.html
Copyright © 2020-2023
润新知