响应式导航_灵活的响应式导航方法

最新推荐文章于 2024-07-31 14:30:10 发布

daique1908

最新推荐文章于 2024-07-31 14:30:10 发布

阅读量1.5k

点赞数

文章标签： python css java 人工智能 js ViewUI

响应式导航

许多响应式网站在大屏幕上提供水平导航栏，并在较小的视口中提供下拉导航。这是一种非常体面的方法，但并非没有问题。首先，设备不仅大小不一；它们有各种可以想象的尺寸。其次，导航可能会随着时间而改变。第三，布局或字体大小可能会因屏幕大小而异。我们将以不同的方式做事...

为什么不检查（使用JavaScript）以查看实际上有多少导航空间适合可用空间？知道了这一点之后，我们就可以将导航栏中不适合的项目移到下拉菜单中。在特别小的屏幕上，我们可以选择将整个菜单放入一个下拉菜单。

导航适合吗？

哪种导航效果最好？这个问题的答案取决于几个因素，包括屏幕大小，字体大小，字体系列，导航项的数量以及导航出现的上下文。这些因素相互影响，并且都可以改变。

而不是考虑所有这些因素，我们仅查看最终结果：所有导航项是否都排在一个整齐的行中，或者某些导航项被下推到下一行？如果是后者，那么可以容纳多少个物品？有了这些信息，我们可以为任务选择正确的导航。

步骤1：选择断点

响应式设计具有两个主要功能。首先，设计必须流畅：其宽度与浏览器的宽度成比例。其次，存在断点宽度，通过使用CSS媒体查询可以更改设计。例如，您可能决定当浏览器的宽度不超过480像素时，侧边栏将移动到内容下方，并且标题将变小。您可以根据需要设置任意多个断点。

您可以使用媒体查询来创建断点，如下所示：

@media only screen and (max-width: 480px) {
	/* This CSS will be applied only to phones and other small devices. */
}

那么，我们如何选择断点？一种方法是选择一些与常见设备尺寸匹配的宽度。

Twitter Bootstrap具有多个断点，包括在不大于480像素的视口上触发的“智能电话”断点。它还具有在768px和979px之间触发的“肖像平板电脑”断点。

您可能会注意到，Bootstrap中没有“ landscape tablet”断点。这是因为iPad的横向宽度为1024像素-与许多台式机屏幕相同。这给我们带来了这种方法的主要缺陷：涉及对设备类型进行有根据的猜测。碰到我们的“纵向平板电脑”的设备实际上可能是一个很大的电话或一个很小的笔记本电脑。

媒体查询不会告诉我们所使用的设备类型，但是我们可以根据设备的大小做出有根据的猜测。

另一种方法是使断点基于设计和内容。您可以在没有断点的情况下实现流畅的设计版本，然后以不同的宽度对其进行测试。当您遇到宽度开始变得有些奇怪的宽度时，是考虑添加断点的好时机。这就是Ethan Marcotte所钟爱的方法，他创造了“响应式设计”一词。

哪种方法最好？就像生活中的许多事情一样，这取决于。您是否正在使用像Bootstrap这样的预构建框架？如果您可以谈论特定类型的设备，您认为向团队或客户解释自适应设计会更容易吗？如果您回答“是”，则根据设备大小选择断点可能更适合您。如果您回答“否”，则根据设计和内容选择断点可能会给您带来更大的自由度和灵活性。这就是我们在本教程中将采用的方法。

步骤2：编写标记

让我们开始构建一个简单的页面。我们将构建一个“文章”区域，其中包含一些内容和一个导航栏。在文章旁边，我们将放在一边。

<article>
	<nav>
		<ul class="navbar" id="mainNavbar">
			<li><a href="/">Home</a></li>
			<li><a href="/products.html">Products</a></li>
			<!-- More nav items... -->
			<li><a href="/contact.html">Contact</a></li>
		</ul>
	</nav>
	<p>Here is our content.</p>
</article>
<aside>
	<p>Here is a side note about our content.</p>
</aside>

为了演示起见，在此列表中包括十个左右导航项。

步骤3：基本样式

首先，让我们设置列表样式以显示导航栏。

.navbar {
	background-color: #055;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1;
	overflow: hidden;
}

.navbar li, .navbar a {
	display: inline-block;	
}

.navbar li {
	list-style-type: none;
}

.navbar > li {
	margin-left: .25em;
}

.navbar > li:first-child {
	margin-left: 0;
}

.navbar a {
	padding: .25em;
	text-decoration: none;
	height: 1em;
	font-weight: bold;	
	color: #fff;
}

.navbar a:hover {
	background-color: #088;
}

我们还将使我们的文章脱颖而出，并将其放在一边作为侧边栏。我们使用宽度的百分比值来使设计流畅。

body {
	font-family: sans-serif;
	font-size: 16px;
	background-color: #fff;
}

article {
	background-color: #eee;
	padding: 2.5%;
	margin-right: 1%;
	width: 64%;
	float:left;
}

aside {
	background-color: #ccc;
	padding: 2.5%;
	width: 25%;
	float: left;
}

我们的最终结果应如下所示：

步骤4：添加断点

当我们的宽度变得特别小时，文本会自动缠绕，以至于难以阅读。我们可以通过以下方法解决此问题：让文章和一面都占据整个宽度，然后将一面向下推到文章下方。

@media only screen and (max-width: 550px) {
	aside, article {
		width: 95%;
		float: none;
	}

	article {
		margin-right: 0;
		margin-bottom: 1em;
	}
}

随便玩一个窗口宽度，看看会发生什么。通常，随着窗口变小，导航的空间越来越少。但是，当您将窗口缩小到550px时，实际上您会获得一些空间用于导航，因为旁边会下降到下一行。

我们可以在导航栏中显示的项目数取决于几个因素，包括窗口的宽度，断点，字体大小和导航中的项目数。

步骤5：在导航栏上设置固定高度

在许多情况下，我们的导航栏内容不适合整齐的一行。让我们解决这个问题！

如果用户使用JavaScript，我们将隐藏不适合的项目。稍后我们将在下拉菜单中显示它们。如果用户没有JavaScript，我们只需要根据需要扩展导航栏的高度即可。它虽然不漂亮，但至少具有功能性。

为此，我们将下载并包含一个自定义版本的Modernizr ，这是一个JavaScript库，允许我们在浏览器中测试功能支持。我们针对JavaScript支持和触摸事件支持的自定义构建测试。

接下来，我们将在代码中添加一个“ no-js”类。如果用户使用JavaScript，则Mozernizr将该类更改为“ js”。如果用户没有JavaScript，则该类将重新显示“ no-js”。

<html class="no-js">
<script src="modernizr.custom.js"></script>

注意：出于性能原因，通常最好避免将脚本放在页面顶部。当浏览器忙于下载脚本时，它将停止下载其他文件并呈现页面。在这种情况下，这实际上就是我们想要的：在我们的.js类到位之前，我们不希望浏览器显示任何内容。与这种方法相关的性能影响很小，我们通过使用自定义版本的Modernizr减轻了一些影响。如果您只需要该“ no-js”类，并且不打算使用Modernizr的其他功能，则可以通过使用此单行奇迹来使页面更轻巧。

现在我们已经有了一个工作的.js类，让我们用它来隐藏所有换行的项目。

.js .navbar {
	height: 1.5em;
 	overflow: hidden;
}

第6步：添加FlexMenu

接下来，让我们下载flexMenu ，这是一个jQuery插件，可让我们检查所有项目是否都适合导航栏并显示适当的菜单类型。我们还需要jQuery本身。将这些脚本放在页面底部，以便它们在加载时不会阻止页面显示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>

我们还需要告诉flexMenu查看菜单并根据需要调整其大小：

<script type="text/javascript">
	$('#mainNavbar').flexMenu();
</script>

现在，当我们调整页面大小时，当某些项目不适合导航栏时，将显示“更多”链接。您可以将鼠标悬停或点击此链接以显示包含这些项目的下拉菜单。如果页面太小而无法在导航栏中显示一个或两个以上的项目，则会显示一个“菜单”链接。将鼠标悬停或点击此链接时，将显示所有导航项。

现在，我们有了所需的行为，但是下拉菜单看起来非常糟糕。没关系-我们将在下一步中解决该问题。

步骤7：样式flexMenu

现在，让我们添加一些样式以使下拉菜单看起来更好。我们还将在“菜单”或“更多”链接旁边添加CSS箭头，以明确表明这些链接将打开一个下拉菜单。

使用CSS箭头时，没有图像可加载，并且在高分辨率显示器上，箭头保持清晰。这种方法适用于所有现代浏览器以及IE8。如果需要支持IE7或更早版本，请确保包括基于图像的后备。

.flexMenu-popup {
	padding: 0;
	background-color: #088;
	margin: 0;
}

.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {
	background-color: #5599AA;
}

