javascript最简单下拉菜单的实现.
网络上免费的JS代码随处可见,下拉菜单的种类就更多了..但是每种实现的过程都不是特别简单,如渐隐渐变等等.超酷下拉菜单,纯CSS下拉菜单等.由于各种浏览器对CSS规则不同.目前纯CSS下拉菜单很难适应对各种浏览器的支持.
在本地邢台网站建设中,往往只需要最简单的即可.毕竟越复杂代码调用难度就越高.下面我来介绍一种最简单方法实现下拉菜单,在火狐及IE6,7,8,TT等浏览器测试无错.
JS代码:
*********************** js下拉菜单.html ***********************
<SCRIPT language=javascript>
function showsubmenu(x)
{
if ( document.all(x).style.display == "none" )
{
document.all(x).style.display = "" ;
}
else
{
document.all(x).style.display = "none" ;
}
}
</SCRIPT>
调用办法:
<a href="#" onClick="showsubmenu('id_1')">点我出现下拉菜单</a></li>
下拉菜单本身:
<div id="id_1" class="s_1" style="display:none;">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</div>
*********************** js下拉菜单_结束 ***********************
1,如需出现多个下拉菜单只需定义多个<div id="x">的值,x应对应showsubmenu('x')的参数.
2,下拉菜单的样式应在<div id="id_1" class="s_1" style="display:none;">中定义.
3,应使用绝对定位(position:absolute;)定义下拉菜单出现的位置.
4,html的头部位普通的<html>开始.否则在火狐浏览器下无法使用.
PS:参考资料.
position:absolute与最近一层的定位关联.图示:
CSS:
<style type="text/css">
<!--
.s_0 {
height: 400px;
width: 400px;
background-color: #FFCC00;
font-family: "黑体";
font-size: 14px;
font-weight: bold;
color: #996600;
position: relative;
padding: 50px;
}
.s_1 {
background-color: #66FF99;
height: 300px;
width: 300px;
}
.s_2{
background-color: #FF0000;
height: 100px;
width: 300px;
position: absolute;
left: 40px;
top: 80px;
}
-->
</style>
网络上免费的JS代码随处可见,下拉菜单的种类就更多了..但是每种实现的过程都不是特别简单,如渐隐渐变等等.超酷下拉菜单,纯CSS下拉菜单等.由于各种浏览器对CSS规则不同.目前纯CSS下拉菜单很难适应对各种浏览器的支持.
在本地邢台网站建设中,往往只需要最简单的即可.毕竟越复杂代码调用难度就越高.下面我来介绍一种最简单方法实现下拉菜单,在火狐及IE6,7,8,TT等浏览器测试无错.
JS代码:
*********************** js下拉菜单.html ***********************
<SCRIPT language=javascript>
function showsubmenu(x)
{
if ( document.all(x).style.display == "none" )
{
document.all(x).style.display = "" ;
}
else
{
document.all(x).style.display = "none" ;
}
}
</SCRIPT>
调用办法:
<a href="#" onClick="showsubmenu('id_1')">点我出现下拉菜单</a></li>
下拉菜单本身:
<div id="id_1" class="s_1" style="display:none;">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</div>
*********************** js下拉菜单_结束 ***********************
1,如需出现多个下拉菜单只需定义多个<div id="x">的值,x应对应showsubmenu('x')的参数.
2,下拉菜单的样式应在<div id="id_1" class="s_1" style="display:none;">中定义.
3,应使用绝对定位(position:absolute;)定义下拉菜单出现的位置.
4,html的头部位普通的<html>开始.否则在火狐浏览器下无法使用.
PS:参考资料.
position:absolute与最近一层的定位关联.图示:
CSS:
<style type="text/css">
<!--
.s_0 {
height: 400px;
width: 400px;
background-color: #FFCC00;
font-family: "黑体";
font-size: 14px;
font-weight: bold;
color: #996600;
position: relative;
padding: 50px;
}
.s_1 {
background-color: #66FF99;
height: 300px;
width: 300px;
}
.s_2{
background-color: #FF0000;
height: 100px;
width: 300px;
position: absolute;
left: 40px;
top: 80px;
}
-->
</style>
搜索引擎优化
