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

2024-09-30 23:00:41

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

jQuery模仿京东/天猫商品左侧分类导航菜单效果

现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <
jquery实现红色竖向多级向右展开的导航菜单效果

本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站的导航菜单,红色风格,非常漂亮,向右伸展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
jQuery实现的动态伸缩导航菜单实例

本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: <!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">&l
jquery实现无限分级横向导航菜单的方法

本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 复制代码代码如下: (function($){ $.fn.extend({ droplinemenu: function(configs) { var configs = $.extend({ over: 200, o
jQuery实现淡入淡出二级下拉导航菜单的方法

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代
jquery实现具有收缩功能的垂直导航菜单

本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>垂直导航菜单</title> <style type="text/css"> body{ margin:0; padding:0 0 12px 0
jQuery纵向导航菜单效果实现方法

本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $
基于jquery实现导航菜单高亮显示（两种方法）

项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
jQuery 实现侧边浮动导航菜单效果

单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off
原生js和jquery分别实现横向导航菜单效果

本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,供大家参考,具体内容如下原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩.并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果. 开始用javascript进行编写: 首先在之前水平方向的导航栏上进行操作,将第一栏和选中栏的样式只改变为背景变黑色,文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;} 之后开始写j
jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code
jQuery实现简洁的导航菜单效果

本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem indexNavItem&
jQuery实现个性翻牌效果导航菜单的方法

本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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/xh

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

相关推荐

随机推荐