快速提示：为Orman导航提供：target处理

最新推荐文章于 2024-09-25 10:59:43 发布

daique1908

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量187

点赞数

文章标签： java css js html python ViewUI

我们最近发布了一篇很棒的教程，该教程将Orman Clark的垂直导航菜单构建为一个灵活的，由jQuery驱动的灵活手风琴。实际上，无需使用jQuery就可以使整个工作正常进行，并且是使用CSS：target选择器的绝佳机会。

又怎样？

我们将忘记jQuery，而是使用CSS :target伪选择器使我们的手风琴菜单展开和收缩。

提醒一下，这是原始的jQuery演示，然后是纯CSS方法。

`:target`伪选择器

您无疑将熟悉如下所示的URL： http : //www.w3.org/TR/selectors/#target-pseudo 。它以一个＃号和一个元素ID结尾，该ID用于将浏览器直接带到该元素。这个特定的url是一个完美的示例-它带您进入ID为＃target-pseudo的标题（可以随意阅读）。

缝合到url的末尾时，此id称为片段标识符。它不仅用于将浏览器带到页面上的某个位置，还可以通过CSS用于识别所涉及的元素。

简而言之; 我们使用:target选择和操作片段标识符中的元素。

步骤1：我们可以开始吗？

让我们从第一个教程中下载原始源文件开始。造型已经为我们完成，因此重新设计轮子毫无意义。

首先打开index.html，在第10行，您将看到已引用jQuery。我们将不需要它，所以摆脱它。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		
		<title>Vertical Navigation Menu: CSS3 Coded</title>
		
		<link rel="stylesheet" href="css/styles.css">
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
						
	</head>
<body>

然后在文档的底部，您将找到使jQuery手风琴启动并运行的函数。也摆脱所有这些。

<!--initiate accordion-->
<script type="text/javascript">
	$(function() {
	
	    var menu_ul = $('.menu > li > ul'),
	           menu_a  = $('.menu > li > a');
	    
	    menu_ul.hide();
	
	    menu_a.click(function(e) {
	        e.preventDefault();
	        if(!$(this).hasClass('active')) {
	            menu_a.removeClass('active');
	            menu_ul.filter(':visible').slideUp('normal');
	            $(this).addClass('active').next().stop(true,true).slideDown('normal');
	        } else {
	            $(this).removeClass('active');
	            $(this).next().stop(true,true).slideUp('normal');
	        }
	    });
	
	});
</script>

优秀的。我们现在有了一个更清洁的基础。

步骤2：我可以看到一些身份证明吗？

如上所述， :target选择器将指向片段标识符中引用的任何元素。因此，我们需要确保我们的主列表项都具有唯一的ID，并且其中的锚点具有相应的链接：

<li class="item1" id="one"><a href="#one">Friends <span>340</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>

现在，当您单击链接时，您会看到一个片段标识符出现在URL中：

步骤3：收合

目前，删除了所有jQuery的小知识和鲍勃之后，手风琴将得到完全扩展。我们需要折叠其初始状态，以便在单击链接时可以显示每个子节。

转到现有CSS文件，我们将在底部添加一些规则：

/*additional styles*/

.menu > li > ul {
	height: 0;
	overflow: hidden;
}

我们在这里指向我们的子菜单； .menu列表项的任何直接后代。我们说的是它们的初始高度为0，并且任何溢出都被隐藏起来以防止内容进入其视线。我们现在整个事情都崩溃了。除非我们对此有所行动，否则这将保持不变。

步骤4：并展开

我们希望每个子菜单都可以扩展，但是仅当我们单击其父链接时才可以。让我们使用:target选择它们：

.menu > li:target > ul {
    height: auto;
}

简而言之，它说：“看到URL中提到的li吗？好吧，将其中ul的高度更改为auto”。一旦您单击其他位置并且id不再出现在url中，子菜单就会再次折叠。试试吧！

步骤5：点缀

在视觉上，还有几件事要做。活动状态不再由jQuery分配，因此我们需要确保：target列表项为蓝色。这些不再存在：

.menu > li > a.active

.menu > li a.active span

因此，将它们换成这些：

.menu > li:target > a

.menu > li:target > a span

我们还将在扩展子菜单的底部添加边框：

.menu > li:target > ul {
    height: auto;
    border-bottom: 1px solid #51555a;
}

OK，Orman会很高兴的：) 看看到目前为止我们有什么。

步骤6：转换

我知道。您在屏幕上大喊“平滑过渡怎么样？！” 恐怕你会失望的。除非我们为子菜单指定一个确定的高度，否则我们将无法使用CSS过渡来平滑扩展和折叠手风琴。转场不能与height: auto很好地配合。当然，您可以指定一个确定的高度：

.menu > li:target > ul {
    height: 7.9em;
    border-bottom: 1px solid #51555a;
}

然后应用过渡：

.menu > li > ul {
	height: 0;
	overflow: hidden;
	
	-webkit-transition: height 0.3s ease-in-out;
	-moz-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	-ms-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}

..但您的菜单将不再100％灵活。您将只能使用特定数量（3）的子菜单项。查看演示。

为了使事情顺利进行，我们可以做的是向另一个属性添加过渡。我们无法进行高度转换，因此我们将使用不透明转换：

.menu > li > ul {
	height: 0;
	overflow: hidden;
	
	opacity: 0; 
  	filter: alpha(opacity=0); /* IE6-IE8 */
	
	-webkit-transition: opacity 0.9s ease-in-out;
	-moz-transition: opacity 0.9s ease-in-out;
	-o-transition: opacity 0.9s ease-in-out;
	-ms-transition: opacity 0.9s ease-in-out;
	transition: opacity 0.9s ease-in-out;
}

.menu > li:target > ul {
    height: auto;
    border-bottom: 1px solid #51555a;
    
	opacity: 1; 
  	filter: alpha(opacity=100); /* IE6-IE8 */
}

我们已经完成了将子菜单的默认不透明度设置为0的操作；它不仅具有0的高度，而且现在也透明。然后，我们还将过渡设置为默认状态。在悬停状态下，它仍然会突然张开，但随后内容会淡入视图。在眼睛上容易一点。

步骤7：旧版浏览器

另一个问题是:target旧的浏览器（Internet Explorer 8及更低版本）无法识别:target ，因此折叠的菜单在这些浏览器中变得无用。让我们应用几种替代方法，这些方法至少将使导航变得可访问。

首先，如果浏览器是Internet Explorer 8或更早版本，我们将添加条件注释（在我们的初始CSS请求之后）以拉入辅助CSS文件：

<!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->

然后，在该文件中，我们仅重复我们刚刚处理过的规则，但不使用:target ，而是使用:hover 。

.menu > li:hover > ul {
    height: 7.9em;
    border-bottom: 1px solid #51555a;
}

再次，检查演示。这与我们所追求的不完全相同，但至少是向后兼容，可访问的导航。

结论

如果有选择的话，您可能仍然会选择jQuery方法。它同样在所有浏览器中都接受（只要启用了JavaScript），效果就更流畅了。不过，如果您不知道:target选择器，那么本“快速提示”将使您对更多CSS潜力有所了解。

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-give-ormans-navigation-the-target-treatment--webdesign-6121