... 剩下的内容在这个页面上 ...
变得有响应性，第二部分:移动导航
新利在线娱乐网- 2015年8月26日星期三
将一个静态的网站转换成一个响应式的网站，在大大小小的浏览器上都能运行，这有很多的挑战. 在本系列的第1部分中，我们讨论了将媒体查询作为一种使站点更具可塑性的工具. 这些方便的CSS结构可以帮助您实现响应性站点的目标.
但最终您将遇到在小屏幕上浏览站点的挑战. 传统的标题栏和导航栏在手持设备上不能很好地工作. 你得把它们缩小到可以叠起来的程度, 重叠, 或者变得小到难以辨认.
近年来, 设计人员已经开发了许多专为小屏幕设计的导航方案. 这些都是围绕着一个菜单按钮而标准化的，这个按钮被人们亲切地称为“汉堡图标”.“当用户看到其中一个:[img]，他们知道导航只是一个点击.
对于响应式网站，有几种移动导航的方法. 最流行的方法是在HTML中创建两个导航列表, 并隐藏其中一个或另一个取决于屏幕的宽度使用媒体查询(他们又在那里!). 这需要对HTML做一些修改，这样您就可以生成两个导航列表和一些其他添加. 例如，考虑一个这样设置的页面:
当与这个CSS结合时:
nav.mobile-nav { display: none; }
div#hamburger-icon { display: none; }
... 移动导航永远从屏幕上消失了. 这并不是我们想要的，所以让我们抛出一个媒体查询:
nav.mobile-nav { display: none; }
div#hamburger-icon { display: none; }
@media (max-width: 640px) {
nav.mobile-nav { display: block; }
div#hamburger-icon { display: block; }
nav.regular-nav { display: none; }
}
当屏幕是640像素或更小的时候, 移动导航与菜单图标一起出现, 普通的导航条也消失了. 虽然这确实展示了@media声明的力量，但它并没有比以前更有用. 让我们解决这个问题:
div#一切 { position: relative; width: 100%; overflow: hidden; }
nav.mobile-nav { position: absolute; top: 0; left: -320px; width: 320px; transition: left 0.5s; display: none; }
div.主要内容{转换:转换0.5s; width: 100%; overflow: hidden; }
div#hamburger-icon { display: none; }
@media (max-width: 640px) {
nav.mobile-nav { display: block; }
div#hamburger-icon { display: block; }
nav.regular-nav { display: none; }
}
哇! 这都是什么? 简而言之，我们只是将手机导航定位在屏幕左侧. 我们还添加了CSS过渡，当移动导航或主要内容块移动时，可以创建平滑的半秒动画.
到目前为止一切顺利，除了当你点击汉堡图标时什么都没有发生. 这需要更多的CSS和少量的Javascript.
div#一切 { position: relative; width: 100%; overflow: hidden; }
nav.mobile-nav { position: absolute; top: 0; left: -320px; width: 320px; transition: left 0.5s; display: none; }
div.主要内容{转换:转换0.5s; width: 100%; overflow: hidden; }
div#hamburger-icon { display: none; }
div#一切.活跃的导航.mobile-nav { left: 0; }
div#一切.活跃的div.main-content { transform: translateX(320px); -webkit-transform: translateX(320px); -moz-transform: translateX(320px); }
@media (max-width: 640px) {
nav.mobile-nav { display: block; }
div#hamburger-icon { display: block; }
nav.regular-nav { display: none; }
}
下面是jQuery的代码片段，它将所有这些内容整合在一起:
$ (' # hamburger-icon ').(“点击”,函数(){
$(' #一切').toggleClass(“活跃的”);
});
看到我们做了什么吗? 当您单击或点击菜单图标时, jQuery在名为“everything”的div上切换类“active”,它包围着页面上的所有元素. 与此同时, 在CSS, 我们改变移动导航和主要内容块的位置，这取决于“everything”div是否有“active”类应用于它. 导航栏会自动滑动进来，把主要内容推到一边.
(你可能想知道为什么我们用“transform”来移动主内容块而不是“left”. 我们用“左”吗?, 我们实际上是把纸的边缘向右推, 使页面比浏览器更宽, 用户可能会不小心滚动到屏幕上，隐藏导航栏. CSS转换在它自己的块内移动内容, 哪一个, 如果设置了“overflow: hidden;”, 不会改变页面布局.)
好吧! 这是一个很好的教训. 下一节课, 最后，我们将讨论如何为响应性站点扩展超大元素, 所以请继续关注.
我们在新利在线娱乐网是把旧的静态网站转换成干净的新的响应式网站的专家, 此外，创造全新的设计，以补充你的营销努力. 国际新利娱乐 来看看我们能为你做些什么.
新利在线娱乐网
新利在线娱乐网是一家全方位服务的创意机构 网页设计, 打印, 身份, 品牌, 界面设计, 视频制作, 静止摄影 和 运动设计. 利用我们对卓越的热情，多元文化背景，和 获奖 实践, 我们始终如一地提供高品质的, 自定义, 创新的解决方案，以满足客户多样化的市场需求. 欲了解更多信息，请访问 www.MatchaDesign.com.