滚动二级菜单

最新推荐文章于 2022-03-09 23:52:12 发布
最新推荐文章于 2022-03-09 23:52:12 发布
阅读量1.4k 收藏
点赞数
分类专栏： JAVASCRIPT/Ajax/CSS/HTML 文章标签： border table class menu function bbs
该博客主要展示了滚动二级菜单的HTML代码实现。包含了菜单样式设置、鼠标悬停效果、二级菜单显示与滚动功能的代码，涉及多个菜单项如本站首页、登陆选项、电子书店等，还定义了相关的JavaScript函数来控制菜单的显示和移动。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<HTML><HEAD><TITLE>滚动二级菜单</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
<SCRIPT>
window.onerror = function Nopop(){
 return true;
};
</SCRIPT>
<style type="text/css">
<!--
body,td {
 font-size: 12px;
 color: #000000;
}
a {
 font-size: 12px;
 color: #336633;
 text-decoration: none;
}
a:hover {
 font-size: 12px;
 color: #FF9900;
 text-decoration: underline;
}
-->
</style>
</HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0
topMargin=0>
<DIV id=menuDiv
style="Z-INDEX: 1000; VISIBILITY: hidden; WIDTH: 1px; POSITION: absolute; HEIGHT: 1px; BACKGROUND-COLOR: #9cc5f8"></DIV>
<TABLE class=tdbg cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD colSpan=2>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" align=center>
        <TBODY>
        <TR>
          <TD vAlign=center>
            <TABLE height=30 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
              <TBODY>
              <TR>
                <TD style="PADDING-BOTTOM: 1px" vAlign=center align=middle>
                  <TABLE height=30 cellSpacing=0 cellPadding=0 width=760
                  align=center border=0>
                    <TBODY>
                    <TR>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('1');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=30><A
                        href="index.php">本站首页</A></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('2');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><A
                        href="loginForm.php">登陆选项</A></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('3');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><A
                        href="shop.php">电子书店</A></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('4');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><A
                        href="bookroom.php">开放书库</A></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('5');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><A
                        href="bbs_index.php">论坛交流</A></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('6');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><FONT color=gray>用户信息</FONT></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('7');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><FONT color=gray>作家功能</FONT></TD>
                      <TD width=1 background=心空中文网.files/line1.gif
                      height=30></TD>
                      <TD
                      onmouseover="this.style.backgroundColor='';Tshow_fn('8');"
                      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px"
                      onmouseout="this.style.backgroundColor='';" align=middle
                      height=20><FONT
                  color=gray>站务处理</FONT></TD></TR></TBODY></TABLE>
                  <DIV id=menu_root
                  style="Z-INDEX: 2; LEFT: 45px; VISIBILITY: visible; WIDTH: 700px; CLIP: rect(0px 100% 25px 0px); POSITION: absolute; TOP: 30px; HEIGHT: 17px">
                  <DIV id=menu_sub
                  style="Z-INDEX: 10; LEFT: 1px; WIDTH: 760px; POSITION: absolute; TOP: 43px; HEIGHT: 135px">
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR align=middle height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=middle><IMG height=6 src="心空中文网.files/nav.gif"
                        width=8 align=absMiddle> 欢迎光临本站.希望在这里能找到你所需要的资源！(<FONT
                        color=green>在线人数：4</FONT>) </TD></TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=right width=200><IMG height=6
                        src="心空中文网.files/nav.gif" width=8 align=absMiddle> <A
                        href="index.php">返回首页</A> </TD>
                      <TD>&nbsp;</TD></TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD width=93>&nbsp;</TD>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=middle><IMG height=6 src="心空中文网.files/nav.gif"
                        width=8 align=absMiddle> <A
                        href="loginForm.php">用户登录</A><IMG
                        height=6 src="心空中文网.files/nav.gif" width=8
                        align=absMiddle> <FONT color=gray>退出登录</FONT><IMG
                        height=6 src="心空中文网.files/nav.gif" width=8
                        align=absMiddle> <A
                        href="register.php">用户注册</A><IMG
                        height=6 src="心空中文网.files/nav.gif" width=8
                        align=absMiddle> <A
                        href="sendpwd.php">忘记密码</A></TD></TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD width=188>&nbsp;</TD>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px"
                        noWrap>*
                        <A href="shop.php">所有书籍</A>
                        * <FONT
                        color=gray>交易记录</FONT> * <FONT
                    color=gray>购买金币</FONT></TD>
                    </TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=right>* <A
                        href="bookroom.php">总书目</A>
                        * <A
                        href="bookroom.php?aclass=1">玄幻魔法</A>
                        * <A
                        href="bookroom.php?aclass=2">武侠仙侠</A>
                        * <A
                        href="bookroom.php?aclass=3">历史军事</A>
                        * <A
                        href="bookroom.php?aclass=4">都市言情</A>
                        * <A
                        href="bookroom.php?aclass=5">网络游戏</A>
                        * <A
                        href="bookroom.php?aclass=6">推理灵异</A>
                        * <A
                        href="bookroom.php?aclass=7">散文诗词</A>
                        * <A
                        href="bookroom.php?aclass=8">科幻动漫</A>
                      </TD>
                    </TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR align=middle height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px"
                        noWrap>*
                        <A
                        href="bbs_forum.php?fid=1">公共论坛</A>
                        * <FONT
                        color=gray>会员论坛</FONT> * <FONT color=gray>VIP论坛</FONT> * <FONT
                        color=gray>作家论坛</FONT> * <A
                        href="bbs_forum.php?fid=5">公告论坛</A>
                      </TD></TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=middle>* <FONT color=gray>我的信息</FONT> * <FONT
                        color=gray>我的书架</FONT> * <FONT color=gray>留言消息</FONT> * <FONT
                        color=gray>资料修改</FONT> * <FONT
                    color=gray>作家申请</FONT></TD></TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=middle>* <FONT color=gray>作品管理</FONT> * <FONT
                        color=gray>新书申请</FONT> * <FONT
                    color=gray>兑换现金</FONT></TD></TR></TBODY></TABLE>
                  <TABLE class=txxt style="TABLE-LAYOUT: fixed" cellSpacing=0
                  cellPadding=0 border=0>
                    <TBODY>
                    <TR height=20>
                      <TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px" noWrap
                      align=right>* <FONT color=gray>作家审核</FONT> * <FONT
                        color=gray>新作审核</FONT> * <FONT color=gray>续费审核</FONT> * <FONT
                        color=gray>兑换审核</FONT> * <FONT color=gray>作品管理</FONT> * <FONT
                        color=gray>用户资料</FONT> * <FONT color=gray>公告管理</FONT> * <FONT
                        color=gray>站内统计</FONT> * <FONT
                    color=gray>版主管理</FONT></TD></TR></TBODY></TABLE></DIV></DIV>
                  <SCRIPT>
var cur_top = 8;
var cur_no = 0;
var toggle_v = 0;
function Tshow_fn(vv){
  cur_no = vv;
  cur_top = -(20*vv)+6;
}

function move_div(){
  document.all["menu_sub"].style.pixelTop += (cur_top-document.all["menu_sub"].style.pixelTop)/2;
 setTimeout("move_div()",20);
 if((cur_top-document.all["menu_sub"].style.pixelTop)/2 == -0.5){
  end_move();
 }
}

function end_move(){
 document.all["menu_sub"].style.pixelTop -=1;
}

move_div();


</SCRIPT>
<!-- --></TD></TR></TBODY></TABLE>
            <TABLE cellSpacing=0 cellPadding=0 width=760 align=center
              border=0><TBODY>
              <TR>
                <TD bgColor=#f0f0f0 height=24>&nbsp;</TD></TR>
              <TR>
              <TD
  bgColor=#fffff8></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</BODY></HTML>

一级菜单需有滚动，二级菜单从隐藏的溢出中弹出
RainHg的博客
10-28 947
一级菜单需要有滚动功能，当鼠标放至一级菜单时，会弹出对应的二级菜单，出现问题：当一级菜单需要滚动效果时，一级菜单在水平方向上是溢出隐藏的，导致二级菜单无法弹出。
html网页横向一级菜单,横向二级导航菜单(html+css+js)
weixin_34622572的博客
06-03 2096
/*基本信息*/body{margin: 0;padding: 0;background: #FFFFFF;}/*导航*/#navigation{font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */height: 32px;background: #999999;}....
下拉滑动二级菜单
weixin_34248258的博客
01-07 322
下拉滑动二级菜单的应用还挺多的，比较美观。各层之间颜色的搭配挺重要的，多试几次。难点在把层次关系搞清楚，否则html布局都不知道从何下手。 主要分为三层 底层是class="menu-body"，高度为50px，宽度100%；hover触发高度变为300px；注意要写overflow:hidden，否则超出来的ul就会一直显示；设置t...
将带有动画的滑动菜单添加到活动
04-03 133
我在玩动画，图层等等，并且已经编写了这个简单的滑动菜单。 当用户触摸屏幕并向上移动手指时，该想法非常简单，应用会显示一个菜单，而当用户触摸屏幕并向下移动手指时，该菜单就会消失。 如您所见，这个想法很简单，但是当我们想向我们的应用程序中添加一些菜单时，它可能会很有用。 第一步是创建包含菜单的滑动层。 为了简单起见，我只显示一个TextView，但是您可以修改代码以显示菜单。 让我们...
html如何把二级菜单竖放,CSS实现带滚动条的二级竖直菜单
weixin_39947522的博客
06-17 971
CSS实现带滚动条的二级竖直菜单.menu{font-family: verdana, arial, sans-serif; width:500px; padding:20px 0 100px 100px; position:relative;z-index:100;}.menu ul{padding:0; margin:0; list-style-type: none; border:0;}.m...
二级菜单
auyeung_anne的专栏
04-07 1098
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。 ]但在《CSS二级菜单》中，如果一级菜单中的超链接是#，那么只要单击该一级菜单，那么与这个一级菜单对应的二级菜单就会一直显示在网页中，不能隐藏，是一个小小的bug。 后来仔细的想了一想，其实，无论是什么样的二级菜单，原理都是一样的： 1、每一个一
Unity3D UGUI Scroll View 二级滚动菜单
啊脑袋的博客
03-09 5828
主要实现一个通用的二级菜单预制件，最终实现通过少量修改达到预想的样式，毕竟不可能完全通用，总有需要修改的地方
layui二级下拉菜单
look_write的博客
11-22 1175
<script> layui.use(['form'],function () { var form = layui.form ,table = layui.table ,layer = layui.layer ,$ = layui.jquery ,dropdown = layui.dropdown; /...
elementui dropdown实现二级菜单
weixin_43371136的博客
01-06 6742
<el-dropdown @command="handleCommand($event, key)" size="medium" trigger="click" :hide-on-click="false" 是否在点击菜单项后隐藏菜单 v-else :class="value.className" > <span>
js实现向右横向滑出的二级菜单效果
10-23
在探讨如何使用JavaScript实现一个向右横向滑出的二级菜单效果之前，我们首先要了解二级菜单的实现原理。二级菜单，顾名思义，是指在主菜单项下再展开的一个或多个子菜单项。通常，二级菜单用于在有限的空间内展示更...
非常酷炫的jQuery+css超滑二级下拉菜单
03-05
2. 子菜单项：二级菜单，隐藏在主菜单项之下，根据用户交互动态显示。 3. 布局样式：使用浮动、相对定位或绝对定位来确保子菜单在主菜单下方正确显示，同时避免遮挡其他内容。 4. 动画效果：利用CSS3的`transition`...
jquery带下划线滚动的二级导航菜单代码
10-30
"jquery带下划线滚动的二级导航菜单代码"是一个利用JavaScript库jQuery实现的动态效果，它为用户提供了一种直观的方式来跟踪当前页面的位置，并通过下划线的移动来强调当前选中的导航项。这个效果增强了用户体验，使...
jquery导航二级菜单太多了下拉菜单滚动显示
11-20
"jquery导航二级菜单太多了下拉菜单滚动显示"这个主题涉及到如何在JavaScript库jQuery的帮助下，处理含有大量子项的二级导航菜单，使其在超过屏幕范围时能够滚动显示，提升用户体验。 首先，我们要理解jQuery的基本...
jquery实现鼠标滑过显示二级下拉菜单效果
10-23
其次，为了达到二级菜单的“滑出”效果，我们会在一级菜单项上绑定jQuery的mouseover事件，当鼠标滑过一级菜单项时，二级菜单项会从隐藏状态变为可见状态。这通常通过改变二级菜单项CSS的`display`属性来实现，例如...
为什么二级菜单会被挡住_下拉导航菜单被遮住解决办法
weixin_39859128的博客
12-18 2904
近期有几位客户购买了“天兴模板工作室自用模板”后自行修改时发现了一个问题。在把这个下拉菜单移到左侧或者直接在左侧加下拉菜单时候发现：下拉菜单被下面的滚动幻灯片给遮住了。这个问题是由于div的定位造成的，幻灯片由于使用了js的关系使用了很多绝对或者相对定位。解决办法如下：在封装幻灯片的div的id属性后面加上一句代码：代码如下 复制代码style="z-index:-999;position:rel...
2024中国医院人力资源现状报告.pdf
08-06
2024中国医院人力资源现状报告.pdf
【人工智能应用开发】扣子COZE AI编程详细应用代码案例分析：构建下一代智能体工作流及应用场景解析
08-06
内容概要：本文深入解析了扣子COZE AI编程及其详细应用代码案例，旨在帮助读者理解新一代低门槛智能体开发范式。文章从五个维度展开：关键概念、核心技巧、典型应用场景、详细代码案例分析以及未来发展趋势。首先介绍了扣子COZE的核心概念，如Bot、Workflow、Plugin、Memory和Knowledge。接着分享了意图识别、函数调用链、动态Prompt、渐进式发布及监控可观测等核心技巧。然后列举了企业内部智能客服、电商导购助手、教育领域AI助教和金融行业合规质检等应用场景。最后，通过构建“会议纪要智能助手”的详细代码案例，展示了从需求描述、技术方案、Workflow节点拆解到调试与上线的全过程，并展望了多智能体协作、本地私有部署、Agent2Agent协议、边缘计算插件和实时RAG等未来发展方向。; 适合人群：对AI编程感兴趣的开发者，尤其是希望快速落地AI产品的技术人员。; 使用场景及目标：①学习如何使用扣子COZE构建生产级智能体；②掌握智能体实例、自动化流程、扩展能力和知识库的使用方法；③通过实际案例理解如何实现会议纪要智能助手的功能，包括触发器设置、下载节点、LLM节点Prompt设计、Code节点处理和邮件节点配置。; 阅读建议：本文不仅提供了理论知识，还包含了详细的代码案例，建议读者结合实际业务需求进行实践，逐步掌握扣子COZE的各项功能，并关注其未来的发展趋势。
2025年中国仓储物流市场年中回顾与展望.pdf
最新发布
08-06
2025年中国仓储物流市场年中回顾与展望.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值