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

马coder

于 2024-02-07 17:30:00 发布

阅读量329

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135375687

版权

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响应式全屏背景图片导航菜单特效