智能手机现在配备了一些非常高效的Web浏览器。 JavaScript比以往任何时候都更强大，并且可以借助jQuery之类的代码库进行扩展。 当您添加最新的HTML5 / CSS3规范时，就可以使用一些基本的前端代码来构建非常灵活的移动Web应用程序。
在本教程中，我将展示如何构建基于移动的 网站/ webapp 。 我们将使用CSS3媒体查询来定位特定的设备和屏幕分辨率。 再加上一点jQuery，可以使用Ajax调用来动画化菜单并加载外部页面内容。 更好的是，布局甚至可以扩展以在常规桌面浏览器（例如Chrome或Firefox）中正确显示。
定义页面结构
首先让我们浏览HTML页面，然后使用一些CSS规则设置其样式。 我将跳过标头中的大多数非常规meta标记，因为它们不会直接影响Web应用程序。 但是，我需要提及一些内容，即下面的代码段：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">X-UA兼容用于描述文档应如何在某些浏览器中呈现。 在HTML5中进行编码时，这是一个有趣的场景，因此我不必为此担心太多。 但是，meta 视口标签非常重要。 它将移动浏览器窗口设置为100％，而不是标准的缩放效果。
还可以使用内容值user-scalable=no禁用用户缩放。 但是在这种情况下，我们只想将全屏宽度设置为与设备的宽度相同。 Apple Web应用程序标签将使网站可以作为主屏幕图标保存到iPhone或iPod Touch。 并非完全必要，但当然值得拥有。
体内含量
在body标签内部，我设置了ID为#w的包装器div。 在内部，我使用ID #pagebody和#navmenu将布局分为两个div。 您可以选择将整个页面宽度限制为640像素，以便将布局缩放到一个严格的数字。
<div id="pagebody">
<header id="toolbarnav">
<a rel="external" href="#navmenu" id="menu-btn"></a>
<h1>HK Mobile</h1>
</header>
<section id="content" class="clearfix">
<h2>Welcome to the Mobile Site!</h2>
</section>
</div>
<div id="navmenu">
<header>
<h1>Menu Links</h1>
</header>
<ul>
<li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
<li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
<li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
<li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
<li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
<li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
</ul>
</div> 导航菜单的z-index值较低，因此#pagebody始终位于顶部。 这很关键，因为JavaScript代码将在页面主体上滑动一定数量的像素以显示下面的导航。
我在每个.html页面前都使用了井号（＃），以阻止Mobile Safari中的某些不良行为。 每当您单击链接时，URL栏就会出现并下推内容。 但是，当引用一个ID时，除了通过JavaScript调用外，什么都不会重新加载。
CSS定位
CSS代码中没有太多令人困惑的内容。 大多数定位是手动完成的，然后通过jQuery进行操作。 但是我们的文档中有一些有趣的部分。
/** @group core body **/
#w #pagebody {
position: relative;
left: 0;
max-width: 640px;
min-width: 320px;
z-index: 99999;
}
#w #navmenu {
background: #475566;
height: 100%;
display: block;
position: fixed;
width: 300px;
left: 0px;
top: 0px;
z-index: 0;
} 此顶部段定义了页面两个部分的样式。 我们的导航菜单只有300px宽，因此为页面内容留出了一些余地。 打开/关闭菜单按钮也直接位于左侧，并且始终可以访问。 这里重要的是z-index属性值和使用position: fixed; 在我们的导航菜单上。
工具栏顶部的标题也是一个有趣的部分。 它将设置为固定位置，因此它将随页面内容滚动。 复制的效果与任何iOS应用标题栏中的相似。
/** @group header **/
#w #pagebody header#toolbarnav {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
height: 44px;
width: 100%;
max-width: 640px;
}
#w #pagebody header#toolbarnav h1 {
text-align: center;
padding-top: 10px;
padding-right: 40px;
color: #e6e8f2;
font-weight: bold;
font-size: 2.1em;
text-shadow: 1px 1px 0px #313131;
}移动规则
很容易注意到，我还在蓝色标题栏纹理上使用背景图像。 尺寸为640×44像素，以保持一致的布局结构。 但是我还为iPhone / iPad视网膜显示器开发了@ 2x图像。 您可以看到下面的两个图像，也可以从我的演示源代码中获取它们。
我在另一个名为sensitive.css的文件中为此功能设置了移动CSS。 它包含两个媒体查询，它们替换了视网膜设备的标题栏bg和菜单按钮图标。
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#w #pagebody header {
background: #0b1851 url('img/tabbar-solid-bg@2x.png') top left no-repeat;
background-size: 640px 44px;
}
#w #pagebody header #menu-btn {
background: url('img/nav-btn@2x.png') no-repeat;
background-size: 53px 30px;
}
}设计菜单箭头
在导航区域中，每个菜单链接的右侧还包括一个小箭头图标。 这可以很容易地用任何创作共用艺术品中的图像替换。 但是大多数CSS3爱好者都喜欢测试这种方法。
#w #navmenu ul li a::after {
content: '';
display: block;
width: 6px;
height: 6px;
border-right: 3px solid #d0d0d8;
border-top: 3px solid #d0d0d8;
position: absolute;
right: 30px;
top: 45%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#w #navmenu ul li a:hover::after { border-color: #cad0e6; } 我们正在使用transform属性在内容之后创建一个小边框。 我也设置position: absolute; 因此我们可以在内部链接项周围自由移动这些边界。 在悬停状态下更改边框颜色非常容易，从而提供了更加动态的感觉。 仅使用基本HTML5和CSS3规则就可以完成惊人的工作。
但是现在让我们进入JavaScript代码的零碎片段。 请记住，这需要包含在jQuery库中 ，我的代码才能正常运行。
jQuery动画
在编写这些自定义代码时，我创建了一个名为script.js的全新文档。 随意直接在<script>标记中编写这些内容，或从演示源代码下载我的示例。
$(document).ready(function(){
var pagebody = $("#pagebody");
var themenu = $("#navmenu");
var topbar = $("#toolbarnav");
var content = $("#content");
var viewport = {
width : $(window).width(),
height : $(window).height()
};
// retrieve variables as
// viewport.width / viewport.height首先，我设置了一些页面变量，可以在其中更快地引用文档中的元素。 视口值从不使用，但是如果您希望调整动画阶段，则它会很有用。 例如，您可以检查当前浏览器的宽度，并相应地打开或缩小菜单。
function openme() {
$(function () {
topbar.animate({
left: "290px"
}, { duration: 300, queue: false });
pagebody.animate({
left: "290px"
}, { duration: 300, queue: false });
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px"
}, { duration: 180, queue: false });
});
}接下来，我定义了两个用于打开和关闭菜单的重要功能。 这些可以通过单个函数和回调切换完成–除非我们实际上需要同时为两个不同的元素设置动画。 不幸的是，这不是jQuery的默认行为，因此我们需要采用另一种语法。
我们所定位的两个元素被命名为顶栏和pagebody。 具有白色背景的内部内容区域是整个页面正文。 但是，标题栏位置固定在页面顶部。 这意味着它不会自然地为页面设置动画，我们需要使用单独的调用。 将开口设置为向左推290像素（几乎是300像素的整个导航宽度），然后关闭功能将其缩回。
加载动态内容
上面的代码很容易处理动画。 从理论上讲，这是一个如此简单的移动网站所需要的，但我想再添加一点。
每次用户单击菜单链接时，我们要在查找页面内容时关闭当前导航并显示加载的gif。 然后，一旦完成，我们将删除gif图像并将其全部加载到其中。 这太棒了，因为我们甚至可以使用静态.html页面作为内容。 没有PHP，Ruby或Perl或任何后端语言会使事情变得混乱。
管理点击
首先，我们要测试用户何时单击导航按钮。 这将停止加载正常的href值，而我们可以改用自己的函数来显示外部内容。
// loading page content for navigation
$("a.navlink").live("click", function(e){
e.preventDefault();
var linkurl = $(this).attr("href");
var linkhtmlurl = linkurl.substring(1, linkurl.length);
var imgloader = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>'; 现在，我们使用navlink类为任何锚点打开一个选择器。 每当用户单击这些链接之一时，我们都会停止其加载并为完整URL设置变量。 我还为内容HTML设置了一个变量，以包括标准图像加载器。 如果您想定制自己的产品，我强烈建议Ajaxload 。
Ajax .load（）
我已经巧妙地分解了两种不同的效果。 下面的代码是我们的第一位，它关闭了导航菜单并将整个文档窗口一直滑到顶部。 我们希望用小的加载程序动画替换内部内容，并且如果用户查看页面底部，则看不到此内容。
closeme();
$(function() {
topbar.css("top", "0px");
window.scrollTo(0, 1);
});现在终于要用图像替换内部主体内容并获取要加载的外部页面。 通常，这只需要几百毫秒甚至更快的时间，因此我设置了超时功能。
content.html(imgloader);
setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */ }) }, 1200);在加载新内容之前，这将暂停1200毫秒。 对于我的演示，这看起来要好得多，并且可以让您了解该应用程序在较慢的Internet连接上的行为。
结论
我鼓励所有Web开发人员下载教程源代码并自己玩。 这是HTML / CSS3和一点JavaScript效果可以完成的基本示例。 使用媒体查询和可扩展的Web浏览器，比以往任何时候都更容易构建移动屏幕。
查看您是否可以在将来的Web项目中应用任何此类代码。 构建移动应用程序是一门艺术，就像Web设计一样，需要大量的奉献精神和实践。 我希望本教程对于一些热心的开发人员来说可以是一个很好的起点。 如果您对代码有疑问或想法，请在后期讨论区与我们分享。
翻译自: https://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
