经验分享程序开发文档资料数据资源其它资源

jQuery网站头部下拉导航特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网站头部下拉导航特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery网站头部下拉导航特效代码

HTML代码(index.html):

<!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=utf-8" />
<title>jQuery网站头部下拉导航</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery 1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ht.js"></script>

</head>

<body>
<div id="top_top">
<div class="logBox" style="position:fixed;_position:ablolute">
  <div class="login">
    &nbsp;<a href="#" target="_blank">用户登录</a> &nbsp;  <a href="#" target="_blank">免费注册</a>&nbsp;  <a href="#" target="_blank">政大首页</a>
    <div class="siderNav">
      <ul class="topmenu" clearfix="" id="jq_topmenu">
        <li class="weibo"> <strong> 微博 </strong>
          <div class="jq_hidebox"><iframe width="250" height="80" class="share_self"  

frameborder="0" scrolling="no" src="###"></iframe></div>
        </li>
        <li class="weixin"> <strong> 微信 </strong>
          <div class="jq_hidebox" style="display: none; ">
            <div class="wxht"> <b> 政大教育 </b> <span> 微信号:abcd1234 </span> </div>
          </div>
        </li>
        <li class="webnav"> <strong class="icon_arr"> 网站导航 </strong>
          <div class="jq_hidebox" style="display: none; ">
            <a href="javascript:;" onclick="SetHome(window.location)" class="red"
                  target="_self"> 设为首页 </a> <a class="red" target="_self" 

onclick="addCookie()" href="javascript:;"> 添加收藏 </a>
            <dl class="aSty01">
              <dt> <a href="/"> 考试资讯 </a> </dt>
              <dd> <a href="/"> 报考指导 </a> | <a href="/"> 招考信息 </a> | <a href="/"> 

考试快讯 </a> <br>
                <a href="/"> 职位查询 </a> | <a href="/"> 考试时间 </a> | <a href="/"> 时政

热点 </a> </dd>
              <dt> <a href="/"> 备考指导 </a> </dt>
              <dd> <a href="/"> 行测辅导 </a> | <a href="/"> 申论辅导 </a> | <a href="/"> 

面试辅导 </a> <br>
                <a href="/"> 备考技巧 </a> | <a href="/"> 名师指导 </a> | <a 

href="#"> 历年真题 </a> </dd>
              <dt> <a href="/"> 网站产品 </a> </dt>
              <dd> <a href="/"> 公考论坛 </a> | <a href="/"> 在线模考 </a> | <a href="/"> 

申论批改 </a> <br>
                <a href="/"> 在线答疑 </a> | <a href="/"> 照片调整 </a> | <a href="/"> 信息

预约 </a> </dd>
              <dt> <a href="/"> 培训大全 </a> </dt>
              <dd> <a href="/"> 面授课程 </a> | <a href="/"> 网校课程 </a> | <a href="/"> 

图书教材 </a> <br>
                <a href="/"> 直播课堂 </a> | <a href="/"> 公考讲堂 </a> | <a href="/"> 一对

一 </a> <br>
                <a href="/"> 更多&gt;&gt; </a> </dd>
            </dl>
          </div>
        </li>
        <li class="webnav" qxpp="" style="background:none"> <strong class="icon_arr"> 关于政大 </strong>
          <div class="jq_hidebox" style="display: none; " block;=""> <a 

href="#" target="_blank"> 政大简介 </a> | <a 

href="#" target="_blank"> 政大师资 </a> | <a 

href="#" target="_blank"> 政大视频 </a> <br>
            <a href="/" target="_blank"> 政大网校 </a> | <a href="/" target="_blank"> 政大

图书 </a> | <a href="#" target="_blank"> 网站地图 

</a> <br></div>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
</body>
</html>

JS代码(jquery-ht.js):

