左侧菜单栏栏下拉菜单css_具有CSS的简单HTML5动画菜单栏

左侧菜单栏栏下拉菜单css

CSS animation can be used to enhance many features of a site, including menu bar navigation. This example shows how a simple primary navigation bar, built with HTML5, can be enhanced and animated in a way that gracefully degrades for older browsers.

CSS动画可用于增强网站的许多功能，包括菜单栏导航。 此示例显示了如何以HTML5内置的简单主导航栏进行增强和动画处理，以适合旧版本浏览器的方式降级。

First, the markup, which is very simple: as the <nav> element should only be used once on a page, we don’t even need to add an id:

首先，标记非常简单：由于<nav>元素仅在页面上使用一次，因此我们甚至不需要添加id ：

<nav>
	<a href="#">Home</a>
	<a href="#">About Us</a>
	<a href="#">Products</a>
</nav>

We’ll add a background image and a few other basic CSS properties to the navigation bar. It is important to remember that while our background images can be any size, we should always crop them to the size that is actually going to be used; otherwise we are loading a giant image and only using a fraction of it. We’ll also add a small shadow to the link text to distinguish it from the background image.

我们将在导航栏中添加背景图片和其他一些基本CSS属性。 重要的是要记住，尽管我们的背景图像可以是任意大小，但我们应始终将其裁剪为实际要使用的大小。 否则，我们将加载一个巨大的图像，并且仅使用其中的一小部分。 我们还将在链接文本中添加一个小阴影，以将其与背景图像区分开。

nav {
	background: url(clouds.jpg) no-repeat;
	padding: 1em 0; 
}
nav a { 
	text-decoration: none;
	color: #fff;
	padding: 1em;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
}

We’ll also add a hover state to the links, which brings in semi-transparent background:

我们还将在链接上添加一个悬停状态，从而引入半透明背景：

nav a:hover {
	background: rgba(0, 0, 0, 0.7);
}

Next, we’ll add an animation component to the default link state, to fade it in over time:

接下来，我们将在默认的链接状态中添加一个动画组件，以使其随时间淡入：

nav a {
	text-decoration: none;
	color: #fff;
	padding: 1em;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
	transition: background 1s;
}

You may notice a small gap between the background blocks of adjacent links. This is the same problem encountered in the very first horizontal navigational bar, and solved in the same way: removing the carriage returns from the between the links:

您可能会注意到相邻链接的背景块之间有一个小的间隙。 这是在第一个水平导航栏中遇到的相同问题，并且以相同的方式解决：从链接之间的中删除回车符：

<nav>
	<a href="#">Home</a><a href="#">About Us</a><a href="#">Products</a>
</nav>

The result: if the browser understands CSS animation, the background fades in and out behind each link on hover. If the browser does not understand CSS animation, the visitor will still see a link background. As always, CSS is appearance, HTML is the markup of data, and the two remain separate.

结果：如果浏览器理解CSS动画 ，则背景将在悬停时在每个链接后面淡入淡出。 如果浏览器不理解CSS动画，访问者仍然会看到一个链接的背景。 与往常一样，CSS是外观，HTML是数据的标记，两者保持独立。

翻译自: https://thenewcode.com/287/Simple-HTML5-Animated-Menu-Bar-With-CSS

左侧菜单栏栏下拉菜单css