经典实用的触发型导航菜单

转载 2007年09月24日 09:35:00

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

</head>

<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&g

t;</body>

</html> 

Slideout.js – 滑出式 Web App 导航菜单

Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单。它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它。它支持不同的 CSS3 转换和过渡。最重要的是,它只是...
  • qq_16429019
  • qq_16429019
  • 2016年04月30日 16:34
  • 1142

js鼠标移动导航菜单出现下拉菜单

非常实用的导航菜单 $(function(){ $('#mobanwang_com li').hover(function(){ $(this).children('ul').stop(tr...
  • qq_30034681
  • qq_30034681
  • 2016年02月29日 16:46
  • 6019

WordPress主题导航菜单制作的几种方法(一)

WordPress主题导航菜单制作的几种方法(一) 2011-04-14 评分 8.2, 满分 10 分 (45 票) 评分 添加评论( 63 ) 文章目录 ...
  • csnewdn
  • csnewdn
  • 2016年12月29日 19:31
  • 4097

简单实用的垂直导航菜单

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 简单实用的垂直导航菜单 .sv3 dl,.sv3 dt,.sv3 dd{ ...
  • qq_23836283
  • qq_23836283
  • 2016年10月08日 21:06
  • 83

HTML+CSS实战(一)——导航条菜单的制作

一、垂直导航菜单的制作 1、基本的样式清除: *{margin:0;padding:0} 2、无序列表圆点去除: ul{list-style:none} 3、下划线去除: a{text-deco...
  • mqy1023
  • mqy1023
  • 2016年03月14日 22:34
  • 6969

实用js+css滑动门导航菜单

实用js+css滑动门导航菜单
  • boyit0
  • boyit0
  • 2016年06月24日 13:32
  • 268

div+css 纵向导航菜单及二级菜单弹出

1) 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-...
  • janefir
  • janefir
  • 2013年11月26日 11:58
  • 2625

弹性滑动导航菜单:

实例:jQuery弹性滑动导航菜单 body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;...
  • cometwo
  • cometwo
  • 2015年12月22日 13:17
  • 1570

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定。 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段...
  • erlian1992
  • erlian1992
  • 2016年01月08日 16:12
  • 3714

基于 WPF 的酷炫 GUI 窗口的简易实现

本文要实现基于WPF的酷炫GUI窗口,力图实现一个真正可用且实用的GUI窗口。
  • llmmll08
  • llmmll08
  • 2016年11月07日 11:42
  • 1859
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:经典实用的触发型导航菜单
举报原因:
原因补充:

(最多只允许输入30个字)