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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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 while循环得到循环次数
2013/10/26 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
shiro授权的实现原理
2017/09/21 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python实现简易淘宝购物
2019/11/22 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
保护环境演讲稿
2014/05/10 职场文书
租房安全协议书
2014/08/20 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
学校2014年度工作总结
2014/12/06 职场文书
科技馆观后感
2015/06/08 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
高中班主任寄语
2019/06/21 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL