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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
js中Object.create实例用法详解
Oct 05 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
YII分模块加载路由的实现方法
2018/10/01 PHP
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
js实现计算器功能
2020/08/10 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
pytorch 常用线性函数详解
2020/01/15 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
秋游活动策划方案
2014/02/16 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2014年资料员工作总结
2014/11/18 职场文书
python not运算符的实例用法
2021/06/30 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
python垃圾回收机制原理分析
2022/04/13 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS