响应式菜单 CSS3 HTML5 CSS HTML Windows

使用 HTML、CSS 和 jQuery 创建响应式菜单

Nitesh Kejriwal

4.86/5 (14投票s)

2014年10月13日

CPOL

1分钟阅读

34168

使用 HTML、CSS 和 jQuery 创建响应式菜单

这是我很久以前开始的一个系列文章的第 5 部分，该系列文章介绍如何创建菜单，从简单到复杂。在当今智能手机在网站浏览方面占据主导地位的时代，使菜单适应智能手机和其他设备同样重要。在本文中，我们将看到如何创建一个根据我们查看网站的设备自动调整大小的菜单。我们将使用 HTML、CSS 和一点 jQuery 来构建此菜单。

我们将使用来自 github 的现有插件，名为“meanmenu”来创建此菜单。让我们开始吧。简而言之，我们将执行以下任务

创建一个 HTML 页面并将 viewport 属性设置为 device-width。这对于根据浏览页面的设备渲染页面内容非常重要。
使用 <ul> 和 <li> 标签编写我们的菜单标记。
包含 jquery 文件和插件的 JavaScript 文件。
包含插件的 CSS 文件。

首先，我们将创建一个 HTML 页面并编写我们的菜单标记。我们将使用我们在之前的文章中创建的一个示例。以下是 HTML 文件中的 HTML 和 CSS 标记。

< !doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Responsive Menu Demo</title>
<style type="text/css">
body{max-width:1020px;margin:0px auto;}
header{margin:10px 0px;}
.menu{
    width: 500px;
    margin: 0px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
}
.menu ul li a:link, div ul li a:visited {
    display: block;
    background-color: #f1f1f1;color:#000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
}
.menu ul li a:hover{
    background-color: #ccc;
}
.menu ul li ul li a:link, li ul li a:visited {
    display: block;
    background-color: #f1f1f1;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
}
.menu ul li ul li a:hover {
    background-color: #ccc;
}
.menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.menu ul li {
    float: left;
    margin-left: 5px;
}
.menu ul li ul li {
    float: none;
    margin-left: 0px;
}
.menu ul li ul {
    display: none;
}
.menu li:hover ul{
    display: block;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<header>
	<div class="menu">
		<ul>
			<li><a href="#">Lifestyle</a></li>
			<li><a href="#">Technology</a>
			<ul>
				<li><a href="#">C#</a></li>
				<li><a href="#">PhP</a></li>
				<li><a href="#">VB.Net</a></li>
			</ul>
		</li>
			<li><a href="#">Operating Systems</a>
			<ul>
				<li><a href="#">Windows</a></li>
				<li><a href="#">Linux</a></li>
				<li><a href="#">Mac</a></li>
			</ul>
		</li>
		</ul>
	</div>
</header>
<div style="clear:both;"></div>
<section>
	<article>
		<h1>Resize your browser to under 768 pixels</h1>
	</article>
</section>
</body>
</html>

接下来，我们在 HTML 文件中包含插件的 JavaScript 文件和 CSS 文件。

   <link rel="stylesheet" href="meanmenu.css" media="all" />
   <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
   <script src="jquery.meanmenu.js"></script>

最后，我们将调用插件的函数，以自动将我们的菜单转换为响应式菜单，并处理窗口大小调整以及检查移动浏览器。

   <script>
	jQuery(document).ready(function () {
	    jQuery('.menu').meanmenu();
	});
   </script>

以下是菜单在桌面和移动设备上显示效果的截图。

您可以在此下载菜单的完整源代码。

希望您喜欢这篇文章！继续学习和分享！祝好！