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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
vue-axios使用详解
May 10 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP制作图型计数器的例子
2006/10/09 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
django允许外部访问的实例讲解
2018/05/14 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python flask搭建web应用教程
2019/11/19 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python3代码中实现加法重载的实例
2020/12/03 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
专科应届毕业生求职信
2014/06/04 职场文书
应届大学生求职信
2014/07/20 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
诉讼授权委托书
2014/10/15 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
安全教育主题班会总结
2015/08/14 职场文书
企业愿景口号
2015/12/25 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Python函数中apply、map、applymap的区别
2021/11/27 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript