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 07 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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
用Socket发送电子邮件
2006/10/09 PHP
php print EOF实现方法
2009/05/21 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
PHP反射机制用法实例
2014/08/28 PHP
php常用的url处理函数总结
2014/11/19 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
canvas绘制多边形
2017/02/24 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue中轮训器的使用
2019/01/27 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python面试题之列表声明实例分析
2019/07/08 Python
python线程中的同步问题及解决方法
2019/08/29 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python如何修改文件时间属性
2021/02/05 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
幼儿园中班教师寄语
2014/04/03 职场文书
2014年村官工作总结
2014/11/24 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers