一个不错的tab效果的导航菜单（一级和二级为横向）

最新推荐文章于 2020-02-29 13:46:51 发布
最新推荐文章于 2020-02-29 13:46:51 发布
阅读量853 收藏
点赞数
文章标签： ASP 公告 Web CSS 咨询
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>测试</title>
<linkhref="http://www.yqcs.gov.cn/public.css"rel="stylesheet"type="text/css"/>
<script>
//初始化
vardef="1";
functionmover(object){
//主菜单
varmm=document.getElementById("m_"+object);
mm.className="m_li_a";
//初始主菜单先隐藏效果
if(def!=0){
varmdef=document.getElementById("m_"+def);
mdef.className="m_li";
}
//子菜单
varss=document.getElementById("s_"+object);
ss.style.display="block";
//初始子菜单先隐藏效果
if(def!=0){
varsdef=document.getElementById("s_"+def);
sdef.style.display="none";
}
}
functionmout(object){
//主菜单
varmm=document.getElementById("m_"+object);
mm.className="m_li";
//初始主菜单还原效果
if(def!=0){
varmdef=document.getElementById("m_"+def);
mdef.className="m_li_a";
}
//子菜单
varss=document.getElementById("s_"+object);
ss.style.display="none";
//初始子菜单还原效果
if(def!=0){
varsdef=document.getElementById("s_"+def);
sdef.style.display="block";
}
}
</script>
</head>
<body>
<divid="menu">
<ul>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_1"class='m_li_a'><ahref="index.asp">财税首页</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_2"class='m_li'οnmοuseοver='mover(2);'οnmοuseοut='mout(2);'><ahref="about_1.asp">政务公开</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_3"class='m_li'οnmοuseοver='mover(3);'οnmοuseοut='mout(3);'><ahref="jobnet_1.asp">网上办事</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_4"class='m_li'οnmοuseοver='mover(4);'οnmοuseοut='mout(4);'><ahref="affiche.asp">公告中心</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_5"class='m_li'οnmοuseοver='mover(5);'οnmοuseοut='mout(5);'><ahref="statute.asp">法规中心</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_6"class='m_li'οnmοuseοver='mover(6);'οnmοuseοut='mout(6);'><ahref="culture_1.asp">财税文化</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
<liid="m_7"class='m_li'οnmοuseοver='mover(7);'οnmοuseοut='mout(7);'><ahref="subject.asp">专题宣传</a></li>
<liclass="m_line"><imgsrc="http://www.yqcs.gov.cn/images/web/line1.gif"/></li>
</ul>
</div>
<divstyle="height:32px;background-color:#F1F1F1;">
<ulclass="smenu">
<listyle="padding-left:29px;"id="s_1"class='s_li_a'>欢迎光临乐清财税网，您是本站第2842位客人！</li>
<listyle="padding-left:141px;"id="s_2"class='s_li'οnmοuseοver='mover(2);'οnmοuseοut='mout(2);'><ahref="about_1.asp">财税简介</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="about_2.asp">机构设置</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="about_3.asp">办事指南</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="about_4.asp">税种简介</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="about_5.asp">财税动态</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="about_6.asp">公车动态</a></li>
<listyle="padding-left:252px;"id="s_3"class='s_li'οnmοuseοver='mover(3);'οnmοuseοut='mout(3);'><ahref="jobnet_1.asp">下载专区</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="jobnet_2.asp">上传专区</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="jobnet_3.asp">申请报名</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="jobnet_4.asp">查询系统</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="jobnet_5.asp">咨询投诉</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="jobnet_6.asp">满意调查</a></li>
<listyle="padding-left:362px;"id="s_4"class='s_li'οnmοuseοver='mover(4);'οnmοuseοut='mout(4);'><ahref="affiche_list.asp?types=最新公告">最新公告</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="affiche_list.asp?types=会计通知">会计通知</a></li>
<listyle="padding-left:474px;"id="s_5"class='s_li'οnmοuseοver='mover(5);'οnmοuseοut='mout(5);'><ahref="statute.asp">最新政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="statute_search.asp">政策法规查询</a></li>
<listyle="padding-left:447px;"id="s_6"class='s_li'οnmοuseοver='mover(6);'οnmοuseοut='mout(6);'><ahref="culture_1.asp">税收宣传</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="culture_2.asp">队伍建设</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="culture_3.asp">文明创建</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="../www/forum.asp"target="_blank">青年论坛</a>&nbsp;&nbsp;|&nbsp;&nbsp;<ahref="culture_5.asp">廉政课堂</a></li>
<listyle="padding-left:696px;"id="s_7"class='s_li'οnmοuseοver='mover(7);'οnmοuseοut='mout(7);'><ahref="subject.asp">专题宣传区</a></li>
</ul>
</div>
</body>
</html>
iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三种方式实现网页二级菜单
Bazingaea的博客
11-28 6万+
方法一：使用HTML和CSS实现   首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构   &lt;div class="test"&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt..
左侧二级菜单右侧对应切换内容tab
05-27
左侧二级菜单右侧对应切换内容tab 文件夹下 tab.html 文件
简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
YanGo的博客
07-15 3622
没事写个简单的demo，做一下学习记录，也欢迎大家一起交流讨论。不多说，上代码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name='viewport' content='width=device-width,minimum-scale=1.
24张立体质感tab按钮导航菜单图表打包下载.zip
09-08
横向立体质感切换按钮，竖向立体质感切换按钮，2到8多项切换按钮图表，24张立体质感tab按钮导航菜单图表打包下载。
水平导航菜单+二级菜单效果
10-25
在“水平导航菜单+二级菜单效果”这个项目中，主要使用了HTML（超文本标记语言）和JavaScript技术来实现这一功能。HTML是网页的基础，负责定义页面结构，而JavaScript则用来增加交互性和动态效果。 1. HTML部分： ...
纯CSS实现横向三级菜单导航栏
06-28
一个简单的三级菜单通常包含一个顶级菜单，每个顶级菜单项下又包含二级子菜单，而二级子菜单中可能还有三级子菜单。这样的结构可以用`<ul>`和`<li>`元素构建： ```html <li><a href="#">菜单1 <li><a href=...
多彩的tab导航
04-05
在Android应用开发中，"多彩的tab导航"是一种常见的用户界面设计，用于提供多页面间的切换功能。这种设计通常用于展示应用的主要功能区域，让用户能够快速访问和切换不同的内容板块。这里，我们聚焦于由DevLight-...
各种选项卡效果
08-29
10. **多级选项卡**：可以构建层级结构，比如一级选项卡下有二级选项卡，适用于内容层次分明的场景，如导航菜单。 实现这些选项卡效果通常依赖于前端框架或库，如jQuery UI、Bootstrap、AngularJS、Vue.js等，它们...
JS经典导航条免费下载
05-13
这种导航条通常包含多个一级菜单项，每个菜单项下又可能有多个二级菜单。通过JS和CSS的结合，可以实现菜单项的高亮、下拉菜单的滑入滑出等效果，使导航既美观又实用。 "滑动效果，适合做faq或menu.htm"可能是一种...
Div CSS TAB风格二级导航菜单代码.rar
07-10
一款由Div CSS jQuery实现的TAB式二级导航菜单，和滑动门导航十分的相似，只不过设计成了菜单的样式，这是以前十分流行的一种菜单形式，如果你的CSS比较好，你可以在不改变JS部分的情况对菜单进行二次美化，变成现在流行的风格哦。
jQuery横向二级滑动导航菜单
08-14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为巧克力jQuery横向二级滑动导航菜单，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" /> <title>巧克力jQuery横向二级滑动导航菜单_懒人图库</title> <link href="css/lrtk.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript" src="js/lrtk.js"></script> </head> <body> <!-- 代码 开始 --> <div id="menu"> <ul id="nav"> <li class="mainlevel"><span class="note">首页</span></li> <li class="mainlevel" id="mainlevel_01"><a href="#">环境可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">空调</a></li> <li><a href="#">电量仪</a></li> <li><a href="#">温度</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_02"><a href="#">容量可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">电力功耗</a></li> <li><a href="#">机柜承重</a></li> <li><a href="#">空余U位</a></li> <li><a href="#">机柜位置</a></li> </ul> </li> <li class="mainlevel"><a href="#">管线可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">供电管路</a></li> </ul> </li> <li class="mainlevel"><a href="#">监控可视化</a><!--input an em tag as a space,IE is gread need--> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">安防设施</a></li> <li><a href="#">云图</a></li> <li><a href="#">气流</a></li> </ul> </li> <li class="mainlevel"><a href="#">演示可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">动画演示</a></li> <li><a href="#">安防设施</a></li> </ul> </li> </ul> </div> <!-- 代码 结束 --> </body> </html>
一个比较漂亮的tab样式
nanjing0412的专栏
03-09 8508
直接上代码吧： Html代码   html>   head>   meta http-equiv="Content-Type" content="text/html; charset=utf-8">   style>      body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, b
网上比较流行的一种tab切换效果代码，主要是用于导航的一些栏目。
kevin
06-04 770
<br />网上比较流行的一种tab切换效果代码，主要是用于导航的一些栏目。<br /><br /><div class="tab"> <br /><div id="tabsK"> <br /><ul id="menu4"> <br /><li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a></li> <br /><li onclick="settab(4,1)"><a title="企业新闻"><span>
【设计思考】多层级tab选项卡展示方式
设计の诗
02-29 8941
在后台管理系统的设计中，往往会遇到多层级的查询与展示。如何能更直观地展示数据，并且让用户体验更佳，是在设计过程中需要仔细考虑的问题。 举个例子 现有一个管理系统的原型图如下，共有5个层级，选择数据时，需要一层一层选择。可以看出，原型图中的tab层级虽然清晰，但视觉效果欠佳，尤其是前三层，由于都是横向选择标签，没有辨识度。 解决方法 经过一番思考和对比，确定了一个比较好的展示方式——横纵交错。如第...
页面导航菜单的设计
峰际流云
01-08 2257
导航菜单是web页面中一个重要的部分，是整个站点便捷性的体现。一个设计良好的导航既可以方便用户浏览整个网站，同时也是吸引用户眼球的一个亮点。现在的站点设计的第一原则是简洁大方，导航的设计也不例外。下面以一个CSDN站点导航设计为蓝本，结合CSS、jQuery介绍动态主导航菜单设计的几个要点。
使用layui实现的水平导航动态操作tab项以及优化鼠标右键功能
Trenryan的博客
09-14 4693
基于之前几篇博客优化layui的tab鼠标右键功能（参考博客https://blog.csdn.net/nb7474/article/details/79413460/），使用layui实现的水平导航动态操作tab项，本篇博客主要讲的是：新增基于鼠标焦点（mouseover事件）的鼠标右键功能（包括刷新，关闭其他，关闭右边所有，关闭所有） 该篇文章主要优化tab的鼠标右键事件，之前看了几篇...
Tab导航栏
彼岸人生的专栏
01-23 1314
目前市场上面存在很多的Tab导航指示器，但是大多数都是与ViewPager关系紧密的，原生的TabLayout等无法满足拆分的需求，所以自己定制一个可以左右滑动的Tab指示器。 1.继承HorizontalScrollView HorizontalScrollView我们都知道是一个横向滑动的ScrollView，我们可以利用这个特性来定制我们的控件。步骤： （1）动态的创建一个Line
帮我用web写一个横向的二级导航菜单
最新发布
04-18
好的，我可以帮助你用web写一个横向的二级导航菜单。首先，你需要使用HTML和CSS来创建菜单。以下是一个基本的HTML结构： ``` <li><a href="#">菜单1 <li><a href="#">菜单1子选项1</a></li> <li><a href="#...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值