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天

知道了
百盈PK10 www.62350.com-全民福彩传销| www.524280.com-十二生肖是什么彩票| www.653025.com-动态澳彩-| www.754163.com-天天彩票停售| www.lu31.com-好彩36开奖查询| www.9324.loan-在马来西亚积宝彩票| www.582161.com-彩神应用软件违法吗| www.663618.com-乐彩网518直播| www.762399.com-足球竞彩网上店| www.3240.pro-阳光彩票注册地址| www.8945.cn-全彩3d福利动漫| www.55884.cc-六金彩票-| www.56571.com-成安彩票中大奖| www.67ld.com-三地新彩网字谜| www.224433.com-如何提高快三中奖率| www.307791.com-福利彩票时时彩| www.386839.com-6698彩票心水| www.525980.com-福彩3d选号公式| www.593512.com-体彩七位数随机中奖| www.664550.com-鼎隆刷彩平台靠谱吗| www.737508.com-七彩奖-| www.808550.com-丽彩集团有限公司| www.898138.com-彩吧彩票快3| www.962857.com-福彩三d今日字画谜| 凤凰彩票www.77802w.com| www.1409.shop-开乐彩下载-| www.507978.com-福利彩票3d直通车| www.630916.com-胜负彩竞猜对象| www.715359.com-竞彩九场-| www.799660.com-彩票白菜分享| www.887510.com-釉下彩颜料用什么调| 九州彩票www.www.6769a1.com| www.631829.com-七彩云南欢乐谷门票| www.707709.com-重庆福彩开奖结果| www.790697.com-福彩双色球摇号| www.872149.com-q彩客户端-| www.938389.com-买彩票犯罪-| www.ai56.com-福利彩票啥时间开奖| www.tq93.com-中国彩票预测一注准| www.438490.com-陕西省体彩兑奖流程| www.260959.com-彩票选号神器平台| www.9892.cn-汇丰彩票下载| www.2873.xyz-彩鄂公路-| www.8883.vip-竞彩足球中奖率高吗| www.235231.com-中国福彩预测下载| www.339342.com-深圳彩票中奖者| www.450518.com-七星彩中肚杀号平台| www.564155.com-北京福彩智能终端| www.670728.com-杭州竞彩店查询| www.12896.cc-运盛彩票今年坑| www.8478.cc-乐亿彩票可以提现吗| www.51598.com-青蛙彩网址-| www.93858.com-今日新鲜事福彩开奖| www.050841.com-微信里买快三赚钱| www.64549.com-下载体彩竞彩网站| www.8569.cc-体彩排五今日预测| www.30358.com-京东彩票网官网一| www.282533.com-幸运快三首页| www.411592.com-ios12原彩没了| www.974217.com-彩铅画花卉-| www.mg24.com-注册中彩网账户| www.653231.com-澳门星星彩官方网| www.90413.com-体育彩票扫码| www.095905.com-免费彩票预测软件| www.192356.com-彩6平台-| www.302880.com-河北福彩排列七奖池| www.392099.com-足彩8场-34关| www.531159.com-彩铅手绘-| www.557299.com-幼儿水彩创意画| www.633838.com-信特斯收购虹彩| www.2144.com-我在豪彩平台买彩票| www.06535.cc-投资彩票店要多少钱| www.55920.com-彩票170com| www.552073.com-爱彩乐官方是真的吗| www.683599.com-义乌体育彩票中心| www.817208.com-多彩宝下载-| www.le74.com-中彩彩票无法提现| www.0002.live-彩票位数一样的吗| www.292907.com-越南时时彩下载| www.070841.com-人人彩票推荐码| www.158881.com-龙江福利彩票双色球| www.292342.com-彩神uu-| www.388602.com-买彩票要买几个数字| www.588463.com-今天七星彩头尾| www.666468.com-新浪彩票必发行情| www.765130.com-彩甜糯333-| www.850734.com-买彩票什么时候截止| www.967666.cc-彩票网计划群| www.cp7277.com-吉林省快三赌博案例| www.069969.com-梦见彩票中奖号码| www.217392.com-五星彩开奖结果| www.4003.xyz-竞彩网怎么样| www.33510.com-足彩票19051| www.237576.com-福彩在线app下载| www.328096.com-微彩吧是真的吗| www.933565.com-全国优秀彩票站| www.071.win-宝利彩票网址| www.598086.com-万彩吧排列五预测| www.721732.com-中国体育彩票足球| www.802183.com-延吉彩票站出兑| www.904885.com-彩票站利润-| www.978825.com-雷好彩1预测| www.be05.com-体彩一等奖兑奖流程| www.zo92.com-足球竞彩网计算机| www.25cx.com-大富贵彩票-| www.0631.name-易彩下载下安装| www.7241.xyz-彩虹6号冷知识| www.4086.org-550彩票app-| www.597316.com-亚洲彩票网站是真的| www.668232.com-彩票在哪里买最好| www.726267.com-河北省体彩兑奖中心| www.784896.com-乐优炫彩ios下载| www.xq13.com-体彩十一选五软件| www.569350.com-天天彩票钱提不出来| www.643986.com-数学家算出彩票| www.960147.com-大资本彩票怎么样| www.cp2345.cc-百盈快三怎么玩| www.108573.com-跟计划买彩票赢钱了| www.415099.com-七彩建盏是什么材质| www.866544.com-昨天体彩出什么号| www.nd92.com-贵州快三规则| www.61vl.com-福彩3d妖精和差| www.2160.tv-除了福利彩票广告语| www.436559.com-网易彩票真实网址| www.559226.com-赤峰福彩中心马主任| www.2wv.cc-完美彩票官网下載| www.093518.com-北京朝阳彩票| www.996827.com-网易彩票机选大乐透| www.nn13.com-足彩反买-| www.299985.com-彩票走势图分析预测| www.436796.com-中国福彩官方下载| www.93bs.com-高频彩票网站| www.085092.com-苹果购彩软件下载| www.201299.com-易旺彩票app| www.792659.com-福彩待遇-| www.mo22.cc-彩金领取app| www.970266.com-七彩乐单式开奖| www.pm84.com-牛彩网收集胆图| www.cp468.com-安徽福彩官网| www.cp3918.com-湖北福彩快3| www.pj93.cc-河南彩票网-| 乐博彩票www.67258c.com| www.kl14.com-江苏彩票大乐透| www.r90.in-今天甘肃快三走势图| www.6770.biz-福彩3d新玩法介绍| www.888881.com-乐优彩票苹果版| www.002233.com-七乐彩九个号中4个| www.81ew.com-中国福利彩票积分| www.92968.cc-岩棉彩钢板价格表| www.134207.com-体彩26期开奖结果| www.062895.com-淘宝彩票网站| www.722765.com-彩票团队靠什么赚钱| www.991302.com-金彩网彩富网高手网| www.815038.com-易迅彩票下载安装| www.308508.com-万彩吧万彩吧| www.386262.com-3d彩宝贝专家杀号| www.496902.com-好彩频道怎么看| www.56266.cc-数字型彩票概率| www.982426.com-黑马时时彩计划网页| 500彩票网www.65707p.com| www.921021.com-1818彩票送彩金| www.o20.top-网络彩票怎么报警| www.44139.cc-彩专家时时彩| www.995908.com-竞彩加奖-|