如何使用 HTML CSS & jQuery创建响应性菜单

分享于 

5分钟阅读

Web开发

  繁體

我从系列文章的第 5部分开始,从简单到复杂,我开始了很长一段时间来创建菜单。 当今,当智能手机在浏览网站时,适应智能手机和它的他设备的菜单也同样重要。 在这篇文章中,我们将看到如何创建一个菜单,该菜单根据我们在查看站点的设备自动调整。 我们将使用 HTML。CSS和一些jQuery来构建这个菜单。

我们将使用来自 github的现有插件,即" meanmenu"来创建这个菜单。 让我们开始吧。简而言之,我们将执行以下任务:

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

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

<!doctypehtml><htmlclass="no-js"lang="en"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><title>Responsive Menu Demo</title><styletype="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;}
.menuullia:link, divullia:visited {
 display: block;background-color: #f1f1f1;color:#000;text-align: center;text-decoration: none;padding: 4px;border-bottom: 1px solid #fff;width: 150px;}
.menuullia:hover{
 background-color: #ccc;}
.menuulliullia:link, liullia:visited {
 display: block;background-color: #f1f1f1;color: #000;text-align: center;text-decoration: none;padding: 4px;border-bottom: 1px solid #fff;width: 150px;}
.menuulliullia:hover {
 background-color: #ccc;}
.menuul {
 list-style-type: none;margin: 0px;padding: 0px;}
.menuulli {
 float: left;margin-left: 5px;}
.menuulliulli {
 float: none;margin-left: 0px;}
.menuulliul {
 display: none;}
.menuli:hoverul{
 display: block;}</style><metaname="viewport"content="width=device-width, initial-scale=1, minimum-scale=1"/></head><body><header><divclass="menu"><ul><li><ahref="#">Lifestyle</a></li><li><ahref="#">Technology</a><ul><li><ahref="#">C#</a></li><li><ahref="#">PhP</a></li><li><ahref="#">VB.Net</a></li></ul></li><li><ahref="#">Operating Systems</a><ul><li><ahref="#">Windows</a></li><li><ahref="#">Linux</a></li><li><ahref="#">Mac</a></li></ul></li></ul></div></header><divstyle="clear:both;"></div><section><article><h1>Resize your browser to under 768 pixels</h1></article></section></body></html>

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

<linkrel="stylesheet"href="meanmenu.css"media="all"/><scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script><scriptsrc="jquery.meanmenu.js"></script>

最后,我们将调用插件的功能,将菜单自动转换为响应菜单,并将调整窗口大小并检查移动浏览器。

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

below 是菜单显示Dekstop和手机的输出的屏幕截图。

responsive-menu-1

responsive-menu-2

你可以在这里下载菜单的完整源代码。

希望你喜欢这篇文章 ! 继续学习和分享干杯 !


菜单  
相关文章