JS特效第134弹：jQuery响应式全屏背景图片导航菜单特效

作者：我家自动化 | 2024-02-16 05:11:37

踩

jQuery响应式全屏背景图片导航菜单特效，先来看看效果：

一部分关键的代码如下：


<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link href='http://fonts.useso.com/css?family=PT+Sans:400,700|Merriweather:400italic,400' rel='stylesheet' type='text/css'>
 
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script language="javascript" src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- .project-container -->
<script language="javascript" src="js/jquery-2.1.1.js"></script>
<script language="javascript" src="js/main.js"></script> 
<!-- Resource jQuery -->
<title>jQuery响应式全屏背景图片导航菜单特效</title>
</head>
<body>
<div class="projects-container">
	<ul>
		<li>
			<div class="cd-title">
				<h2>
					主页
				</h2>
				<p>
					jQuery从1.4-2.1版本下载
				</p>
			</div>
			<div class="cd-project-info">
				<p>
					适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
				</p>
			</div>
		</li>
		<li>
			<div class="cd-title">
				<h2>
					内容
				</h2>
				<p>
					leanModal.js轻巧的弹出层插件
				</p>
			</div>
			<div class="cd-project-info">
				<p>
				</p>
			</div>
		</li>
		<li>
			<div class="cd-title">
				<h2>
					设置
				</h2>
				<p>
					wysiwyg微小的Bootstrap富文本编辑器
				</p>
			</div>
			<div class="cd-project-info">
				<p>
					bootstrap-wysiwyg是一款支持移动设备浏览器，支持图片上传，支持语音识别输入功能的微小富文本编辑器。
				</p>
			</div>
		</li>
		<li>
			<div class="cd-title">
				<h2>
					关于
				</h2>
				<p>
					Blueprint - 滑动和推动菜单插件
				</p>
			</div>
			<div class="cd-project-info">
				<p>
					本文演示了Blueprint在不同位置六种滑动菜单效果。
				</p>
			</div>
		</li>
	</ul>
	<a href="#0" class="cd-close">Close</a>
	<a href="#0" class="cd-scroll">Scroll</a>
</div> 
</body>
</html>

全部代码：jQuery响应式全屏背景图片导航菜单特效

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/90979