jQuery+css实现的蓝色水平二级导航菜单效果代码


Posted in Javascript onSeptember 11, 2015

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果。分享给大家供大家参考。具体如下:

这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧。

运行效果截图如下:

jQuery+css实现的蓝色水平二级导航菜单效果代码

在线演示地址如下:

具体代码如下:

<!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>
*{
 font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
body{
 margin:0; padding:0; background:white;
}
img{
 border:0;
}
a:link,a:visited,a:active{
 text-decoration:none;
}
a:hover{
 text-decoration:underline;
}
/********** header **********/
.header{
 width:100%; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; text-align:center;
}
.header .padder{
 width:910px; margin:0 auto; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; padding-bottom:4px; text-align:left;
}
.header .padder .nav{
 background:url(images/vertical.gif) repeat-x 0 -36px; height:36px;
}
.header .padder .navLeftBg{
 background:urlvertical.gif) no-repeat 0 0; height:36px;
}
.header .padder .navRightBg{
 background:url(images/icons.gif) no-repeat right -146px; height:36px;
}
.header .padder .nav .mainNav{
 padding-left:24px; position:absolute;
}
.header .padder .nav .mainNav a:link,.header .padder .nav .mainNav a:visited,.header .padder .nav .mainNav a:active{
 width:90px; height:36px; display:inline-block; text-align:center; color:#ffffff; font-weight:bold; font-size:14px; line-height:36px; margin-left:11px;
}
.header .padder .nav .mainNav a:hover{
 text-decoration:none;
}
.header .padder .nav .mainNav a.actived:link,.header .padder .nav .mainNav a.actived:visited,.header .padder .nav .mainNav a.actived:hover,.header .padder .nav .mainNav a.actived:active{
 background:url(images/icons.gif) no-repeat 0 -27px; color:#000000;
}
.header .padder .secondNav{
 line-height:21px; text-align:left;
}
.header .padder .secondNav a{
 color:#266392; display:inline-block; padding:0 8px; margin-right:19px;
}
.header .padder .secondNav a.actived{
 font-weight:bold;
}
.header .padder .secondNav .subNav1{
 display:none;
}
.header .padder .secondNav .subNav2{
 padding-left:150px;display:none;
}
.header .padder .secondNav .subNav3{
 padding-left:250px;display:none;
}
.header .padder .secondNav .subNav4{
 padding-left:350px;display:none;
}
.header .padder .secondNav .subNav5{
 padding-left:450px;display:none;
}
.header .padder .secondNav .subNav6{
 padding-left:550px;display:none;
}
.header .padder .secondNav .subNav7{
 padding-left:650px;display:none;
}
</style>
<script language="javascript" type="text/javascript" src="jquery1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
 $(".mainNav a").mouseover(function(){
  $(".mainNav a").attr("class","");
  $("#"+this.id).attr("class","actived");
  var currentMenuNo = parseInt(this.id.substring(1));
  $(".secondNav div").each(function(){
   $(this).hide();
   $("#subNav"+currentMenuNo).show();
  });
 });
});
</script>
</head>
<body>
<div class="header">
 <div class="padder">
  <div class="nav">
   <div class="navLaftBg">
    <div class="navRightBg">
     <div class="mainNav">
      <a href="#" id="n1" class="actived">首页</a>
      <a href="#" id="n2">ASP源码</a>
      <a href="#" id="n3">PHP源码</a>
      <a href="#" id="n4">.NET源码</a>
      <a href="#" id="n5">HTML源码</a>
      <a href="#" id="n6">工具软件</a>
      <a href="#" id="n7">脚本源码</a>
     </div>
    </div>
   </div>
  </div>
  <div class="secondNav">
   <div id="subNav2" class="subNav2">
    <a href="#" class="actived">社区论坛</a>
    <a href="#">全站CMS</a>
    <a href="#">企业网站</a>
   </div>
   <div id="subNav3" class="subNav3">
    <a href="#" class="actived">社区论坛</a>
    <a href="#">全站CMS</a>
    <a href="#">企业网站</a>
   </div>
   <div id="subNav4" class="subNav4">
    <a href="#" class="actived">社区论坛</a>
    <a href="#">全站CMS</a>
    <a href="#">企业网站</a>
   </div>
   <div id="subNav5" class="subNav5">
    <a href="#" class="actived">社区论坛</a>
    <a href="#">全站CMS</a>
    <a href="#">企业网站</a>
   </div>
   <div id="subNav6" class="subNav6">
    <a href="#" class="actived">社区论坛</a>
    <a href="#">全站CMS</a>
    <a href="#">企业网站</a>
   </div>
   <div id="subNav7" class="subNav7">
    <a href="#" class="actived">社区论坛</a>
    <a href="#">全站CMS</a>
    <a href="#">企业网站</a>
   </div>
  </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
js实现的后台左侧管理菜单代码
Sep 11 #Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 #Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 #Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 #Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 #Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 #Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 #Javascript
You might like
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
node结合swig渲染摸板的方法
2018/04/11 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python WindowsError的错误代码详解
2017/07/23 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python地图绘制实操详解
2019/03/04 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
pytest中文文档之编写断言
2019/09/12 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
如何清空python的变量
2020/07/05 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
二年级体育教学反思
2014/01/15 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
先进集体申报材料
2014/12/25 职场文书
财务稽核岗位职责
2015/04/13 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android