响应式视网膜就绪菜单（RESPONSIVE RETINA-READY MENU）---来自codrops

最新推荐文章于 2021-08-04 00:41:16 发布

weixin_30384217

最新推荐文章于 2021-08-04 00:41:16 发布

阅读量157

点赞数

原文链接：http://www.cnblogs.com/fushengbanxing/archive/2013/06/02/3114495.html

版权

此教程略长，请耐心！

如果你E文很OK，请移步至原文：http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/

A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

一个响应式，触摸友好并且视网膜就绪的菜单，它通过三种布局来适应不同的浏览器尺寸。

VIEW DEMO DOWNLOAD SOURCE

Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize.

受到Maliwan厂商的游戏《无地之主》的启发，今天我们将要创建一个视网膜就绪（Retina-Ready）的多彩响应式菜单。这个菜单将会根据浏览器窗口的尺寸自动改变到三种不同布局（layout）中的一种，三种布局指：一个“桌面”内联版本，一个两列的平板优化版本和一个为了适应更小屏幕使用菜单链接来显示和隐藏导航的移动版本。为了使这个菜单完全得视网膜就绪，我们将使用图标字体（icon font），如此一来菜单上的图标在调整大小时将不会产生锯齿。

PREPARING THE ICON FONT

Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. Icon fonts behave like any font, so you can easily change the color, adapt the size and it won’t get pixelized. Perfect for retina devices without having to use multiple assets for different screen resolutions.

准备图标字体

创造一个自定义的图标字体也许看起来有一点复杂，但是在使用像IcoMoon这样的工具时，它就只是创建图标并将其导入工具罢了。图标和任何字体表现一致，所以你可以很容易得改变颜色，调整尺寸，但是它不会产生锯齿。除了为适应不同的屏幕分辨率不得不使用多重资源的情况，图标字体对于视网膜设备是完美的。

The first thing we need to do is to create the icons for the menu. I use Illustrator, but any vector graphics editor like, for example Inkscape, will do. We need to create each icon and export them as a SVG file. To make sure the icon will work properly in every browser, we have to convert all lines into full objects, and merge all the objects into one big shape for each icon. Once all have been exported into nice SVG files, we can import them all into the IcoMoon App tool:

我们要做的第一件事是创建所有的菜单图标。我使用 Illustrator，当然任何矢量图形编辑器都可以，比如lnkscape。我们需要创建每一个图标并导出为一个SVG文件。为了确保图标能在每一个浏览器下正常工作，对于每个图标我们必须把所有的线条转换为对象，并把所有的对象合并成一个形状。一旦所有的图标都被导出为

SVG文件后，我们就能把它们导入到 IcoMoon ：

IcoMoon import SVG

We can also enhance our font with icons from the big library that IcoMoon offers. Once we have all the icons we need, we click on the “Font” button at the bottom of the page to enter the detailed settings. On this page we can choose the encoding settings for the font, and also choose if we want to assign some letters for each icon, or prefer to use the Private Use Area of the font to make sure screen readers won’t be able to output them. I recommend using the default settings that work pretty well.

我们也可以通过lcoMoon提供的库来增强我们的图标字体。一旦我们得到了所需的所有图标，我们单击页面底部的“Font”按钮进入详细设置。在这个页面我们可以选择字体的编码，也可以为每个图标选择分配一些我们想要的字母，或者喜欢使用字体的私有使用区域来确保屏幕阅读器不会输出他们。我建议使用默认设置，因为它工作的很好。

Font Settings

When we click on “Download” we get a ZIP file with 4 font formats (SVG, EOT, TTF and WOFF), the CSS styling and a demo page.

The first thing to do to be able to use the icons is to copy and paste the CSS IcoMoon provides to the top of our CSS file and make sure we also copy the font folder. There’s also a little “hack” to make the fonts look nicer on Chrome Windows you might want to check it out.

当我们点击“Download”按钮，我们得到一个ZIP文件，里面包含四种字体格式（SVG,EOT,TTF和WOFF），CSS和一个示例页面。

为了能使用这些图标，我们首先拷贝并粘贴CSS lcoMoon到我们的CSS文件的开头并确保同时拷贝了字体文件夹.其中也有一些使字体在Chorme窗口看起来漂亮的“hack”，你也许想要检查一下。

THE HTML OF THE MENU

菜单的HTML：

Here is what the HTML for our navigation looks like:

这是我们的导航HTML：

<ul>

<li>

Home

</a>

</li>

<li>

<a href="#" title=""> Services</a>

</li>

<li>

<a href="#" title="">Portfolio</a>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#" title="">Contact</a>

</li>

</ul>

</nav>

To use the icon font, we simply use the class “icon-iconname” inside an i element (a span will work as well). Also note that we added a no-js class to the body that will be changed to js with Modernizr. The idea is to be able to leave the menu open if the user has JavaScript disabled. We’ll also use Modernizr to detect touch support.

为了使用图标字体，我们只需要为一个i元素（一个span元素同样有效）使用class “icon-iconname”。同时注意我们在body里添加了一个"no-js"的class，它将会被替换为Modernizr js。这么做是为了在用户禁用JavaScript时使菜单保持畅通（可用）。我们也使用Modernizr来检测触摸支持。

THE CSS & JAVASCRIPT

Note that I won’t prefix the CSS3 properties here but you will find the prefixed version in the files.

The global CSS that gets applied to all screen sizes looks as follows:

CSS&JAVASCRIPT

注意到此处我没有前置CSS3属性，但是你会在文件中找到前置的版本。

应用于所有屏幕尺寸的全局CSS如下：

/* Global CSS that are applied for all screen sizes */

.nav ul {

max-width: 1240px;

margin: 0;

padding: 0;

list-style: none;

font-size: 1.5em;

font-weight: 300;

}

.nav li span {

display: block;

}

.nav a {

display: block;

color: rgba(249, 249, 249, .9);

text-decoration: none;

transition: color .5s, background .5s, height .5s;

}

.nav i{

/* Make the font smoother for Chrome */

transform: translate3d(0, 0, 0);

}

/* Remove the blue Webkit background when element is tapped */

a, button {

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

We want a first little transition on the whole navigation that lowers the opacity of all the items, except the one that is being hovered. This is the code for that:

我们首先需要一个作用于整个导航上并降低所有项（item）透明度的过渡效果，除了被鼠标悬停的。下面是对应的代码：

/* Hover effect for the whole navigation to make the hovered item stand out */

.no-touch .nav ul:hover a {

color: rgba(249, 249, 249, .5);

}

.no-touch .nav ul:hover a:hover {

color: rgba(249, 249, 249, 0.99);

}

Then we want to add some nice background colors to all of the items. The code below uses a nth-child technique to select the list items. This way, you can add as many list items as you want, the color code will repeat itself.

接着我们需要在所有的条目上添加一些漂亮的背景颜色。下面的代码使用了nth-child技术去选择列表项目。这样，你可以按你的需要添加足够的列表项目，颜色代码将重复。

.nav li:nth-child(6n+1) {

background: rgb(208, 101, 3);

}

.nav li:nth-child(6n+2) {

background: rgb(233, 147, 26);

}

.nav li:nth-child(6n+3) {

background: rgb(22, 145, 190);

}

.nav li:nth-child(6n+4) {

background: rgb(22, 107, 162);

}

.nav li:nth-child(6n+5) {

background: rgb(27, 54, 71);

}

.nav li:nth-child(6n+6) {

background: rgb(21, 40, 54);

}

Using a min-width media query, we can target screens that are bigger than 800px (50em, with a body font size of 15px) to transform our list into a nice horizontal navigation:

通过使用一个min-width媒体查询，我们可以在大于800px（50em,body的字体大小为15px）的目标屏幕上把我们的列表转变为一个漂亮的水平导航：

@media (min-width: 50em) {

/* Transforms the list into a horizontal navigation */

.nav li {

float: left;

width: 16.66666666666667%;

text-align: center;

transition: border .5s;

}

.nav a {

display: block;

width: auto;

}

We continue with the nth-child selecting technique, to add a 4px border with different colors to each of our menu items. We apply it on hover, but also on focus and active to make it work on touch devices and on keyboard access.

接着我们借助 nth-child 选择器技术为每一个菜单项添加一个不同颜色的4px边框。为了能在触摸设备上和键盘访问时工作，我们不仅在它处于hover时，也在它处于focus和active时应用边框设置，。

/* hover, focused and active effects that add a little colored border to the different items */

.no-touch .nav li:nth-child(6n+1) a:hover,

.no-touch .nav li:nth-child(6n+1) a:active,

.no-touch .nav li:nth-child(6n+1) a:focus {

border-bottom: 4px solid rgb(174, 78, 1);

}

.no-touch .nav li:nth-child(6n+2) a:hover,

.no-touch .nav li:nth-child(6n+2) a:active,

.no-touch .nav li:nth-child(6n+2) a:focus {

border-bottom: 4px solid rgb(191, 117, 20);

}

.no-touch .nav li:nth-child(6n+3) a:hover,

.no-touch .nav li:nth-child(6n+3) a:active,

.no-touch .nav li:nth-child(6n+3) a:focus {

border-bottom: 4px solid rgb(12, 110, 149);

}

.no-touch .nav li:nth-child(6n+4) a:hover,

.no-touch .nav li:nth-child(6n+4) a:active,

.no-touch .nav li:nth-child(6n+4) a:focus {

border-bottom: 4px solid rgb(10, 75, 117);

}

.no-touch .nav li:nth-child(6n+5) a:hover,

.no-touch .nav li:nth-child(6n+5) a:active,

.no-touch .nav li:nth-child(6n+5) a:focus {

border-bottom: 4px solid rgb(16, 34, 44);

}

.no-touch .nav li:nth-child(6n+6) a:hover,

.no-touch .nav li:nth-child(6n+6) a:active,

.no-touch .nav li:nth-child(6n+6) a:focus {

border-bottom: 4px solid rgb(9, 18, 25);

}

Then we place the icons and the text:

接着我们放置图标和文本：

/* Placing the icon */

.icon {

padding-top: 1.4em;

}

.icon + span {

margin-top: 2.1em;

transition: margin .5s;

}

We animate the height of the elements when they are hovered:

当它们被触摸时，我们令它产生一个元素的高度动画。

/* Animating the height of the element*/

.nav a {

height: 9em;

}

.no-touch .nav a:hover ,

.no-touch .nav a:active ,

.no-touch .nav a:focus {

height: 10em;

}

/* Making the text follow the height animation */

.no-touch .nav a:hover .icon + span {

margin-top: 3.2em;

transition: margin .5s;

}

Then we position the icons and prepare them for the CSS transition:

然后我们定位图标来为CSS变换做准备。

/* Positioning the icons and preparing for the animation*/

.nav i {

position: relative;

display: inline-block;

margin: 0 auto;

padding: 0.4em;

border-radius: 50%;

font-size: 1.8em;

box-shadow: 0 0 0 0.8em transparent;

background: rgba(255,255,255,0.1);

transform: translate3d(0, 0, 0);

transition: box-shadow .6s ease-in-out;

}

To give the visuel effect we want, we transition a box shadow and change its size from 0.8em to 0, and its color from transparent to some color with a high opacity. This is also where we close our first media-query.

为了产生一个我们需要的可视化效果，我们让盒模型的阴影产生过渡效果并且将它的的尺寸从0.8em变到0，将它的颜色从透明变到具有高透明度的一些颜色。到此我们结束第一个媒体查询。

/* Animate the box-shadow to create the effect */

.no-touch .nav a:hover i,

.no-touch .nav a:active i,

.no-touch .nav a:focus i {

box-shadow: 0 0 0px 0px rgba(255,255,255,0.2);

transition: box-shadow .4s ease-in-out;

}

We set a second media query to make some little adjustments for screens between 800 and 980px:

我们设置第二个媒体查询来对在800-980px的屏幕做一些小调整。

@media (min-width: 50em) and (max-width: 61.250em) {

/* Size and font adjustments to make it fit better */

.nav ul {

font-size: 1.2em;

}

Now that we have finished the “desktop” version (with BIG quotation mark since more and more tablets now have 1024px and larger screens), we take care of the “global” CSS for screens that are smaller than 800px which equals to 49.938em here, using a max-width media query.

现在我们已经完成了“桌面”版本（有一个很大的引号因为越来越多的平板现在有1024px甚至更大的屏幕），对于小于800px（在这里等于49.938em）的屏幕

我们使用一个max-width的媒体查询来处理一下“全局”CSS（global CSS）

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {

/* Instead of adding a border, we transition the background color */

.no-touch .nav ul li:nth-child(6n+1) a:hover,

.no-touch .nav ul li:nth-child(6n+1) a:active,

.no-touch .nav ul li:nth-child(6n+1) a:focus {

background: rgb(227, 119, 20);

}

.no-touch .nav li:nth-child(6n+2) a:hover,

.no-touch .nav li:nth-child(6n+2) a:active,

.no-touch .nav li:nth-child(6n+2) a:focus {

background: rgb(245, 160, 41);

}

.no-touch .nav li:nth-child(6n+3) a:hover,

.no-touch .nav li:nth-child(6n+3) a:active,

.no-touch .nav li:nth-child(6n+3) a:focus {

background: rgb(44, 168, 219);

}

.no-touch .nav li:nth-child(6n+4) a:hover,

.no-touch .nav li:nth-child(6n+4) a:active,

.no-touch .nav li:nth-child(6n+4) a:focus {

background: rgb(31, 120, 176);

}

.no-touch .nav li:nth-child(6n+5) a:hover,

.no-touch .nav li:nth-child(6n+5) a:active,

.no-touch .nav li:nth-child(6n+5) a:focus {

background: rgb(39, 70, 90);

}

.no-touch .nav li:nth-child(6n+6) a:hover,

.no-touch .nav li:nth-child(6n+6) a:active,

.no-touch .nav li:nth-child(6n+6) a:focus {

background: rgb(32, 54, 68);

}

.nav ul li {

transition: background 0.5s;

}

For screen size between 520px (32.5em) and 799px (49.938em), we want to display our menu into a 2 columns and 3 rows layout. We add some padding to make the elements easy to “tap”, and display the icons on the left and the text on the right.

对于在520px(32.5em)和799px(49.938em)之间的屏幕尺寸，我们需要用一个2列3行布局来显示我们的菜单。为了使元素容易被点击我们添加一些内补丁（paddding），并且将图标显示在左边，文本显示在右边。

/* CSS for a 2x3 columns version */

@media (min-width: 32.5em) and (max-width: 49.938em) {

/* Creating the 2 column layout using floating elements once again */

.nav li {

display: block;

float: left;

width: 50%;

}

/* Adding some padding to make the elements look nicer*/

.nav a {

padding: 0.8em;

}

/* Displaying the icons on the left, and the text on the right side using inline-block */

.nav li span,

.nav li span.icon {

display: inline-block;

}

.nav li span.icon {

width: 50%;

}

.nav li .icon + span {

font-size: 1em;

}

.icon + span {

position: relative;

top: -0.2em;

}

The animation for big screen is too complex to fit into smaller screens, so we adapt it to make it simpler and more discreet and simply animate the border. This is where we close our media query.

这个为大屏幕而生的动画由于太复杂而无法适应更小的屏幕，所以我们改变它使它更简单，更周全，并且简单地产生边框动画。此处我们结束媒体查询。

/* Adapting the icons to animate the size and border of the rounded background in a more discreet way */

.nav li i {

display: inline-block;

padding: 8% 9%;

border: 4px solid transparent;

border-radius: 50%;

font-size: 1.5em;

background: rgba(255,255,255,0.1);

transition: border .5s;

}

/* Transition effect on the border color */

.no-touch .nav li:hover i,

.no-touch .nav li:active i,

.no-touch .nav li:focus i {

border: 4px solid rgba(255,255,255,0.1);

}

Again, for smaller screens we adapt the font-size and width.

我们为更小的屏幕再一次改变字体大小和宽度。

/* Adapting the font size and width for smaller screns*/

@media (min-width: 32.5em) and (max-width: 38.688em) {

.nav li span.icon {

width: 50%;

}

.nav li .icon + span {

font-size: 0.9em;

}

For very small screens, we hide the navigation and display a “menu” button the user can click if he wants to display the navigation. To do this, we rely on some lines of JavaScript:

对于那些非常小的屏幕，我们隐藏导航并且显示一个“菜单” 按钮，用户可以点击如果他想显示导航。为了做到这样，我们需要依靠一些Javascript：

// The function to change the class

var changeClass = function (r,className1,className2) {

var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");

if( regex.test(r.className) ) {

r.className = r.className.replace(regex,' '+className2+' ');

}

else{

r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');

}

return r.className;

};

// Creating our button for smaller screens

var menuElements = document.getElementById('menu');

menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"> Menu</button>');

// Toggle the class on click to show / hide the menu

document.getElementById('menutoggle').onclick = function() {

changeClass(this, 'navtoogle active', 'navtoogle');

}

In order to have a cleaner HTML, I chose to create the “menu” button and insert it in the DOM using JavaScript. The function changeClass helps us to toggle the class between active and no class when the users clicks on the button.

Now that we have all we need for the small screen version, we can style it with CSS. The following code styles the menu button:

为了HTML简洁。我选择了创建这个“菜单”按钮并且使用JavaScript插入到DOM。当用户们点击按钮时，函数changeClass帮助我们让class在active和没有class之间切换。

现在，对于小屏幕版本我们有了所有需要的，我们可以使用CSS来为它添加样式。以下的代码为菜单按钮添加了样式：

/* Styling the toggle menu link and hiding it */

.nav .navtoogle{

display: none;

width: 100%;

padding: 0.5em 0.5em 0.8em;

font-family: 'Lato',Calibri,Arial,sans-serif;

font-weight: normal;

text-align: left;

color: rgb(7, 16, 15);

font-size: 1.2em;

background: none;

border: none;

border-bottom: 4px solid rgb(221, 221, 221);

cursor: pointer;

}

.icon-menu {

position: relative;

top: 3px;

line-height: 0;

font-size: 1.6em;

}

By default, the menu button is hidden. We want to display it for screens smaller than 519px (32.438em):

默认情况下，这个菜单按钮是隐藏的。对于小于519px（32.438em）的屏幕我们需要显示它。

@media (max-width: 32.438em) {

/* Unhiding the styled menu link */

.nav .navtoogle{

margin: 0;

display: block;

}

We animate the height of the navigation when the button is clicked. To close the navigation, we give it a 0em height, to open it, we give it a 30em max-height. If JavaScript is not enabled, we don’t have any button, so we use the no-js class to always display the navigation.

当按钮被点击时我们使导航产生高度动画。为了关闭导航，我们赋予它一个0em的高度，为了打开它，我们赋予它一个30em的高度。如果JavaScript没有被开启，我们不会有任何按钮，所以我们使用“no-js”class来确保始终显示导航。

/* Animating the height of the navigation when the button is clicked */

/* If JavaScript is disabled, the menu stays open */

.no-js .nav ul {

max-height: 30em;

overflow: hidden;

}

When JavaScript is enabled we hide the menu by default, and display it when the users clicks on the button which then gets the active class:

当JavaScript开启时我们默认隐藏菜单。当用户们点击按钮，紧接着菜单拥有一个active的class时，我们显示它。

/* When JavaScript is enabled, we hide the menu */

.js .nav ul {

max-height: 0em;

overflow: hidden;

}

/* Displaying the menu when the user has clicked on the button */

.js .nav .active + ul {

max-height: 30em;

overflow: hidden;

transition: max-height .4s;

}

We adapt the layout for smaller screens, presenting the navigation in a list of items with the icon on the left and the text on the right side:

对于更小的屏幕我们改变布局，把导航展现为一个图标在左，文本在右的项目（items）列表。

/* Adapting the layout of the menu for smaller screens: icon on the left and text on the right */

.nav li span {

display: inline-block;

height: 100%;

}

.nav a {

padding: 0.5em;

}

.icon + span {

margin-left: 1em;

font-size: 0.8em;

}

We also add a 8px border on the left of each item with a nice color

我们也在每个项目的左边添加一个颜色漂亮的8px边框

/* Adding a left border of 8 px with a different color for each menu item*/

.nav li:nth-child(6n+1) {

border-left: 8px solid rgb(174, 78, 1);

}

.nav li:nth-child(6n+2) {

border-left: 8px solid rgb(191, 117, 20);

}

.nav li:nth-child(6n+3) {

border-left: 8px solid rgb(13, 111, 150);

}

.nav li:nth-child(6n+4) {

border-left: 8px solid rgb(10, 75, 117);

}

.nav li:nth-child(6n+5) {

border-left: 8px solid rgb(16, 34, 44);

}

.nav li:nth-child(6n+6) {

border-left: 8px solid rgb(9, 18, 25);

}

The navigation looks nice when testing its small version on desktop. But on mobile devices the items might be hard to tap. Using Modernizr we can detect the touch capability of the device. If the device has touch capabilities, a touch class is added to the body. We can use this class to enhance the experience on touch devices and make the navigation items a little bit bigger so that the user can tap them more easily. And here we close our last media query.

当我们在桌面测试导航的小尺寸版本时，它看起来很不错。但是在移动设备上项目可能很难被轻触（tap）。使用Moderizr我们可以侦测设备的触摸功能。如果设备有触摸功能，一个touch class被添加到body。我们可以使用这个class来增强在触摸设备上的体验并且使导航项稍微大一点，这样用户可以容易的轻触它们。此处我们结束最后一个媒体查询。

/* make the nav bigger on touch screens */

.touch .nav a {

padding: 0.8em;

}

And that’s it, we’ve build a nice, touch-friendly and retina-ready navigation that works fine on desktop, tablet and mobile devices. Hope you liked it!

就是这样，我们创建了一个漂亮，触摸友好并且视网膜就绪的导航，它在桌面，平板和移动设备上都工作良好。希望你能喜欢它。

转载于:https://www.cnblogs.com/fushengbanxing/archive/2013/06/02/3114495.html