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.717760.com-安徽体彩ll选5| www.866086.com-5星彩app-| www.952393.com-彩乐乐广东11选五| 网易彩票www.36788y.com| www.195875.com-河北快三走勢| www.29fs.com-彩铅画海底世界| www.bb09.cc-江苏老快三下载安装| www.365874.cc-体彩七星彩预测推荐| www.08289.cc-甘肃快三qq群| www.87796.cc-彩票站有假的吗| www.613332.com-江苏快三中大奖| www.51es.com-一分一期的彩票| www.241682.com-彩票2元app-| www.kg63.com-福彩中奖号码| www.q23.cc-江苏快三二不同推荐| www.559027.com-易发彩票官网| www.676509.com-l彩票开奖-| www.802369.com-彩友多app下载| www.890688.com-50倍率彩票-| www.960234.com-福彩代购-| 中国福利彩票www.33588o.com| www.ir68.com-竞彩分析推荐| www.zo32.com-彩吧彩报图-| www.093006.com-全天重庆彩计划飞鹰| www.650908.com-水彩画画教程| www.18cx.com-福彩3口走势图| www.1875.xyz-神奇彩票选号法| www.280056.com-代玩彩票赚佣金| www.892589.com-大发快三辅助器| www.970262.com-ag彩數據-| www.80vf.com-南昌体育彩票站点| www.2659.com-竞彩足球竞彩报| www.280400.com-重庆时时彩计划网站| www.397935.com-点击彩是骗人的吗| www.538353.com-滴滴彩票官网| www.197272.com-查询彩票开奖结果| www.285390.com-快三跨度奖金表| www.390422.com-熊猫彩票诈骗| www.39tv.com-描写彩虹美的的词语| www.146996.com-全天时时彩计划万位| www.881218.cc-开私彩-| 尊彩会www.zch2.com| www.85151.cc-乐彩网犯法吗| www.720172.com-老王竞彩头条| www.806483.com-361官方彩票网| www.886599.com-福利彩票真假问题| www.953919.com-那个彩票靠谱| 大赢家彩票平台www.927150.com| www.mq46.com-內蒙古时时彩走势图| www.040647.com-博彩业推广是干什么| www.615428.com-失控的黑彩3| www.700091.cc-万彩网赌搏可追回吗| www.784219.com-众彩批发市场| www.868120.com-星期三彩票开什么奖| www.985580.com-福彩开奖分析预测| www.to6.com-抚州体彩中心| www.ss25.com-东方一分彩开奖直播| www.16zw.com-彩丰行怎么样| www.191.in-彩民村一心水之家| www.226406.com-河北11选五爱彩乐| www.317267.com-湖南省福彩兑奖中心| 金冠彩票www.49956x.com| www.ip59.com-竞彩500篮球| www.231913.com-湖北快三改版了吗| www.873870.com-查体育彩票中奖号码| www.ss92.com-小鹿彩票软件| www.33xx.com-局七星彩排列五| www.419.me-时时彩分分-| www.3647.vip-保定体彩彩票站转让| www.9507.vip-关于彩票的问题| www.68912.cc-安徽快三双色球开奖| www.557030.com-简单水彩抽象画| www.637955.com-彩八仙人工计划验证| www.07lo.com-体育彩票返奖率| www.84ed.com-花生彩票是真的吗| www.2214.cm-牛彩蓝琪儿断组| www.257861.com-购彩网下载-| www.811983.com-体彩竞彩店转让设备| www.892982.com-彩票app所有网站| www.970948.com-中国福彩和体彩区别| www.kr98.com-快三是哪里发行的| www.024645.com-福彩积分卡网| www.560101.com-彩票百分百计划网| www.636285.com-喷纸彩虹机-| www.11ac.com-时时中彩票公平公正| www.120586.com-吉林快三全天计划表| www.693557.com-一分钟江苏快三平台| www.778089.com-分分彩送彩金| www.896884.com-广西彩票下载| www.967781.com-彩票3d连线图| www.cp847.com-贵州快三开奖结果等| www.mi86.com-新时时彩宝典下载| www.00ss.com-买彩票的人少了| www.081054.com-大乐透专家彩票擂台| www.616747.com-体彩排3跨度振幅表| www.690129.com-新彩票软件下载| www.771984.com-东方彩票网址| www.882375.com-英国5分彩开奖结果| www.964982.com-微彩票agg-| 500彩票www.349277.com| www.hg13.com-彩票在线万能倍投器| www.006579.com-好彩246123-| www.532240.com-七星彩怎样算是中奖| www.635389.com-星光购彩票官网平台| www.725389.com-如何投诉彩票外围| www.798068.com-火箭彩娱乐-| www.871068.com-彩票计算器下载| www.958312.com-福彩3d百家号| 凤凰VIPwww.www.fh7577.com| www.ur3.cc-快三预测软件准吗| www.px29.com-彩民堂app下载| www.14hm.com-体彩任-| www.676.la-美人鱼彩票网址| www.4398.xyz-福彩3d精确八卦图| www.9737.cm-彩宝网是正规的吗| www.63111.com-365足彩软件| www.690014.com-足彩14场星相图| www.770992.com-分分彩智能计划软件| www.871528.com-香港彩富网正版资料| www.942284.com-投注彩票兼职是真的| www.995755.com-竞彩冷热数据| www.ul7.com-江苏快三倍投必死| www.pv09.com-美国彩票23亿| www.35.vip-中体彩排五-| www.098993.com-快三彩票怎么下载| www.du91.com-五星彩票app| www.p10.net-附近体彩-| www.000403.com-万彩动画大师破解| www.073180.com-727彩票官网| www.136596.com-福彩3d中彩网字迷| www.927625.com-大掌柜彩票下载安装| www.977975.com-快三能赢钱-| www.07sh.com-刚力彩芽男-| www.64iu.com-乐博彩票合法吗| www.882722.com-乐猫彩票注册| www.kh04.com-玩转双色球彩友沙龙| www.c63.cn-福彩开奖号3d| www.654747.com-七星彩图规欣赏| www.768995.com-亚博彩票网-| www.885043.com-9号彩票网网址| www.954625.com-外国网上彩票| 网易彩票www.095wy.com| www.91352.cc-好彩柠檬薄荷双爆珠| www.803669.com-七星彩算组技巧| www.876208.com-福彩世界网址下载| www.928528.com-福彩3d出号规律| www.980599.cc-百盈彩票是真的吗| www.fs83.com-五分快三免费下载| www.tj06.com-江苏体彩玩法介绍| www.8or.com-买彩票还债-| www.172513.com-新韩国快三开奖结果| www.367308.com-体彩一等奖-| www.452447.com-临沂体彩大奖得主| www.bk82.com-彩票106cc苹果| www.142438.com-爱乐彩票app下载| www.215111.com-吉林快三预测计划| www.277038.com-快三猜一个号| www.394857.com-今天那些彩票开奖| www.964035.com-彩吧图第三版答案| 68彩票www.68682j.com| www.dk04.com-跟着老师买彩票| www.78767.cc-亮彩足球计算器| www.025214.com-所有彩种-| www.537811.com-彩色宝石名称|