JS实现的简洁二级导航菜单雏形效果


Posted in Javascript onOctober 13, 2015

本文实例讲述了JS实现的简洁二级导航菜单雏形效果。分享给大家供大家参考。具体如下:

这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢。

运行效果截图如下:

JS实现的简洁二级导航菜单雏形效果

在线演示地址如下:

具体代码如下:

<!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>
<title>二级导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css"> 
<!-- 
*{font-size:12px;} 
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} 
UL{list-style-type:none; margin:0px;} 
.ttl{height:18px;} 
.ctt{ 
height:auto; 
padding:6px; 
clear:both; 
border: 1px solid #CCCCCC; 
} 
.w936{ 
width:936px; 
clear:both; 
height: 120px; 
margin-top: 20px; 
margin-right: 0; 
margin-bottom: 2px; 
margin-left: 0; 
} 
.normaltab { 
color:#1F3A87; 
} 
.hovertab { 
color:#FF0000; 
background-color: #99CC00; 
} 
.dis{display:block;} 
.undis{display:none;} 
.tabs { 
width:100%; 
background:#BBD9EE; 
font-size:93%; 
line-height:normal; 
} 
.tabs ul { 
margin:0; 
padding:10px 10px 0 50px; 
list-style:none; 
} 
.tabs li { 
display:inline; 
margin:0; 
padding:0; 
cursor: pointer; 
} 
.tabs a { 
float:left; 
background:url("images/tableft.gif") no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
.tabs a span { 
float:left; 
display:block; 
background:url("images/tabright.gif") no-repeat right top; 
padding:5px 15px 4px 6px; 
color:#666; 
} 
.tabs a span {float:none;} 
.tabs a:hover span { 
color:#FF9834; 
} 
.tabs a:hover { 
background-position:0% -42px; 
} 
.tabs a:hover span { 
background-position:100% -42px; 
} 
--> 
</style> 
<script type="text/javascript" language="javascript"> 
<!-- 
function g(o){return document.getElementById(o);} 
function HoverLi(n) 
{ 
for(var i=1;i<=8;i++){g('tb_'+i);g('tbc_0'+i).className='undis';} 
g('tbc_0'+n).className='dis';g('tb_'+n); 
} 
//--> 
</script> 
</head>
<body>
<div class="w936"> 
 <div id="tb_" class="tb_ tabs"> 
  <ul> 
   <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>ASP</span></a></li> 
   <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>PHP</span></a></li> 
   <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>.NET</span></a></li> 
   <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>JSP</span></a></li> 
   <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>JAVA</span></a></li> 
   <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>DELPHI</span></a></li> 
   <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>VC++</span></a></li> 
   <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>AJAX</span></a></li> 
  </ul> 
 </div> 
 <div class="ctt"> 
  <div class="dis" id="tbc_01">ASP的内容一</div> 
  <div class="undis" id="tbc_02">PHP的内容二</div> 
  <div class="undis" id="tbc_03">.NET的内容三</div> 
  <div class="undis" id="tbc_04">JSP的内容四</div> 
  <div class="undis" id="tbc_05">JAVA的内容五</div> 
  <div class="undis" id="tbc_06">DELPHI的内容六</div> 
  <div class="undis" id="tbc_07">VC++的内容七</div> 
  <div class="undis" id="tbc_08">AJAX的内容</div> 
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
7个JS基础知识总结
Mar 05 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 #Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 #Javascript
编写高性能Javascript代码的N条建议
Oct 12 #Javascript
JavaScript 性能优化小结
Oct 12 #Javascript
一个php+js实时显示时间问题
Oct 12 #Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 #Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 #Javascript
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
几个php应用技巧
2008/03/27 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
简述vue中的config配置
2018/01/23 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python yield使用方法示例
2013/12/04 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
农村婚礼证婚词
2014/01/10 职场文书
2013年军训通讯稿
2014/02/05 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
交通事故协议书范文
2014/04/16 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
邀请书模板
2015/02/02 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书