QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jquery实现顶部固定导航下拉菜单代码

原创商用 jquery实现顶部固定导航下拉菜单代码

jquery 实现二级导航以及导航浮动特效,二级下拉菜单,以及页面滚动导航浮动顶部。电话号码属于特殊字体,如需要 必须单独引入字体,不需要删除即可。jquery superslide开发,均有备注,参数可修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<div class="subMenu ui-header">
	<div class="ui-header-box">
		<a href="index.html" class="ui-header-logo">
			<img src="images/logo.png" alt="">
		</a>
		<div class="ui-header-tel">
			<a href="javascript:;">400-660-xxxx</a>
		</div>
		<div class="ui-header-qq">
			<a href="#">QQ咨询</a>
		</div>
		<div class="ui-header-nav">
			<dl>
				<dd class="on">
					<h3>首页</h3>
				</dd>
				<dd>
					<h3>网站建设</h3>
					<ul>
						<li>
							<a href="#">经典型网站</a>
						</li>
						<li>
							<a href="#">营销型网站</a>
						</li>
						<li>
							<a href="#">电商型网站</a>
						</li>
						<li>
							<a href="#">外贸型网站</a>
						</li>
						<li>
							<a href="#">响应式网站</a>
						</li>
					</ul>
				</dd>
				<dd>
					<h3>建站报价</h3>
				</dd>
				<dd>
					<h3>客户案例</h3>
				</dd>
				<dd>
					<h3>全国网点</h3>
				</dd>
				<dd>
					<h3>关于我们</h3>
					<ul style="top:75px;">
						<li>
							<a href="#">关于我们</a>
						</li>
						<li>
							<a href="#">企业文化</a>
						</li>
						<li>
							<a href="#">发展历程</a>
						</li>
					</ul>
				</dd>
			</dl>
		</div>
	</div>
</div>
<div class="banner-bg"></div> <!-- 蓝色背景图  可删除   -->
<div style="height:1000px;"></div>

<script type="text/javascript">
	
	jQuery(".ui-header-nav").slide({
		type: "menu",
		titCell: "dd",
		targetCell: "ul",
		delayTime: 0,
		defaultPlay: false,
		returnDefault: true
	});

	$(document).ready( function() {

		$('.subMenu').smint({

			'scrollSpeed' : 1000

		});

	});

	(function() {
			$.fn.smint = function(options) {
				$(this).addClass('ui-header')
				var settings = $.extend({
					'scrollSpeed ': 500
				}, options);
				return $('.ui-header a').each(function() {
					if (settings.scrollSpeed) {
						var scrollSpeed = settings.scrollSpeed
					}
					var stickyTop = $('.ui-header').offset().top;
					var stickyMenu = function() {
						var scrollTop = $(window).scrollTop();
						if (scrollTop > stickyTop) {
							$('.ui-header').css({
								'position': 'fixed',
								'top': 0
							}).addClass('fixed');
						} else {
							$('.ui-header').css({
								'position': 'absolute',
								'top': stickyTop
							}).removeClass('fixed');
						}
					};
					stickyMenu();
					$(window).scroll(function() {
						stickyMenu();
					});
					$(this).on('click', function(e) {
						var selectorHeight = $('.ui-header').height();
						e.preventDefault();
						var id = $(this).attr('id');
						var goTo = $('div.' + id).offset().top - selectorHeight;
						$("html, body").animate({
							scrollTop: goTo
						}, scrollSpeed);
					});
				});
			}
		}
	)();