$(document).ready(function(){
	$(".closeParent").click(function(){
	$(this).parent().hide();
}
);
	//$('#mainNav a:first-child').addClass('nobg');
	$("ul.tabMenu li:first-child").addClass("current");
	$("div.tabContent article:first-child").show();
	/*$(".tabContent article").attr("id",function(){
	return "No" + $(".tabContent article").index(this)}
);
	$(".tabMenu li").hover(function(){
	$(this).addClass("current").siblings().removeClass("current");
	var c = $(".tabMenu li");
	var j = c.index(this);
	var objname = "No" + j;
	$("#"+objname).siblings().hide();
	$("#"+objname).fadeIn();
}
,function(){
}
);
	*/
$("ul.tabMenu li").each(function(index){
	$(this).hover(function(){
	var tabin = $(this);
	timeoutid = setTimeout(function(){
	tabin.addClass("current").siblings().removeClass("current");
	$(".tabContent article:eq(" + index + ")").fadeIn().siblings("article").hide();
}
,150);
}
,function(){
	clearTimeout(timeoutid);
}
);
}
);
	$("#tabMenu2 li:first-child").addClass("current");
	$("#tabContent2 article:first-child").show();
	$("#tabContent2 article").attr("id",function(){
	return "Noid" + $("#tabContent2 article").index(this)}
);
	$("#tabMenu2 li").click(function(){
	$(this).addClass("current").siblings().removeClass("current");
	var c = $("#tabMenu2 li");
	var j = c.index(this);
	var objname = "Noid" + j;
	$("#"+objname).siblings().hide();
	$("#"+objname).show();
}
);
	//20130131 topmenu$("#jq_topmenu li").hover(function(){
	$(this).addClass("hover").find("div.jq_hidebox").show();
}
,function(){
	$(this).removeClass("hover").find("div.jq_hidebox").hide();
}
);
	$('.list04 li:even').addClass('bgcolor');
	var _wrap=$('ul.mulitline');
	var _interval=4000;
	var _moving;
	_wrap.hover(function(){
	clearInterval(_moving);
}
,function(){
	_moving=setInterval(function(){
	var _field=_wrap.find('li:first');
	var _h=_field.innerHeight();
	_field.animate({
	marginTop:-_h+'px'}
,600,function(){
	_field.css('marginTop',0).appendTo(_wrap);
}
)}
,_interval)}
).trigger('mouseleave');
	var _wrap02=$('ul.mulitline02');
	var _interval02=2000;
	var _moving02;
	_wrap02.hover(function(){
	clearInterval(_moving02);
}
,function(){
	_moving02=setInterval(function(){
	var _field02=_wrap02.find('li:first');
	var _h02=_field02.innerHeight();
	_field02.animate({
	marginTop:-_h02+'px'}
,600,function(){
	_field02.css('marginTop',0).appendTo(_wrap02);
}
)}
,_interval02)}
).trigger('mouseleave');
	$('#jq_moreCity').hover(function(){
	$('#hideCity').slideDown(),$('#jq_moreCity span').addClass('hover');
	$("#tabContent2").hide();
}
,function(){
	$('#hideCity').hide(),$('#jq_moreCity span').removeClass('hover');
	$("#tabContent2").show();
}
);
	$('#jq_allschoolh').hover(function(){
	$('#jq_allschool').show();
}
,function(){
	$('#jq_allschool').hide();
}
);
	//$('#jq_menuArea li').hover(function(){
	$('#jq_menuArea div.boxHide').hide();
	$(this).addClass('corrent').find('div:first').fadeIn();
}
,function(){
	$(this).removeClass('corrent').find('div:first').hide();
}
);
	$("#jq_menuArea li").each(function(index){
	$(this).hover(function(){
	var tabin = $(this);
	timeoutid = setTimeout(function(){
	tabin.addClass("corrent").siblings().removeClass("corrent");
	$('#jq_menuArea div.boxHide').hide();
	tabin.find('div:first').fadeIn();
}
,150);
}
,function(){
	var tabin = $(this);
	clearTimeout(timeoutid);
	$('#jq_menuArea div.boxHide').hide();
	tabin.removeClass("corrent");
}
);
}
);
	$('#lessonNav dt,#lessonNav dd').show();
	$('#lessonNav dt.jq_dtview').hover(function(){
	$(this).addClass('corrent').find('div:first').fadeIn();
}
,function(){
	$(this).removeClass('corrent').find('div:first').hide();
}
);
	$("#lessonNav").delegate(".jq_close","click",function(){
	$("#lessonNav .boxHide").hide();
}
);
	$('#jq_menuArea li#a0').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/fenxiaoyincang.html');
}
);
	$('#jq_menuArea li#a1').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b1');
}
);
	$('#jq_menuArea li#a2').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b2');
}
);
	$('#jq_menuArea li#a3').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b3');
}
);
	$('#jq_menuArea li#a4').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b4');
}
);
	$('#jq_menuArea li#a5').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b5');
}
);
	$('#jq_menuArea li#a6').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b6');
}
);
	$('#jq_menuArea li#a7').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b7');
}
);
	$('#jq_menuArea li#a8').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b8');
}
);
	$('#jq_menuArea li#a9').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b9');
}
);
	$('#lessonNav dt.dt02').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b10');
}
);
	$('#lessonNav dt.dt03').hover(function(){
	$(this).find('div').load('/templets/default/2012moban/menuArea.html #b11');
}
);
	$('#subject dt').hover(function(){
	$(this).find('div').fadeIn();
}
,function(){
	$(this).find('div').hide();
}
);
	$.fn.WIT_SetTab=function(iSet){
	iSet=$.extend({
	Nav:null,Field:null,K:0,CurCls:'cur',Auto:false,AutoTime:9000,OutTime:100,InTime:150,CrossTime:60}
,iSet||{
}
);
	var acrossFun=null,hasCls=false,autoSlide=null;
	function changeFun(n){
	iSet.Field.filter(':visible').fadeOut(iSet.OutTime,function(){
	iSet.Field.eq(n).fadeIn(iSet.InTime).siblings().hide();
}
);
	iSet.Nav.eq(n).addClass(iSet.CurCls).siblings().removeClass(iSet.CurCls);
}
changeFun(iSet.K);
	iSet.Nav.hover(function(){
	iSet.K=iSet.Nav.index(this);
	if(iSet.Auto){
	clearInterval(autoSlide);
}
hasCls = $(this).hasClass(iSet.CurCls);
	acrossFun=setTimeout(function(){
	if(!hasCls){
	changeFun(iSet.K);
}
}
,iSet.CrossTime);
}
,function(){
	clearTimeout(acrossFun);
	if(iSet.Ajax){
	iSet.AjaxFun();
}
if(iSet.Auto){
	autoSlide = setInterval(function(){
	iSet.K++;
	changeFun(iSet.K);
	if (iSet.K == iSet.Field.size()){
	changeFun(0);
	iSet.K=0;
}
}
,iSet.AutoTime)}
}
).eq(0).trigger('mouseleave');
}
$(document).WIT_SetTab({
	Nav:$('#jq_scrlFocusList>li'),Field:$('#jq_scrlFocusCon>li'),Auto:true,CurCls:'hover'}
);
	$('#map section').hover(function(){
	$(this).addClass('index998').find('aside').fadeIn().addClass('index999');
}
,function(){
	$(this).removeClass('index998').find('aside').fadeOut().removeClass('index999');
}
);
	//��У��ҳ������var $bodyh=$(document).height();
	var $coverdiv=$('<div id="coverdiv"></div>');
	$("#coverdiv").css({
	'height':$bodyh+'px'}
);
	$("#jq_closeparent").click(function(){
	$(this).parent().hide();
	$("#jq_btnshow").show();
	$("#coverdiv").hide();
}
);
	$("#jq_btnshow").click(function(){
	$("#fixgk2013").show();
	$("#coverdiv").show().css({
	'height':$bodyh+'px'}
);
	$("#jq_btnshow").hide();
}
);
	//20121029��У�������ر�//$("#httopad span").click(function(){
	$("#httopad").hide();
	$(".logBox").css({
	position:"fixed"}
);
	$(".proNav").css({
	"padding-top":"31px"}
);
	$("#gg_full").css({
	top:"31px"}
);
}
);
	$("#httopad span").click(function(){
	$("#httopad").hide();
	$(".logBox").attr("style","position:fixed;
	_position:ablolute");
	$(".proNav").attr("style","padding-top:31px;
	_padding-top:0");
	$("#gg_full").css({
	top:"31px"}
);
}
);
	$(".jq_morecity02").hover(function(){
	$(this).find("span").show();
}
,function(){
	$(this).find("span").hide();
}
);
}
);
	function MM_jumpMenu(selObj,restore){
	window.open(selObj.options[selObj.selectedIndex].value);
}
function djcishu(id,mid){
	alert(mid);
	//plg�����20120801 var sjs=Math.random();
	$.ajax({
	type:"GET",//dataType:'json',//async:false,url:"http://www.htexam.com/plus/count1.php",data:"view=yes&aid="+id+"&mid="+mid+"&sjs="+sjs,success:function(data){
	alert(data);
	$("#cishu").html(data);
}
}
);
	//plgend}
