<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SCRIPTS -->
<script src="jQuery/jquery-1.9.1.min.js"></script>
<script src="js/jquery.zlight.menu.1.0.min.js"></script>
<!-- STYLES -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/zlight.menu.css" media="screen">
<title>jQuery页面滚动顶部悬浮导航</title>
<script>
$(document).ready(function(){
$('#zlight-nav').zlightMenu();
});
</script>
</head>
<body>
<div class="container" id="main">
<div class="row">
<div class="col-lg-12">
<h4>Default:</h4>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<nav id="zlight-nav">
<ul id="zlight-main-nav">
<li class="zlight-active"><a href="#">Home</a></li>
<li class="zlight-dropdown">
<a href="#">Blog <i class="icon-angle-down"></i></a>
<ul class="zlight-submenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li class="zlight-dropdown">
<a href="#">Pages <i class="icon-angle-down"></i></a>
<ul class="zlight-submenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="zlight-dropdown">
<a href="#">Dropdown <i class="icon-angle-right"></i></a>
<ul class="zlight-submenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="zlight-dropdown">
<a href="#">Dropdown <i class="icon-angle-right"></i></a>
<ul class="zlight-submenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- MOBILE NAV -->
<div id="zlight-mobile-nav">
<span>Menu</span>
<i class="icon-reorder zlight-icon"></i>
<select></select>
</div>
</nav> <!-- nav close -->
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col-lg-12">
<h4 class="zlight-hhh">jQuery页面滚动顶部悬浮导航</h4>
</div>
</div>
<div class="row" style="margin-bottom:900px;">
<div class="col-lg-12">
<p>水平导航菜单是一个简单的响应性导航插件，与媒体查询一起工作，可以方便地转换为移动设备。</p>
<p><h4 style="margin-top:30px;">特征:</h4>
<ul>
<li>响应式</li>
<li>使用简单</li>
<li>跨浏览器</li>
<li>完全可定制的</li>
<li>Retina ready (Font Awesome integrated)</li>
<li>Min version: 5kb</li>
</ul>
</p>
<p>页面向下滚动查看效果</p>
</div>
</div>
</div> <!-- main close -->
</div> <!-- container close -->
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<div style="text-align:center;">
<p>更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
jQuery顶部悬浮多级自适应屏幕导航菜单
需积分: 50 7 浏览量
2018-09-10
10:32:13
上传
评论
收藏 657KB ZIP 举报
jQuery顶部悬浮多级导航菜单.zip （17个子文件） 
jQuery顶部悬浮多级导航菜单 jQuery 
jquery-1.9.1.min.js 90KB
index.html 4KB images 
2.jpg 250B 1.jpg 188B js jquery.zlight.menu.1.0.min.js 4KB respond.min.js 4KB bootstrap.min.js 27KB font 
fontawesome-webfont.svg 434KB fontawesome-webfont.woff2 75KB fontawesome-webfont.eot 162KB FontAwesome.otf 132KB fontawesome-webfont.woff 96KB fontawesome-webfont.ttf 162KB css bootstrap.min.css 80KB font-awesome.min.css 22KB zlight.menu.css 3KB style.css 512B资源评论
