Remora：仅CSS的下拉菜单

Horizontal “drop down” menus for site navigation are familiar to almost every web user, so they are a natural fit for sites that have many pages organized into seven or fewer categories.

几乎每个网络用户都熟悉用于网站导航的水平“下拉”菜单，因此它们自然适合将许多页面分为七个或更少类别的网站 。

Many web developers assume that creating a drop down menu requires JavaScript; the reality is that the menu system is merely a nested HTML list, just like those I have feature here in the past, with the presentation handled by CSS, no JavaScript required.

许多Web开发人员认为创建下拉菜单需要JavaScript ； 实际上，菜单系统只是一个嵌套HTML列表 ，就像我过去在这里使用的 列表一样，其显示由CSS处理，不需要JavaScript。

It should be noted that there are many, many CSS drop down menus available. The most well-regarded is “Suckerfish” code, originally developed on A List Apart. The system I am about to describe is an evolution of the ideas expressed in that article, with less vestigial code and fewer concessions to older browsers: thus, “Remora”.

应当指出，有很多可用CSS下拉菜单。 最受人尊敬的是“ Suckerfish ”代码， 该代码最初在A List Apart上开发。 我将要描述的系统是该文章中表达的思想的演变，具有较少的残留代码和对较旧的浏览器的优惠(即“ Remora”)。

First, the code. Since I am using nested lists, you should be careful to ensure that any new lists are contained insidean <li> element.

首先，代码。 由于我使用的是嵌套列表 ，因此应注意确保所有新列表都包含在 <li>元素内。

As I am currently residing in Auckland, I will make the drop down menu for a fictional boat-building website:

当我目前居住在奥克兰时，我将为一个虚构的造船网站制作下拉菜单：

<nav>
	<ul>
		<li><a href="#">Yacht designs</a>
			<ul>
				<li><a href="#">Sloops</a>
				<li><a href="#">Ketches</a>
				<li><a href="#">Yawls</a>
				<li><a href="#">Schooners</a>
			</ul>
		<li><a href=#>Small boat designs</a>
			<ul>
				<li><a href="#">Skiffs</a>
				<li><a href="#">Tenders</a>
				<li><a href="#">Dories</a>
				<li><a href="#">Canoes</a>
				<li><a href="#">Kayaks</a>
			</ul>
		<li><a href="#">Clippers</a>
	</ul>
</nav>

Now the CSS. First, we will mini-reset both the list and links, removing all spacing, text decoration and bullets, while specifying a new font. At the same time, we’ll specify that each link in the list will always display on its own line; by doing so, we can also give links a set width:

现在是CSS。 首先，我们将最小化列表和链接，删除所有间距，文本修饰和项目符号，同时指定一种新字体。 同时，我们将指定列表中的每个链接始终显示在自己的行上； 通过这样做，我们还可以为链接设置width ：

nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 1.4rem;
}
nav ul a {
	text-decoration: none;
	color: #fff;
	background: rgba(0,0,0,0.8);
	font-family: Eurostile, Square 721, Arial, sans-serif;
	display: block;
	width: 10em;
	padding: .4em;
	transition: .3s;
}

This makes the entire navigation vertical, like the accordion menu example. We want the main <li> elements to appear beside each other: we could try display: inline, but that would remove any opportunity to provide them with a width, in the event that we wanted to push the main menu items further apart. inline-block and <flex> have downsides too, in this case, so we’ll float the elements:

就像手风琴菜单示例一样，这使整个导航垂直。 我们希望主要的<li>元素彼此<li>出现：我们可以尝试display: inline ，但是如果我们想将主菜单项进一步display: inline ，那么这将消除任何为它们提供width机会。 inline-block和<flex>也有缺点，在这种情况下，所以我们将浮动元素：

nav ul > li {
	float: left;
	position: relative;
}

Note the use of the immediate child combinator.

注意直接子组合器的使用。

To create the “drop-down” effect we need to visually remove the submenu lists from the page. While there are many possibilities for achieving this, I'll position the submenus absolutely, and then give each submenu a value of 0 for opacity. When the user hovers their mouse over the parent <li>, opacity is reset to 1. A :focus state is added to capture older mobile browsers:

要创建“下拉”效果，我们需要从页面上直观地删除子菜单列表。 尽管有很多方法可以实现此目的，但我将绝对定位子菜单，然后将每个子菜单的opacity 0 。 当用户将鼠标悬停在父<li>, opacity将重置为1 。 添加了:focus状态以捕获较旧的移动浏览器：

nav ul li ul {
	position: absolute;
	opacity: 0;
	transition: .4s;
}
nav ul li:hover ul {
	opacity: 1;
}

You'll find one small issue: you can activate the submenus by moving your mouse over the area where the submenus lie on the screen, because they are still “there”, surrounded by their parent <li> elements, just not visible. At the same time, the drop-down system won't work on older mobile browsers, which have no concept of “hover”. To fix both of these issues, the CSS is adjusted to:

您会发现一个小问题：您可以通过将鼠标移到屏幕上子菜单所在的区域上来激活子菜单，因为它们仍然是“那里”，被其父<li>元素包围，只是不可见。 同时，该下拉系统无法在没有“悬停”概念的旧版移动浏览器上运行。 为了解决这两个问题，CSS调整为：

nav ul li ul {
	position: absolute;
	opacity: 0;
	transition: .4s;
	pointer-events: none; 
}
nav ul li:hover ul,
	nav ul li:focus ul {
		opacity: 1;
		pointer-events: auto;
}

That’s it!. The system could be further improved by @media queries for smaller screen sizes, but I'll leave that for other articles on this blog, and the CodePen repo linked below.

而已！。 对于较小的屏幕尺寸，可以通过@media查询来进一步改进该系统，但是我将在本博客的其他文章以及下面链接的CodePen存储库中保留该功能。

翻译自: https://thenewcode.com/246/Remora-a-CSS-only-dropdown-menu