触发型导航菜单的实现方法

最新推荐文章于 2024-04-18 21:22:31 发布
最新推荐文章于 2024-04-18 21:22:31 发布
阅读量146 收藏
点赞数
文章标签： 嵌入式 javascript ViewUI

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>菜单样式</title>
<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>

<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>
</head>
<body>
<h1>触发型导航菜单</h1><hr>
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=center height=20>
<TD class=sec2 οnmοuseοver=secBoard(0) width="10%">关于TBODY标记</TD>
<TD class=sec1 οnmοuseοver=secBoard(1) width="10%">关于cells集合</TD>
<TD class=sec1 οnmοuseοver=secBoard(2) width="10%">关于tBodies集合</TD>
<TD class=sec1 οnmοuseοver=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=center><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>指定行做为表体。<BR><BR>注释：TBODY要素是块要素，并且需要结束标签。<BR><BR>即使如果表格没有显式定义TBODY要素，该要素也提供给所有表。<BR>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
<!--关于cells集合-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=center><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表行或者整个表中所有单元格的集合。<BR><BR>应用于TR、TABLE。
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
<!--关于tBodies集合-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=center><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表中所有TBODY对象的集合。<BR><BR>对象在该集合中按照HTML源顺序排列。<BR><BR>应用于TABLE。
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
<!--关于display属性-->
<TBODY style="DISPLAY:none">
<TR>
<TD vAlign=top align=center><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>设置或者检索对象是否被提供。<BR><BR>可能的值为block、none、inline、list-item、table-header-group、table-footer-group。<BR><BR>该特性可读写，块要素默认值为block，内联要素默认值为inline；层叠样式表

（CSS）属性不可继承。
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>

 

weixin_34290352
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经典实用的触发型导航菜单
wukong1025
09-24 607
网页特效代码|JsCode.CN|---经典实用的触发型导航菜单.sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff
js触发右侧菜单
qq_32898041的博客
02-26 418
&lt;div class="col-sm-12" style="padding: 0;height:100%;"&gt; &lt;div class="indexBg" style=""&gt; &lt;div class="infoCenter"&gt; &lt;div class="inf
一个产品级MCU_LCD菜单框架设计，重磅来袭
最新发布
2401_84253894的博客
04-18 921
第2个1级菜单有3个子菜单，子菜单是2级菜单，其中第1个子菜单下面又有2个孙菜单（3级菜单）。2 实现了单列菜单，通过上下翻查看菜单，确认键进入菜单。test_oled,//菜单函数，功能菜单才会执行，有子菜单的不会执行。test_test,//菜单函数，功能菜单才会执行，有子菜单的不会执行。test_test,//菜单函数，功能菜单才会执行，有子菜单的不会执行。test_test,//菜单函数，功能菜单才会执行，有子菜单的不会执行。test_cal,//菜单函数，功能菜单才会执行，有子菜单的不会执行。
自定义导航栏引用到某一界面时怎么触发自定义导航栏中的事件
zhahuai9053的博客
01-01 252
困扰我很久了这个问题，在谷歌上面搜索然而没有我想要的答案
单片机多级菜单框架（基于STM32F051C8T6 LL库）
qq_29356039的博客
09-17 1577
用链表形式实现多级菜单。
用js实现的比较经典实用的触发型导航菜单
10-31
【用js实现的比较经典实用的触发型导航菜单】是一个常见的网页交互设计，它通过JavaScript技术来增强用户体验，使得用户在触发某个操作（如鼠标悬停、点击等）时，导航菜单能动态显示或隐藏，提供更加直观和便捷的...
jquery模拟flash动画型动感导航菜单
06-05
四、动感导航菜单实现 1. HTML结构：首先，我们需要创建一个包含多个链接的导航菜单。每个链接通常是一个`<li>`元素，它们被组织在一个`<ul>`列表中。 2. CSS样式：为菜单项设置基本样式，如背景色、边框、布局等，...
C# 抽屉菜单实例(winform左侧导航菜单).rar
11-04
总结，这个"C# 抽屉菜单实例"为开发者提供了一个在WinForm应用中创建动态侧边栏导航菜单的方法。通过自定义控件、布局管理、动画效果和事件处理，我们可以实现类似移动应用的抽屉式菜单，提升桌面应用的用户体验。...
jQuery黑色大型导航下拉菜单.zip
07-04
《jQuery黑色大型导航下拉菜单实现详解》 在网页设计中，导航菜单是不可或缺的一部分，它为用户提供了网站内容的快速访问入口。本教程将详细解析如何使用jQuery库创建一个黑色主题的大型导航下拉菜单，该菜单具有...
一个产品级MCU菜单框架设计~
03-02 1456
声明：本处所说的菜单是用在128*64这种小屏幕的菜单，例如下面这种，不是彩屏上的GUI。作为一个底层驱动工程师，驱动写完了，是要写硬件测试程序的。这个测试程序，一般给测试部/硬件工程师用...
单片机多级菜单程序
01-19
本菜单程序采用结构体及指针设计,可方便实现移值,修改
单片机菜单架构源码_单片机_Menu_菜单_
09-29
本人最近在做一款产品的菜单，主要实现光标跳动以及选择，因而分享出来，大家有需要的话可以作为参考！
menu1_2_C51单片机的菜单框架程序_
10-01
基于C51的菜单框架程序设计，可用四个按键选择不同的功能，能够较好的将不同功能分隔开来，具体实现的效果也比较好。
基于小容量MCU菜单界面的实现方法
05-26
基于小容量MCU的菜单设计 基于小容量MCU的菜单设计
单片机C语言，多级菜单程序
09-24
使用C语言编写的多级菜单程序，在51机器上测试通过，最多可三级
基于STM32的屏幕按键菜单设计框架
m0_61313322的博客
09-08 815
在我们学习单片机的过程中总离不开屏幕，无论是LCD屏幕，还是OLED屏幕，还是串口屏都需要菜单，通过按键来控制界面。主要用到按键控制光标，光标控制界面移动。
按键菜单程序设计：基于单片机等C语言开发环境的菜单程序设计思路以及代码实现（二）
weixin_43977682的博客
05-10 3577
代码实现部分
一个产品级MCU_LCD菜单框架设计，2024年最新我把所有Golang框架整理成了PDF
2401_84264244的博客
04-13 731
以上菜单框架来源屋脊雀工作室，适合初学者练习。我看下这个菜单框架，其实还有很多改进地方。我当初大学电子设计竞赛用到类似结构体方式，但我那菜单框架用到了二级指针，可以做到无限极扩展，而且可以指向（跳转）任意菜单，方便按键进入、返回等操作。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Go语言工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。
layui关闭下拉菜单触发事件的实现
06-10
在 layui中，关闭下拉菜单时可以触发beforeHide事件和hide事件。beforeHide事件在下拉菜单显示的同时触发，并且beforeHide事件返回false将阻止下拉菜单的关闭。hide事件在下拉菜单关闭之后触发。可以通过以下代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值