.flexMenu-viewMore > a:after {
	display: inline-block;
	content:"";
	border-left:0.3em solid transparent;
	border-right:0.3em solid transparent;
	border-top:0.4em solid white;
	margin-left:0.4em;	
	position: relative;
	top: -.1em;
}

.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
	background-color: #088;	
}

.flexMenu-popup > li > a, .flexMenu-popup > li {
	display: block;
}

.flexMenu-popup > li > a:hover {
	background-color: #3aa;
}

第8步：调整触摸屏

现在，我们有了一个工具栏，可以在各种屏幕尺寸上很好地工作，但是在触摸屏上使用它有点困难。触摸屏无法提供比鼠标和触控板更高的精度，因此很容易错过和点击错误的项目。要解决此问题，让我们将链接稍大一些，并将它们分开一些。

我们先前添加的Modernizr为它检查的每个功能提供了一个CSS类。在带有触摸屏的设备上，它将添加“触摸”类。在没有触摸屏的设备上，它将添加“非触摸”类。

.touch .navbar {
	font-size: 1.25em;
}

因为我们已经用ems表示了所有大小，所以我们可以通过导航栏的字体大小来缩放整个导航栏。上方的一行（好吧，大概是我们隔开的三种方式）不仅可以调整文本的大小，还可以调整箭头的大小，导航栏的高度，链接的填充以及项目之间的边距。

注意： .touch类指示对触摸事件的支持，这使开发人员可以将触摸输入构建到Web应用程序中。同时具有触摸屏和鼠标的设备（例如Windows 8平板电脑）很可能会获得.touch类。大多数触摸设备都是出于兼容性目的而模拟鼠标事件，因此当前无法使用Modernizr来检测具有触摸屏和鼠标的设备。

第9步：修复跨浏览器时髦

如果您到目前为止在IE7中进行演示，您可能会注意到两个问题：

在调整窗口大小时，有时在我们到达断点之前，侧栏会被推到文章下方。
下拉菜单位于“更多”链接底部下方一个像素，因此，当您尝试将鼠标悬停在该菜单上时，该菜单就会消失。

第一个问题是由于IE7对百分比的处理。如果计算得出的值包括一个像素的一小部分，则它总是四舍五入。第二个问题可能是由类似的问题引起的。

要变通解决此问题，我们可以在IE7中为页面设置固定宽度。为此，我们首先在页面顶部添加“小于IE8”类。

<!--[if lt IE 8]>    <html lang="en-us" class="no-js lt-ie8"> <![endif]-->
<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

接下来，让我们添加一些CSS，这些CSS设置文章的特定像素宽度，并放在IE7中。这些区域的总宽度加上填充，边距和舍入余量为901像素。

.lt-ie8 .flexMenu-popup {
	margin-top: -1px
}

.lt-ie8 article {
	width: 600px;
}

.lt-ie8 aside {
	width: 200px;
}

.lt-ie8 body {
	width: 901px;
}

您可能还会注意到，在iOS上，将设备从纵向旋转到横向时，缩放级别会发生变化。要解决此问题，只需获取此基于JavaScript的修复程序，然后在页面底部对其进行引用。此问题显然已在iOS 6中修复。

进一步阅读

布拉德·弗罗斯特（Brad Frost）的文章“ 响应式导航模式和响应式设计的复杂导航模式”涵盖了在响应式站点上进行导航的多种方法。

Luke Wroblewski还是响应式和移动设计模式的绝佳资源。特别是，他的Off Canvas方法非常聪明：它将导航和其他辅助内容置于屏幕之外的小型设备上。当用户点击按钮时，内容从左侧或右侧滑入。

当然，这些资源并没有提供详尽的清单。响应式设计仍是一个新兴领域，您可以期望将来会出现许多新颖的设计模式。也许其中一些会是你的！

翻译自: https://webdesign.tutsplus.com/tutorials/a-flexible-approach-to-responsive-navigation--webdesign-8397

响应式导航

daique1908

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
响应式导航_灵活的响应式导航方法

许多响应式网站在大屏幕上提供水平导航栏，并在较小的视口中提供下拉导航。这是一种非常体面的方法，但并非没有问题。首先，设备不只是大小而已。它们有各种可以想象的尺寸。其次，导航可能会随着时间而改变。第三，布局或字体大小可能会因屏幕大小而异。我们将以不同的方式做事... 为什么不检查（使用JavaScript）以查看实际上有多少导航空间适合可用空间？知道这一点后，我们就可以将导航...
复制链接

扫一扫