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 相关文章推荐
JavaScript 变量作用域分析
Jul 04 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
javascript实现前端input密码输入强度验证
Jun 24 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
php5 图片验证码实现代码
2009/12/11 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php操作MongoDB类实例
2015/06/17 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python的help函数如何使用
2020/06/11 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
python 批量将中文名转换为拼音
2021/02/07 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
班主任评语大全
2014/04/26 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
质量承诺书格式范文
2015/04/28 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python