</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
全红彩票 www.007291.com-福利彩票店几点下班| www.634292.com-新德里彩票必中算法| www.800816.com-福彩3d今天试机号| www.956705.com-福利彩票模拟选号器| www.jf47.com-体育彩票怎么兑奖| www.018606.com-快开彩票软件| www.109342.com-金利彩票app| www.985374.com-老时时彩下载手机版| www.da09.com-彩票店如何过户吗| www.100057.cc-旋乐彩票-| www.645322.com-珐琅彩价格-| www.45552.com-彩票试机号3b| www.129350.com-体彩排五开奖号| www.554563.com-肇庆市福利彩票官网| www.95yh.cc-鸿彩灯光灯库下载| www.6579.top-下载彩民之家app| www.31202.com-cp12彩-| www.94211.com-浅谈福彩文化建设| www.114822.com-京东彩票平台注册| www.cai598.com-福建快三555| www.85qs.com-亚盘足彩购买软件| www.970784.com-数学天才破解彩票| www.65876.com-内蒙11选5彩票| www.187059.com-玩黑彩一定输的原因| www.919913.com-租用彩票平台挣钱吗| www.022578.com-苹果系统重庆时时彩| www.250525.com-爱彩彩票合法吗| www.461253.com-3d福彩做号技巧| www.717906.com-彩客网71212| www.208109.com-大中华彩票站| www.440146.com-苏快三玩法-| www.651678.com-棋牌彩票娱乐| www.020460.com-彩35网址-| www.296767.com-凤凰彩票开奖网| www.400831.com-体彩七星彩试机号| www.495398.com-彩漂液对孕妇的危害| www.54866.cc-复式彩票奖金计算器| www.038833.com-双色球彩票中奖情况| www.92698.com-九亿彩票网站注册| www.168679.com-内蒙古快三网| www.90fr.com-福彩3d校长预测图| www.867188.com-彩票怎么知道中奖了| www.948112.com-好彩网预测3d福彩| www.yp1.com-大神怎么玩高频彩| www.781108.com-沉迷重庆时时彩| www.956116.com-金帝网络彩票| www.oc80.com-c3彩票-| www.789103.com-广西快三外围有假嘛| www.953059.com-九州彩-| www.295429.com-彩吧全图-| www.817275.com-ig传统彩是真的吗| www.918491.com-彩票外围网站排行| www.981886.com-爱彩人app下载| www.ae14.com-下彩彩票官网| www.035318.com-彩票电视软件| www.528885.com-日干支测彩出数法| www.8693.xyz-预测快三网址| www.569513.com-吉林快三半顺多少期| www.662785.com-地下彩开奖-| www.255467.com-快三预测一定牛北京| www.c66.top-百宝彩app-| www.938687.com-福彩通平台是真的吗| www.563221.com-优博时时彩平台网址| www.360774.com-新彩票安卓版下载| www.489258.com-彩工网下载-| www.579159.com-博乐彩票注册| www.651068.com-儿童简单水彩| www.727020.com-彩福网赚-| www.793181.com-网上投彩赌博吗| www.866748.com-今天彩票出什么| www.005164.com-今天福彩体彩开机号| www.201139.com-3分快三全天计划| www.40cs.com-七星彩300期| www.87998.cc-彩民网彩票资料大全| www.055182.com-霸气的彩票平台名字| www.132919.com-彩色混凝土压模材料| www.205290.com-快三挣钱方法| www.869586.com-够力七星体彩下载| www.93992.cc-快三最容易出的号码| www.333849.com-湖北快三网站| www.833067.com-彩票选号小程序| www.923561.com-秒速快三技巧| www.8937.top-美高梅注册彩票| www.4713.vip-体彩终端机-| www.050087.com-今天彩票-| www.171745.com-分分快三全天计划| www.1080.xyz-天天快三群-| www.6356.vip-统一彩票软件| www.21500.cc-越南彩票官网| www.67278.cc-忻州福彩中心地址| www.087051.com-幸运彩票合法的吗| www.522282.com-富彩网app-| www.51597.com-牛彩app下载| www.15317.cc-时时彩投资方案| www.199642.com-五分彩开奖官方| www.289539.com-天天购彩网-| www.447556.com-福彩票三d试机号| www.806803.com-好彩1现场开奖结果| www.43zo.com-精彩的精的意思| www.2028.date-天下好彩报刊大全| www.6rw.com-彩票自动下单软件| www.8227.cc-快三左转基础教学| www.745877.com-竞彩网上购彩| www.9748.biz-苏会文七星彩预测| www.59sq.com-体彩为什么限售| www.7995.win-早教彩虹伞亲子游戏| www.170718.com-极速快三稳赚| www.019488.com-福彩网注册码| www.511248.com-带彩虹有内涵的网名| www.336818.com-3d彩票有几种玩法| www.wa28.com-快三和值012| www.sc13.com-河南褔利彩票| www.352881.com-百度台湾福星彩现场| www.14395.com-海南七星彩怎么赔| www.53xu.com-贵阳彩票领奖| www.1452.org-足彩任选九贴吧| www.994401.com-五百彩票是正规的吗| www.qz15.com-足彩有一个必胜公式| www.442050.com-旺彩双色球怎么购彩| www.894733.com-优彩网官网登录| www.070286.com-彩亿计划-| www.249734.com-彩票顶呱刮app| www.781647.com-红牛彩票合法吗| www.900933.com-小妮姑玩彩独胆| www.974503.com-体彩大乐透预测号| 万彩网www.wcp686.com| www.my78.com-2019彩票店前景| www.25vu.com-淘彩官网下载| www.1962.wang-彩吧图库红五牛材网| www.813411.com-粤淘彩是骗局揭秘| www.897031.com-宏发彩票-| www.968273.com-马云买的彩票| www.xr8.com-长春快三吧-| www.739917.com-懂彩帝app安卓版| www.850825.com-大发时时彩能不能玩| www.488900.com-和乐彩票平台| www.544.date-福彩3d预测p3| www.61711.com-大胜彩票炸金花软件| www.7799.vip-足彩研究心得| www.721062.com-新②彩票论坛白小姐| 金掌柜www.83993n.com| www.756839.com-10cp彩票-| www.55432.com-福彩3d真假-| www.27rf.com-时时彩上头| www.8261.cn-快三所有二同号| www.635626.com-彩虹六号steam| www.299632.com-彩123彩票-| www.33860.com-新浪彩票必发指数| www.996883.com-体彩大乐透机选一注| www.22712.cc-流行彩铃-| www.77227.cc-105彩票不给提现| www.033113.com-网上500万彩票网| www.109802.com-足彩单场比分直播| www.165503.com-省福彩发行中心待遇| www.107621.com-2018年彩票开奖| www.816644.com-我一夜暴富彩票股票| www.900094.com-288彩票软件| www.964274.com-彩票滚雪球怎么玩法| www.cp6728.com-分分快三合法吗| www.106725.com-新加坡快三是真是假| www.4466.me-彩薇花生产厂家| www.590064.com-福彩快三一共多少注| www.438329.com-北京五分彩开奖记录| www.533204.com-七星彩中奖最高纪录|