聚合新闻服务
手机wap浏览
您现在的位置: 动易模板 >> 动易中心 >> 动易美化 >> 正文
注册登陆
建站服务
视动工坊
服务项目
建站流程
建站价目
成功作品
联系信息
联系信息
视动工坊:动易认证设计师
动易模板大赛连续两次获奖
现共完成动易模板100余个
热诚欢迎定制改制动易模板
Q Q: 363881827
手机: 13153001848
Tel: 0531-83711777
Mail: wsdjqwj2003@163.com
   
[图文]经典实用的触发型导航菜单
作者:happyhyj 文章来源:本站原创 点击数: 更新时间:2006-10-13 15:34:05
类似动易模板海之恋首页,但动易的太复杂,修改不方便,所以自己找了个,相信很多站长都会用到,这个特点就是容易修改,js和css相对独立,修改css不用修改js代码
演示:
把如下代码复制到<body></body>之间
 
<STYLE type=text/css>.sec1 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP:
 
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px
 
solid; CURSOR: hand; COLOR: #000000; BORDER-
 
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:
 
#eeeeee
}
.sec2 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP:
 
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
 
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:
 
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
 BORDER-RIGHT: gray 1px solid; BORDER-
 
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
 
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
 
 

<!--javascript部分-->
            <SCRIPT language=javascript>
     function secBoard(n)
  {
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells
 
[i].className="sec1";
    secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies
 
[i].style.display="none";
    mainTable.tBodies
 
[n].style.display="block";
  }
      </SCRIPT>
 

<!--HTML部分-->
            <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
              <TBODY>
              <TR align=middle height=20>
                <TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>
                <TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>
                <TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>
                <TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
            <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>指定行做为表体。
 
<BR>注释:TBODY要素是块要素,并且需要结束标
 
签。<BR>   即使如果表格没有显式定义TBODY
 
要素,该要素也提供给所有表。<BR><BR>
 
参考:《动态HTML参考和开发应用大全》(人民邮电出
 
版社
                        Microsoft Corporation著
                    北京华中兴业科技发展有限公司
 
译)
 
<BR><BR></TD></TR></TB
 
ODY></TABLE></TD></TR></T
 
BODY><!--关于cells集合-->
              <TBODY style="DISPLAY:
 
none">
              <TR>
                <TD vAlign=top
 
align=middle><BR><BR>
                  <TABLE cellSpacing=0
 
cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表行或者整个
 
表中所有单元格的集合。<BR>应用于TR、TABLE。
 
<BR><BR>参考:《动态HTML参考和开发应
 
用大全》(人民邮电出版社
                        Microsoft Corporation著
                    北京华中兴业科技发展有限公司
 
译)
 
<BR><BR></TD></TR></TB
 
ODY></TABLE></TD></TR></T
 
BODY><!--关于tBodies集合-->
              <TBODY style="DISPLAY:
 
none">
              <TR>
                <TD vAlign=top
 
align=middle><BR><BR>
                  <TABLE cellSpacing=0
 
cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表中所有TBODY
 
对象的集合。对象在该集合中按照HTML源顺序排列。
 
<BR>应用于TABLE。<BR><BR>参考:
 
《动态HTML参考和开发应用大全》(人民邮电出版社
                        Microsoft Corporation著
                    北京华中兴业科技发展有限公司
 
译)
 
<BR><BR></TD></TR></TB
 
ODY></TABLE></TD></TR></T
 
BODY><!--关于display属性-->
              <TBODY style="DISPLAY:
 
none">
              <TR>
                <TD vAlign=top
 
align=middle><BR><BR>
                  <TABLE cellSpacing=0
 
cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>设置或者检索对象
 
是否被提供。<BR>可能的值为block、none、
 
inline、list-item、table-header-group、table-
 
footer-group。<BR>该特性可读写,块要素默认
 
值为block,内联要素默认值为inline;层叠样式表
 
(CSS)属性不可继承。<BR><BR>参考:《
 
动态HTML参考和开发应用大全》(人民邮电出版社
                        Microsoft Corporation著
 
北京华中兴业科技发展有限公司译)
 
<BR><BR><A href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true"                        target=_blank>点击此处
</A>可参阅微软<A href="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。
             
 
</TD></TR></TBODY></TABLE>
 
</TD></TR></TBODY></TABLE>

动易中心录入:alang    责任编辑:alang 
评论主题:经典实用的触发型导航菜单(评论内容只代表网友观点)
版权所有:copyright 2005-2008 动易模板NO.1 核心:PowerEasy SiteWeaver™ 6.6 备案:鲁ICP备05007599号
电话:0531-83711777(晚间)手机:13153001848 QQ:363881827 群号:一群13022466(满)二群36354619