//setTimeout("showNotis()",10000);
	function showNotis(){
	document.getElementById('notis').style.display="none";
}
function SetHome(url){
	if (document.all){
	document.body.style.behavior='url(#default#homepage)';
	document.body.setHomePage(url);
}
else{
	alert("����,�����������֧���Զ�����ҳ��Ϊ��ҳ����,�����ֶ�������������ø�ҳ��Ϊ��ҳ!");
}
}

CSS代码(css.css):

@charset "gb2312";/* CSS Document */
*{margin:0;padding:0;font-family:"΢���ź�";font-size:12px;}
.left{float:left;}
.right{float:right;}
img{display:block;border:0;}
a{color:#111;text-decoration:none;}
a:hover{color:#1189E6;}
li{list-style:none;}
.clear{clear:both;}
#top_top{height:31px;}
.logBox{position:fixed;_position:absolute;top:0;_top:expression(documentElement.scrollTop+0+'px');left:0;background:#f9f9f9;height:31px;width:100%;box-shadow:0 1px 1px #ddd;z-index:9999;}
.siderBar01{float:right;width:280px;}
.login{position:relative;width:980px;background:#f9f9f9;height:31px;margin:0 auto;padding:0 10px;_padding-top:4px;color:#666;line-height:30px;}
.login input,.login select{margin-top:-1px;_margin-top:1px;vertical-align:middle;}
.login form a{color:#666;}
.login form a:hover{color:#c00;}
.login label input{width:80px;height:14px;}
.login .siderNav{position:absolute;right:0;top:0;width:300px;_width:310px;}
.btnLogin{width:40px;height:20px;border:none;cursor:pointer;color:#666;}
.btnLogin:hover{color:#333;}
.topmenu li,.topmenu strong.icon_arr,.topmenu li.weibo strong,.topmenu li.weixin strong,.topmenu .focusht,.topmenu .wxht{background:url(../images/topmenu.gif) no-repeat;}
.topmenu{margin-top:5px;line-height:22px;color:#333;}
.topmenu li{float:left;position:relative;background-position:right top;}
.topmenu strong{display:block;position:relative;height:25px;padding:0 10px;font-weight:normal;cursor:default;z-index:20;}
.topmenu .jq_hidebox{display:none;position:absolute;left:0;top:25px;padding:10px;border:1px solid #dfdfdf;box-shadow:0 1px 2px #ccc;background:#fff;z-index:10;}
.topmenu li.hover strong{border:1px solid #dfdfdf;border-bottom:none;background-color:#fff;}
.topmenu li.hover{margin:-1px -1px 0 -1px;}
.topmenu li.htphone{_width:83px;}
.topmenu li.htphone .jq_hidebox{width:71px;padding:1px 5px 0;}
.topmenu .htphonebox{padding:5px;border-top:1px solid #f3f3f3;}
.topmenu strong.icon_arr{padding-right:23px;background-position:right -23px;}
.topmenu li.hover strong.icon_arr{background-position:right -46px;}
.topmenu li.weibo{_width:65px;}
.topmenu li.weibo strong{padding-left:29px;background-position:0 -75px;}
.topmenu li.weibo .jq_hidebox{width:250px;}
.topmenu li.weixin{_width:66px;}
.topmenu li.weixin strong{padding-left:30px;background-position:0 -46px;}
.topmenu li.webnav{_width:83px;}
.topmenu li.webnav .jq_hidebox{width:180px;left:-119px;}
.topmenu li.qxpp{background:none;}
.topmenu li.qxpp .jq_hidebox{width:160px;left:-99px;}
.jq_hidebox a{color:#666}
.topmenu li.nojq{margin:0;background:none;}
.topmenu .focusht{display:block;width:155px;height:50px;background-position:0 -106px;text-indent:-100em;overflow:hidden;}
.topmenu .wxht{height:72px;width:80px;padding-left:80px;background-position:0 -177px;}
.topmenu .wxht span{display:inline-block;padding-top:3px;color:#666;}
.aSty01{margin:0;}
.aSty01 dt{margin-top:6px;padding:5px 0 2px 0;border-top:1px solid #e5e5e5;}
.aSty01 dd{margin:0;}
.aSty01 dd a{color:#666;}
.aSty01 dd a:hover{color:#c00;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
665.98 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
665.98 KB
立即下载
巫倩娣英
了解
打赏作者 鼓励作者
Html Js 菜单导航特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章