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天

知道了
彩票123现在叫什么名字 www.130.xyz-这个体育彩票下载| www.804433.com-下期体彩七星彩预测| www.9824.cc-古建彩绘怎样立粉| www.126784.com-易网竞彩网-| www.281708.com-时时彩133公式| www.437067.com-mega美国彩票| www.613289.com-彩票直通车安全吗| www.687423.com-福彩宣传语一等奖| www.835831.com-中彩那天生字教学| www.829728.com-国家彩票官方手机网| www.948768.com-玩分分快三的技巧| www.bz46.com-福彩快三怎么加盟| www.09605.com-福彩3g资讯-| www.119716.com-易发彩网-| www.365933.com-山东福彩双色球单式| www.558993.com-赤峰福彩中心主任| www.777729.com-小财神3d彩票论坛| www.913481.com-易中彩票下载| www.fi39.com-一分钟快三倍投计划| www.568452.com-微彩宝真的假的| www.692739.com-6678彩软件下载| www.974612.com-体彩排列三精选列表| www.gm79.com-内蒙福彩下载| www.24no.com-七星彩守号30年| www.9472.cc-上海彩钢房| www.94776.com-化妆品彩妆店铺名字| www.131593.com-重庆秀山结婚彩礼钱| www.261610.com-六开彩-| www.397354.com-掌游彩中奖截图| www.551922.com-王者彩票下载安装| www.410140.com-嘉兴竞彩网点| www.551773.com-购彩网是什么东西| www.631600.com-广东彩王彩图库| www.698079.com-河北快三投注计划| www.805058.com-彩票了3d怎么选号| www.887382.com-下彩网旧版本下载| www.98181.cc-体彩6?1-| www.105573.com-109彩票app-| www.966612.com-时时彩人工计划员| www.jc36.com-福利彩票手机购彩版| www.271.red-压模彩色地坪材料| www.6776.xyz-足彩14場比分直播| www.008642.com-159彩票网安全吗| www.129165.com-彩虹旗泡泡弟论坛| www.208303.com-网投彩票是什么意思| www.288388.com-时时彩屠龙-| www.366428.com-日本彩铅品牌绿辉| www.450018.com-篮彩竞猜分析| www.558149.com-大赢家彩票怎么玩| www.670815.com-色彩属性-| www.759152.com-满堂彩彩票注册| www.838857.com-9亿彩票平台下载| www.914971.com-凤彩网安全么| 购彩之家www.gczj1.com| www.es86.com-京彩江苏快三| www.50011.cc-华宇彩票吧-| www.01wj.com-彩虹色暗恋-| www.382632.com-宝彩票-| www.771118.com-重庆时时彩图片| www.966802.com-快三中奖几天有效| 淘彩票www.tcp969.com| www.xd28.com-彩票中奖号码生成器| www.30co.com-多肉彩铅画入门教程| www.1960.date-开体彩店去那里申请| www.209965.com-一分快三如何玩| www.319230.com-爱彩票软件下载| www.200018.com-彩票往期开奖| www.298258.com-上海快三最多连几龙| 金冠彩票www.49956l.com| www.753951.com-网络彩票坑死了| www.917013.com-500彩骗局-| www.080656.com-彩八仙手机客户端| www.958674.com-彩票年后啥时候开始| www.oo66.com-中彩网走势图大乐透| www.278652.com-体彩独胆预测| www.443198.com-在线购买彩票软件| www.129221.com-昨天体彩开奖号| www.636733.com-与彩虹有关的儿歌| www.818609.com-彩票开奖直播网| www.949716.com-160彩票靠谱么| www.798.org-七乐彩杀号集锦5| www.25839.cc-电玩城彩票机攻略| www.053461.com-彩牛网-| www.175163.com-福彩快三网站合作| www.303203.com-彩虹5无人机| www.436377.com-湖南体彩赛车频道| www.551783.com-众购乐彩票-| www.627676.com-彩809彩票软件| www.36549.cc-澳门彩票官网足彩| www.088761.com-福彩通平台是真的吗| www.260262.com-中国福彩网快乐十二| www.365537.cc-水溶彩铅用什么纸| www.566023.com-彩票摇奖视频| www.677334.com-彩娃彩票客服电话| www.793013.com-安阳福彩中心| www.901393.com-甘肃115爱彩乐| 彩皇网www.61500.cc| www.tv70.com-彩票合买大厅| www.254078.com-华宇彩票注册| 网易彩票www.084wy.com| www.52tt.com-49q·cc特彩吧| www.44808.com-彩票中一等是真的吗| www.067312.com-十大黑彩来平台| www.219764.com-众彩网牛远志| www.698521.com-各省快三开奖| www.870824.com-福彩36选7走势图| www.lp14.com-中彩吧2020彩票| www.69ym.com-彩虹六号压枪技巧| www.276912.com-深圳买福利彩票中奖| www.491789.com-彩票009下载| www.588883.com-七星彩开奖什么频道| www.662951.com-彩票天天选四开奖| www.748567.cc-黑彩娱乐平台| www.833099.com-体彩二维码有效期| www.930793.com-竞彩玩法-| www.996726.com-博友彩软件下载| www.gw93.com-彩运8网站合法吗| 如意彩票www.565516.com| www.yu98.com-山东省体彩兑奖流程| www.68zm.com-全球博彩公司网站| www.05548.com-顺发彩票官方网站| www.188074.com-快三单双全天计划| www.338447.com-快三投注计算表格| www.436563.com-体彩5800万-| www.522099.com-体彩授权自动售彩机| www.586308.com-人人中彩票进不去| www.652903.com-乐讯圆梦七星彩早版| www.324662.com-福彩官员-| www.399512.com-海南七星彩日日升图| www.82558.com-九八彩票网是真是假| www.186785.com-快三怎么算中奖规则| www.259067.com-福彩双色球选号助手| www.404041.com-金鱼彩铅画图片| www.535255.com-彩票五位中奖号码| www.717056.com-彩铅画能保存多少年| PK彩票www.230757.com| www.pe81.com-268彩票下载| www.094953.com-彩票作弊视频| www.55405.com-彩票要几个数字| www.900884.com-赢钱彩官网-| www.255111.com-网络十大平台彩票| www.730591.com-唯彩会开奖结果| www.150324.com-彩票818正规吗| www.355783.com-德国彩票所得税| www.19ez.com-福利彩票上期开奖| www.4194.biz-宝乐彩票登录官网| www.2020.me-如何爱快三二同号| www.17790.cc-竞彩软件下载| www.99396.com-时时彩计算网| www.121326.com-体彩大乐透选号| www.225927.com-福彩快3怎样追回扑| 金冠彩票www.49956q.com| www.rb86.com-时时彩qq-| www.65wh.com-彩金高反水-| www.876.red-彩铅儿童画基本功| www.3955.cn-睢宁双沟彩票中奖| www.90334.com-双色球机选买彩票| www.086935.com-官方彩福彩票| www.147844.com-尊皇彩票平台| www.208705.com-体彩竞彩足球胜平负| www.231751.com-3d中彩网首页| www.315011.com-七彩云盒官网下载| www.387253.com-手机膜图片彩色| www.701436.com-足彩比分预测技巧|