vue 创建响应式的导航栏_如何为您的网站创建响应式导航

其中一个最棘手的部分网站上进行responsified 是“导航”,这部分是针对网站的无障碍真的很重要,因为这是观众跳过网页的方式之一。

实际上,有很多方法可以创建响应式网站导航,甚至有些jQuery插件也可以在第二秒内完成 。

然而,而不是应用即时的解决方案,在这篇文章中,我们将引导您如何建立从地上一个简单的导航和使用CSS3媒体查询和一个小的jQuery在一个小屏幕尺寸一样,以显示它的智能手机正常。

因此,让我们开始吧。

  • 演示版
  • 下载源

HTML

首先,让我们在head标签内添加meta视口 。 我们的页面需要此meta视口标签,才能在任何屏幕尺寸内正确缩放,尤其是在移动视口中。

…,然后在body标签内添加以下代码段作为导航标记。

正如您在上面看到的,我们有六个主菜单链接,并在其后添加了一个链接。 隐藏在小屏幕中时,此额外链接将用于 菜单导航 。

款式

在本节中,我们将开始设计导航的样式。 这里的样式只是装饰性的,您可以根据需要选择任何颜色。 但是在这种情况下,我们(我个人)希望body具有柔软而乳白色的颜色。

body {
	background-color: #ece8e5;
}

定义导航的nav标签将具有浏览器窗口的100%全宽,而包含我们的主菜单链接的ul将具有600px的宽度。

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}

然后,我们将菜单链接float到左侧,因此它们将并排水平显示,但是浮动元素也会导致其父折叠。

nav li {
	display: inline;
	float: left;
}

如果您从上面HTML标记中注意到,我们已经在navulclass属性中添加了clearfix ,以便在使用此CSS clearfix hack浮动其中的元素时清除周围的内容。 因此,让我们在样式表中添加以下样式规则。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

由于我们有六个菜单链接,并且我们还为600px指定了容器,所以每个菜单链接的宽度都为100px

nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

菜单链接将以1px右边框分隔,最后一个除外。 记住我们之前关于框模型的文章,菜单的宽度将扩大1px使其边框增加101px ,因此这里我们将box-sizing模型更改为border-box ,以使菜单保持100px

nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}

接下来,当菜单处于:hover:active状态时,菜单将具有较亮的颜色。

nav a:hover, nav a:active {
	background-color: #8c99a4;
}

…最后,附加链接将被隐藏(对于台式机屏幕)。

nav a#pull {
	display: none;
}

此时,我们仅设计导航的样式,而调整浏览器窗口的大小将不会发生任何事情。 因此,让我们跳到下一步。

vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第1张图片
vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第2张图片

媒体查询

vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第3张图片
vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第4张图片

由于导航最初是600px固定宽度,因此我们将首先定义以600px或更小的屏幕尺寸查看样式,因此实际上, 是我们的第一个断点。

在此屏幕尺寸下,两个菜单链接中的每一个将并排显示,因此此处的ul宽度为浏览器窗口的100% ,而菜单链接的宽度为50%

vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第5张图片
vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第6张图片
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

…然后,我们还定义了当屏幕变小480px或更小(这是我们的第二个断点)时如何显示导航。

在此屏幕尺寸下,我们之前添加的额外链接将开始可见,并且我们还会使用:after 伪元素在其右侧为该链接提供一个“菜单”图标,而主菜单链接将隐藏为在屏幕上保存更多垂直空间。

vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第7张图片
vue 创建响应式的导航栏_如何为您的网站创建响应式导航_第8张图片
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

最后,当屏幕变小320px并降低屏幕时,菜单将自上而下垂直显示。

@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
}

现在,您可以尝试调整浏览器窗口的大小。 现在,它应该能够适应屏幕尺寸。

显示菜单

此时,菜单仍将隐藏,并且仅在需要时通过点击或单击“菜单”链接可见,并且我们可以使用jQuery slideToggle()实现效果。

$(function() {
	var pull 		= $('#pull');
		menu 		= $('nav ul');
		menuHeight	= menu.height();

	$(pull).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
});

但是,当您刚在小菜单中查看并隐藏菜单后调整浏览器窗口的大小时,菜单将保持隐藏状态,如display: none jQuery生成的样式display: none附加在元素中。

因此,我们需要在调整窗口大小时删除此样式,如下所示:

$(window).resize(function(){
	var w = $(window).width();
	if(w > 320 && menu.is(':hidden')) {
		menu.removeAttr('style');
	}
});

好了,这就是我们需要的所有代码,我们现在可以从以下链接查看导航,我们建议您在自适应设计测试工具(例如Responsinator)中对其进行测试,以便您可以一次查看各种宽度的内容。 。

  • 演示版
  • 下载源

奖金:另一种方式

正如我们在本文前面提到的那样,还有其他一些实现方法,使用名为SelectNav.jsJavaScript库是最简单的方法之一 。 这是一个纯JavaScript,不依赖其他第三方库,例如jQuery。

基本上,它将复制您的列表菜单并将其转换为菜单将利用设备本身的本机用户界面。

请参考官方文档以进一步实施。

结论

我们已经从头开始创建响应式导航。 我们在此处创建的这一示例只是示例之一,正如我们在本文前面的声明以及上面所显示的那样,您可以实现许多其他解决方案。 因此,现在由您决定选择最适合您需求的做法和您的网站导航结构。


翻译自: https://www.hongkiat.com/blog/responsive-web-nav/

你可能感兴趣的:(css,html,js,python,javascript)