简单的YouTube菜单效果

View demo 查看演示 Download Source 下载源

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.

今天，我们将向您展示如何重新创建观看视频时在YouTube左侧菜单中看到的小菜单效果(显示为“指南”)。 菜单由一个小的菜单图标，一个标签和单击标签或菜单图标时出现的菜单项列表组成。 单击后，菜单图标向右滑动，标签向上移动，而列表项按顺序淡入。 我们将为其添加更多样式和效果，以使其更加有趣。

So, let’s do it!

所以，让我们开始吧！

标记 (The Markup)

For the HTML we will use a nav element and inside we’ll add a div that will contain the menu icon and the label. We’ll use an unordered list for the menu items:

对于HTML，我们将使用nav元素，并在内部添加一个div，其中将包含菜单图标和标签。 我们将为菜单项使用无序列表：

<nav id="dr-menu" class="dr-menu">
	<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Account</a></div>
	<ul>
		<li><a class="dr-icon dr-icon-user" href="#">Xavier Densmore</a></li>
		<li><a class="dr-icon dr-icon-camera" href="#">Videos</a></li>
		<li><a class="dr-icon dr-icon-heart" href="#">Favorites</a></li>
		<li><a class="dr-icon dr-icon-bullhorn" href="#">Subscriptions</a></li>
		<li><a class="dr-icon dr-icon-download" href="#">Downloads</a></li>
		<li><a class="dr-icon dr-icon-settings" href="#">Settings</a></li>
		<li><a class="dr-icon dr-icon-switch" href="#">Logout</a></li>
	</ul>
</nav>

Each menu item will have a little icon, so we’ll give them all different classes for that. The icons that we’ll be using are from IcoMoon and we’ve created a custom icon set with their brilliant app.

每个菜单项都会有一个小图标，因此我们将为此提供所有不同的类。 我们将使用的图标来自IcoMoon ，我们已经使用其出色的应用程序创建了自定义图标集。

Let’s take a look at the CSS.

让我们看一下CSS。

CSS (The CSS)

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

请注意，CSS将不包含任何供应商前缀，但是您可以在文件中找到它们。

First, we will include our icon font:

首先，我们将包括我们的图标字体：

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

The main nav container will have some general styles, like font size, line-height, color and the dimensions. We want it to be flexible but we don’t want it to become too large or too small, so we’ll set a max-width and min-width:

主导航容器将具有一些常规样式，例如字体大小，行高，颜色和尺寸。 我们希望它具有灵活性，但是我们不希望它变得太大或太小，因此我们将设置最大宽度和最小宽度：

.dr-menu {
	width: 100%;
	max-width: 400px;
	min-width: 300px;
	position: relative;
	font-size: 1.3em;
	line-height: 2.5;
	font-weight: 400;
	color: #fff;
	padding-top: 2em;
}

The division that contains the menu icon span and the label link will be positioned absolutely and we’ll set the cursor to “pointer”. It needs a high z-index to guarantee that the unordered list does not stay on top of it:

包含菜单图标范围和标签链接的分区将绝对定位，我们将光标设置为“指针”。 它需要较高的z索引，以确保无序列表不会停留在其顶部：

.dr-menu > div  {
	cursor: pointer;
	position: absolute;
	width: 100%;
	z-index: 100;
}

The menu icon span in our trigger division will also be positioned absolutely and we’ll give it a transition:

触发器部分中的菜单图标范围也将绝对定位，我们将进行过渡：

.dr-menu > div .dr-icon {
	top: 0;
	left: 0;
	position: absolute;
	font-size: 150%;
	line-height: 1.6;
	padding: 0 10px;
	transition: all 0.4s ease;
}

When we click on the trigger division, we will give a class called “dr-menu-open” to the nav. The menu icon will then slide to the left and we’ll also translate it for the maount of its own width so that it’s put back nicely into place without spilling over:

当我们点击触发部分时，我们将给导航栏一个名为“ dr-menu-open”的类。 然后，菜单图标将滑至左侧，我们还将其平移为其宽度，以便将其很好地放回原位，而不会溢出：

.dr-menu.dr-menu-open > div .dr-icon {
	color: #60a773;
	left: 100%;
	transform: translateX(-100%);
}

In the end of the CSS we will add our icon classes from IcoMoon. The icon in the span for the menu icon will be a bit different, and we’ll use the pseudo class :after to add the little triangle. So, let’s define that as follows:

在CSS的结尾，我们将添加来自IcoMoon的图标类。 菜单图标的跨度中的图标会有所不同，我们将使用伪类：after添加小三角形。 因此，我们将其定义如下：

.dr-menu > div .dr-icon:after {
	content: "e008";
	position: absolute;
	font-size: 50%;
	line-height: 3.25;
	left: -10%;
	opacity: 0;
}

The icon will be absolute and we’ll pull it into place by giving it a left of -10%. The initial opacity is set to 0 because we don’t want to see it initially when the menu is closed.

该图标将是绝对的，我们将其左侧的-10％拉入到位。 初始不透明度设置为0，因为我们不希望菜单关闭时最初看到它。

Once we open the menu, we will want it to become visible:

打开菜单后，我们希望它变得可见：

.dr-menu.dr-menu-open > div .dr-icon:after {
	opacity: 1;
}

The label, which is an anchor in our HTML, will get some general styling and we’ll give it a padding so that it’s next to the menu icon. We’ll also add a transition because we want to animate it up, once we open the menu, which we will do by translating it on the Y-axis:

标签是HTML的锚点，将具有一些常规样式，我们将对其进行填充，使其位于菜单图标旁边。 我们还将添加一个过渡，因为一旦打开菜单，我们就希望对其进行动画处理，这可以通过在Y轴上平移它来完成：

.dr-menu > div .dr-label {
	padding-left: 3em;
	position: relative;
	display: block;
	color: #60a773;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 2.75;
	transition: all 0.2s ease-in;
}

.dr-menu.dr-menu-open > div .dr-label {
	transform: translateY(-90%);
}

The unordered list will initially be invisible by having a opacity of 0:

最初，无序列表的不透明度为0：

.dr-menu ul {
	padding: 0;
	margin: 0 3em 0 0;
	list-style: none;
	opacity: 0;
	position: relative;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0s linear 205ms;
}

When we open the menu we want it to get visible and a high z-index so that the trigger div does not cover it:

当我们打开菜单时，我们希望它变得可见并具有较高的z索引，以便触发器div不能覆盖它：

.dr-menu.dr-menu-open ul {
	opacity: 1;
	z-index: 200;
	pointer-events: auto;
	transition: opacity 0s linear 0s;
}

The two transitions are for opening and closing the menu. When we open the menu, we want it to appear immediately without a delay and when we close it, i.e. remove the class, we want that it happens with a delay. That delay is defined by the delay of the last item in the list, as we will see shortly.

这两个过渡用于打开和关闭菜单。 当我们打开菜单时，我们希望它立即出现而没有延迟，而当我们关闭它(即删除该类)时，我们希望它发生延迟。 该延迟由列表中最后一项的延迟定义，我们将很快看到。

The list items will also be invisible and we’ll set a transition for the opacity:

列表项也将不可见，我们将为不透明度设置一个过渡：

.dr-menu ul li {
	display: block;
	margin: 0 0 5px 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dr-menu.dr-menu-open ul li {
	opacity: 1;
}

Now, each list item will appear with a different delay: the first item will fade in immediately and the last item will appear in the end:

现在，每个列表项将以不同的延迟出现：第一个项将立即淡入，最后一个项将出现在末尾：

.dr-menu.dr-menu-open ul li:nth-child(2) {
	transition-delay: 35ms;
}

.dr-menu.dr-menu-open ul li:nth-child(3) {
	transition-delay: 70ms;
}

.dr-menu.dr-menu-open ul li:nth-child(4) {
	transition-delay: 105ms;
}

.dr-menu.dr-menu-open ul li:nth-child(5) {
	transition-delay: 140ms;
}

.dr-menu.dr-menu-open ul li:nth-child(6) {
	transition-delay: 175ms;
}

.dr-menu.dr-menu-open ul li:nth-child(7) {
	transition-delay: 205ms;
}

The links will have some padding and we’ll set them as inline-blocks:

链接会有一些填充，我们将它们设置为内联块：

.dr-menu ul li a {
	display: inline-block;
	padding: 0 20px;
	color: #fff;
}

And we’ll change the color on hover:

我们将在悬停时更改颜色：

.dr-menu ul li a:hover {
	color: #60a773;
}

Last, but not least, let’s define the icon pseudo-elements:

最后但并非最不重要的一点，让我们定义图标伪元素：

.dr-icon:before, 
.dr-icon:after {
	position: relative;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.dr-menu ul .dr-icon:before {
	margin-right: 15px;
}

.dr-icon-bullhorn:before {
	content: "e000";
}

.dr-icon-camera:before {
	content: "e002";
}

.dr-icon-heart:before {
	content: "e003";
}

.dr-icon-settings:before {
	content: "e004";
}

.dr-icon-switch:before {
	content: "e005";
}

.dr-icon-download:before {
	content: "e006";
}

.dr-icon-user:before {
	content: "e001";
}

.dr-icon-menu:before {
	content: "e007";
}

And that’s all the style. Let’s take a look at the JavaScript.

这就是所有样式。 让我们看一下JavaScript。

JavaScript (The JavaScript)

We’ll create a small script that will take care of the menu functionality. When we click on the trigger division, we want the menu wrapper to get the class “dr-menu-open”. Since we will be animating the label out and the menu icon to the right, we want the closing to happen only when we click on the menu icon, just like in the YouTube menu:

我们将创建一个小脚本，它将处理菜单功能。 当我们单击触发部分时，我们希望菜单包装器获得“ dr-menu-open”类。 由于我们将为标签和右边的菜单图标设置动画，因此我们希望仅在单击菜单图标时才进行关闭操作，就像在YouTube菜单中一样：

var YTMenu = (function() {

	function init() {
		
		[].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {

			var trigger = el.querySelector( 'div.dr-trigger' ),
				icon = trigger.querySelector( 'span.dr-icon-menu' ),
				open = false;

			trigger.addEventListener( 'click', function( event ) {
				if( !open ) {
					el.className += ' dr-menu-open';
					open = true;
				}
			}, false );

			icon.addEventListener( 'click', function( event ) {
				if( open ) {
					event.stopPropagation();
					open = false;
					el.className = el.className.replace(/bdr-menu-openb/,'');
					return false;
				}
			}, false );

		} );

	}

	init();

})();

And that’s it! I hope you enjoyed this tutorial and find it useful!

就是这样！ 我希望您喜欢本教程并发现它有用！

翻译自: https://tympanus.net/codrops/2013/04/25/simple-youtube-menu-effect/