经典导航栏01，仿蓝色理想TAB横向下拉菜单效果

最新推荐文章于 2024-03-08 09:33:17 发布
最新推荐文章于 2024-03-08 09:33:17 发布
阅读量846 收藏
点赞数
分类专栏： jsp js
jsp 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
js
16 篇文章 0 订阅
订阅专栏

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript" src="<%=basePath %>JS/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<%=basePath %>JS/dojo.js"></script>
<!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" />
<title>仿经典导航菜单</title>
<style type="text/css">
td{font-size:12px;}
.unsel{background-color:#8c8ba1; background-position:top; background-repeat:repeat-x; color:#FFFFFF; font-weight:normal;}
.sel {background-color:#666688; color:#FFFFFF; font-weight:bold;}
.content{background-color:#666688; height:25px; padding-left:20px; padding-right:20px; color:#ffffff;}
.lineunsel{background-color:#FFFFFF;}
.linesel{background:#666688;}
a:link {color:#ffffff;text-decoration:none;}
a:visited {color:#ffffff;text-decoration:none;}
a:active {color:#ffffff;text-decoration:none;}
a:hover {color:#ffffff;text-decoration:underline;}
</style>
<script language="javascript">
function showdh(n){
for(var i=1;i<=10;i++){
eval("dh"+i).className="unsel"
eval("line"+i).className="lineunsel";
eval("menu"+i).style.display="none";
}
eval("dh"+n).className="sel"
eval("line"+n).className="linesel";
eval("menu"+n).style.display="";
}
</script>
</head>
<body οnlοad="javascript:showdh(1);">
<table width="915" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="86" class="unsel" id="dh1"><div align="center"><a href="javascript:showdh(1);">业界动态</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh2"><div align="center"><a href="javascript:showdh(2);">技术文档</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh3"><div align="center"><a href="javascript:showdh(3);">艺术设计</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh4"><div align="center"><a href="javascript:showdh(4);">摄影摄像</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh5"><div align="center"><a href="javascript:showdh(5);">计算机技术</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh6"><div align="center"><a href="javascript:showdh(6);">资源下载</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh7"><div align="center"><a href="javascript:showdh(7);">个人专档</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh8"><div align="center"><a href="javascript:showdh(8);">CG绘画</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="86" class="unsel" id="dh9"><div align="center"><a href="javascript:showdh(9);">专题</a></div></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
    <td width="87" class="sel" id="dh10"><div align="center"><a href="javascript:showdh(10);">经典论坛</a></div></td>
  </tr>
</table>
<table width="915" height="3" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="86" height="6" id="line1"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line2"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line3"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line4"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line5"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line6"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line7"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line8"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="86" id="line9"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
    <td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
    <td width="87" id="line10"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
  </tr>
</table>
<table width="915" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr id="menu1" style="display:none">
    <td  class="content"><a href="#">业界动态一</a>　　<a href="#">业界动态二</a>　　<a href="#">业界动态三</a>　　<a href="#">业界动态四</a>　　<a href="#">业界动态五</a>　　<a href="#">业界动态六</a>　　<a href="javascript:showdh(3);">业界动态七</a></td>
  </tr>
  <tr id="menu2" style="display:none;">
    <td  class="content"><a href="#">技术文档一</a>　　<a href="#">技术文档二</a>　　<a href="#">技术文档三</a>　　<a href="#">技术文档四</a></td>
  </tr>
  <tr id="menu3" style="display:none;">
    <td  class="content"><a href="#">艺术设计一</a>　　<a href="#">艺术设计二</a>　　<a href="#">艺术设计三</a>　　<a href="#">艺术设计四</a>　　<a href="#">艺术设计五</a>　　<a href="#">艺术设计六</a></td>
  </tr>
  <tr id="menu4" style="display:none;">
    <td  class="content"><a href="#">摄影摄像一</a>　　<a href="#">摄影摄像二</a>　　<a href="#">摄影摄像三</a></td>
  </tr>
  <tr id="menu5" style="display:none;">
    <td  class="content"><a href="#">计算机技术一</a>　　<a href="#">计算机技术二</a>　　<a href="#">计算机技术三</a>　　<a href="#">计算机技术四</a>　　<a href="#">计算机技术五</a>　　<a href="#">计算机技术六</a>　　<a href="#">计算机技术七</a>　　<a href="#">计算机技术八</a></td>
  </tr>
  <tr id="menu6" style="display:none;">
    <td  class="content"><a href="#">资源下载一</a>　　<a href="#">资源下载二</a>　　<a href="#">资源下载三</a>　　<a href="#">资源下载四</a></td>
  </tr>
  <tr id="menu7" style="display:none;">
    <td  class="content"><a href="#">个人专档一</a>　　<a href="#">个人专档二</a>　　<a href="#">个人专档三</a>　　<a href="#">个人专档四</a>　　<a href="#">个人专档五</a>　　<a href="#">个人专档六</a>　　<a href="#">个人专档七</a>　　<a href="#">个人专档八</a></td>
  </tr>
  <tr id="menu8" style="display:none;">
    <td  class="content"><a href="#">CG绘画一</a>　　<a href="#">CG绘画二</a>　　<a href="#">CG绘画三</a>　　<a href="#">CG绘画四</a>　　<a href="#">CG绘画五</a></td>
  </tr>
  <tr id="menu9" style="display:none;">
    <td  class="content"><a href="#">专题一</a>　　<a href="#">专题二</a>　　<a href="#">专题三</a>　　<a href="#">专题四</a>　　<a href="#">专题五</a>　　<a href="#">专题六</a>　　<a href="#">专题七</a>　　<a href="#">专题八</a>　　<a href="#">专题九</a>　　<a href="#">专题十</a>　　<a href="#">专题十一</a>　　<a href="#">专题十二</a>　　<a href="#">专题十三</a></td>
  </tr>
  <tr id="menu10" style="display:none;">
    <td  class="content"><a href="#">经典论坛一</a>　　<a href="#">经典论坛二</a>　　<a href="#">经典论坛三</a>　　<a href="#">经典论坛四</a>　　<a href="#">经典论坛五</a>　　<a href="#">经典论坛六</a></td>
  </tr></table>
　<table width="915" border="0" cellspacing="0" cellpadding="0"><tr></tr>
</table>
 
<br/><br/>更多代码请访问 懒人图库  www.lanrentuku.com
</body>
</html>

本文章转载懒人图库

a514548454
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
08-28
主要介绍了Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果,需要的朋友可以参考下
用纯CSS的方式实现一个横向导航栏+下拉菜单
Candeng1998的博客
03-22 4283
记录自己迈出的第一步~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" name="①导航条"> ul ...
蓝色导航CSS实现
拓
03-19 14万+
代码 New Document <!--/***********************************************//* 快速连接导航栏 *//***********************************************/ #nav {
分享86个Html经典模板，总有一款适合您
最新发布
zy0412326的专栏
03-08 908
知识付费甚欢喜，为咱码农谋福利。陆地生态环境BLOG网页模板。电子流行音乐BLOG网页模板。黑色出版信息BLOG网页模板。夏威夷芙蓉花BLOG网页模板。简洁焦点信息BLOG网页模板。绿色植物研究BLOG网页模板。海洋生物保护BLOG网页模板。蓝色导航BLOG信息网页模板。勤劳的蜜蜂BLOG网页模板。拉斯维加斯BLOG网页模板。花椰菜信息BLOG网页模板。蓝黑设计BLOG网页模板。长滩夜景BLOG网页模板。黑色整体BLOG网页模板。色彩研究BLOG网页模板。黄色装饰BLOG网页模板。
vscode底部蓝色导航不见了，vue less报错
you200282的博客
06-16 1万+
vscode底部蓝色导航不见了，vue less报错
VSCode 底部蓝色导航栏介绍以及导航不见了解决
pleaseprintf的博客
06-21 4840
Visual Studio Code（简称 VSCode）是一款功能强大的开源代码编辑器，而其底部蓝色导航栏是一项特性，可以大大提升开发者的编辑器效率。本文将深入探讨 VSCode 底部蓝色导航栏的功能和用法，帮助您更好地利用这个工具，提高编码速度和工作流程。VSCode 的底部蓝色导航栏是编辑器界面底部的一个水平栏，以蓝色背景突出显示。它提供了一系列快速导航和功能按钮，让您可以更快速地浏览和操作代码文件，提高开发效率。
--仿蓝色理想网站的导航菜单--
『天道酬勤』
03-14 5428
网页特效||---仿蓝色理想网站的导航菜单#dNavBar{background-color:#ffffff;}#dNavBar li{list-style-type:none;float:left;width:84px;height:28px;line-height:28px;font-size:12px;color:#FFFFFF
php+jQuery实现的三级导航栏下拉菜单显示效果
10-19
主要介绍了php+jQuery实现的三级导航栏下拉菜单显示效果,涉及php数组遍历与jQuery事件响应操作页面元素变换等相关操作技巧,需要的朋友可以参考下
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
08-31
主要介绍了bootstrap导航栏、下拉菜单、表单的简单应用实例解析,非常不错，具有参考借鉴价值，需要的朋友参考下吧
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
CSS中的导航栏和下拉菜单的实现
09-22
主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
75个精美导航条（经典）
06-09
费了很大劲收集的75个精美导航条，附带实例及源码
zblog导航收录网导航模板
爱酷码的博客
06-28 933
本模板是基于ZBLOG PHP制作独立页面网站目录主题。 模板演示比较简化，外观可能也不是那么好看，喜欢的朋友可下载！ 1、修复分类页面站点直达问题，修复后点击站点正确跳转到内页。 2、分页页面添加分页功能，具体可以到"列表页显示文章的数量"设置翻页数量。 3、将上传缩略图修改成二维码自动获取，省时省力。 4、详细网站页面增加随机网站，增加页面互动和权重传递。 下载地址：https://pan.baidu.com/s/1Gbdmcw5O71MghkYpXIa2ew提取码：...
蓝色导航dove.cf页面_PPT侧边目录导航制作
weixin_39926103的博客
10-29 5万+
很多小伙伴私信我怎么做侧边目录导航，在这里我就出个教程ヾ(≧▽≦*)o我用的WPS，大家用office也一样。office被我用的经常崩溃，所以改用国产软件了。不喜WPS的，勿喷谢谢！╰(￣▽￣)╭1、首先添加个空白页添加空白页2、添加“形状”，选择矩形添加形状3、画框下图我共画了5个框。左边四个小框我进行了颜色填充，右边白色的大框是论文内容，此篇教程中不包括内容的制作、排版。画矩形4、添加文字。...
蓝色大气的交替导航菜单
Yao,Mane
04-29 8697
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">蓝色菜单body{margin:100px 0}.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{d
正品蓝色导航_正品手表网推荐雷诺表官网，时尚腕表的聚集地
weixin_39753616的博客
12-17 3万+
打开雷诺表品牌官网，品牌相关动态以及新款信息一目了然，简洁清晰的页面布局让观看者赏心悦目。标题栏根据产品类型做了分类导航，分别是男士腕表、女士腕表、情侣腕表。点击进入每个类别，都能看到按照上市时间排列的产品图片和型号，每一款产品的产品页面，也都设计特征和技术特征的介绍。在网页的底部，雷诺表还提供了各大电商平台官方旗舰店的链接，方便我们选定了手表的款式之后，根据自己的消费习惯进行购买。就像我最近入手...
最新蓝色网址/公众号导航站源码+Yzmcms内核开发
rthytiu的博客
05-24 8594
正文: 最新蓝色网址/公众号导航站源码+Yzmcms内核开发，用YzmCMS开发的模板，直接服务器打包出来的，上传安装就可以用，详细的安装教程在压缩包内，自己去看吧。 建议后台配置好后，直接在前台注册一个账号，通过前台投稿功能添加内容，因为前台简单一些，程序不会自动抓取网站描述，我觉得没必要，自己填一下就可以。 权重和其它是自动抓取的。 程序: wwwu.lanzouw.com/iq7wd05cfeda 图片: ...
Android app 去除顶部蓝色导航栏（Action Bar
niuguobao的博客
04-11 8432
去除Android顶部的蓝色ActionBar
柠檬导航巨人导航正品蓝_福特合作Telenav提供汽车导航服务 即使无蜂窝网络也可正常工作...
热门推荐
weixin_39643336的博客
11-20 33万+
加入盖世行业交流群，请加微信(盖世汽车豆豆：gasgoo88)出示名片，了解更多行业资讯盖世汽车讯 据外媒报道，随着全新款F-150皮卡和Bronco两门与三门4x4 SUV车型可以为福特客户带来越来越刺激的冒险，福特与Telenav正帮助此类客户确保网联导航技术能够在遥远的探险地继续正常工作，不像只要在蜂窝网络范围之外就无法工作的智能手机地图应用一样。(图片来源：福特)网联汽车和定位服...
bootstrap导航栏下拉菜单实现图片大中小效果
06-03
实现bootstrap导航栏下拉菜单图片的大中小效果可以通过CSS的transform属性来实现。具体实现步骤如下： 1. 在下拉菜单中添加图片，并设置图片的class为“img-responsive”，这样可以使图片自适应导航栏的大小。 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值