{"id":187460,"date":"2013-07-22T17:41:05","date_gmt":"2013-07-22T13:41:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=187460"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=187460","title":{"rendered":"\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 retina<\/span>"},"content":{"rendered":"
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0434\u0435\u0432\u0430\u0439\u0441\u0430). \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 retina-\u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. <\/p>\n

<\/p>\n

\u0414\u0435\u043c\u043e<\/a> \/ \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a>
<\/a><\/p>\n

\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430<\/h4>\n

\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043d\u043e \u043a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. IcoMoon<\/a> \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n

\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c SVG-\u0444\u0430\u0439\u043b\u044b \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 IcoMoon:<\/p>\n

<\/p>\n

\u041d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u0430, \u043c\u043e\u0436\u043d\u043e \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445. \u041a\u0430\u0436\u0434\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043a\u043b\u0430\u0432\u0438\u0448\u0443:<\/p>\n

<\/p>\n

\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f ZIP-\u0444\u0430\u0439\u043b \u0441\u043e \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438 \u0432 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445: SVG, EOT, TTF \u0438 WOFF, \u0430 \u0442\u0430\u043a\u0436\u0435 CSS \u0444\u0430\u0439\u043b \u0438 \u0434\u0435\u043c\u043e-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u041a\u0441\u0442\u0430\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u0448\u0440\u0438\u0444\u0442 \u043b\u0443\u0447\u0448\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0441\u044f \u0432 Chrome, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0445\u0430\u043a<\/a>.<\/p>\n

HTML<\/h4>\n

\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0435\u043d\u044e:<\/p>\n

<nav  id="menu" class="nav">       <ul>         <li>             <a  href="#" title="">                 <span  class="icon"> <i aria-hidden="true"  class="icon-home"><\/i><\/span><span>Home<\/span>             <\/a>         <\/li>         <li>                   <a href="#" title=""><span class="icon"> <i aria-hidden="true" class="icon-services"><\/i><\/span><span>Services<\/span><\/a>            <\/li>          <li>             <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-portfolio"><\/i><\/span><span>Portfolio<\/span><\/a>         <\/li>         <li>             <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-blog"><\/i><\/span><span>Blog<\/span><\/a>          <\/li>         <li>             <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-team"><\/i><\/span><span>The  team<\/span><\/a>             <\/li>         <li>             <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-contact"><\/i><\/span><span>Contact<\/span><\/a>         <\/li>     <\/ul> <\/nav> <\/code><\/pre>\n
  \u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CSS-\u043a\u043b\u0430\u0441\u0441 \u00abicon-iconname\u00bb \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 i<\/b>. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u0430\u0441\u0441 \u00abno-js\u00bb \u0432 body<\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0430\u0441\u0441 \u00abjs\u00bb \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Modernizr<\/a>. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u0435\u043d\u044e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c JavaScript.<\/p>\n
CSS \u0438 JavaScript<\/h4>\n
  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 CSS \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0438\u043f\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u043e\u0432:<\/p>\n
.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{     \/* \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u0434\u043b\u044f Chrome *\/     transform: translate3d(0, 0, 0); }   \/* \u0423\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0438\u043d\u0438\u0439 Webkit-\u0444\u043e\u043d \u043f\u0440\u0438 \u0442\u0430\u043f\u0435 \u043d\u0430 \u0442\u0430\u0447-\u0441\u043a\u0440\u0438\u043d\u0435 *\/   a, button {     -webkit-tap-highlight-color: rgba(0,0,0,0); } <\/code><\/pre>\n
  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 hover-\u044d\u0444\u0444\u0435\u043a\u0442:<\/p>\n
.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); } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e nth-child \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430, \u0446\u0432\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f:<\/p>\n
.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); } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c media query \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043c\u0435\u043d\u044e \u043d\u0430 \u043c\u0435\u043d\u044c\u0448\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0435:<\/p>\n
@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;     } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c border \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e:<\/p>\n
.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); } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u043c\u0435\u043d\u044e:<\/p>\n
.icon {     padding-top: 1.4em; }   .icon + span {     margin-top: 2.1em;     transition: margin .5s; } <\/code><\/pre>\n
  \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u0435\u043d\u044e:<\/p>\n
\/* \u041f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435*\/ .nav a {     height: 9em; }   .no-touch .nav a:hover , .no-touch .nav a:active , .no-touch .nav a:focus {     height: 10em; }      \/* \u0414\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 *\/ .no-touch .nav a:hover .icon + span {     margin-top: 3.2em;     transition: margin .5s; } <\/code><\/pre>\n
  CSS transition \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a:<\/p>\n
.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; }    <\/code><\/pre>\n
  \u0414\u043b\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0435\u043d\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n
    .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;     }           } <\/code><\/pre>\n
  \u0415\u0449\u0435 \u043e\u0434\u0438\u043d media query, \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043e\u0442 800 \u0434\u043e 980 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439:<\/p>\n
@media (min-width: 50em) and (max-width: 61.250em) {       \/* Size and font adjustments to make it fit better *\/     .nav ul {         font-size: 1.2em;     }   } <\/code><\/pre>\n
  \u0417\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0441 CSS \u0434\u043b\u044f \u00abdesktop\u00bb \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u0435\u043d\u044e, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u00abtablet\u00bb \u0438 \u00abmobile\u00bb:<\/p>\n
\/*  "tablet" \u0438 "mobile" \u0432\u0435\u0440\u0441\u0438\u0438*\/   @media (max-width: 49.938em) {                 \/* \u0412\u043c\u0435\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f border \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 *\/     .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;     }      } <\/code><\/pre>\n
  \u0414\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043e\u0442 520px (32.5em) \u0434\u043e 799px (49.938em) \u043c\u0435\u043d\u044e \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0442\u0430\u043f\u0430 \u043d\u0430 \u0442\u0430\u0447-\u0441\u043a\u0440\u0438\u043d\u0430\u0445:<\/p>\n
  @media (min-width: 32.5em) and (max-width: 49.938em) {           \/* \u0414\u0435\u043b\u0430\u0435\u043c \u0434\u0432\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 *\/     .nav li {         display: block;         float: left;         width: 50%;     }           \/* \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f *\/     .nav a {         padding: 0.8em;          }       \/* \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442 \u0432 \u043b\u0435\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e *\/     .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;     } <\/code><\/pre>\n
  \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u043c \u0435\u0435:<\/p>\n
    .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;     }      .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);     }   } <\/code><\/pre>\n
  \u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443:<\/p>\n
@media (min-width: 32.5em) and (max-width: 38.688em) {           .nav li span.icon {         width: 50%;     }       .nav li .icon + span {         font-size: 0.9em;     } } <\/code><\/pre>\n
  \u0414\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e, \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043d\u043e\u043f\u043a\u0443 \u00abMenu\u00bb, \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u0443\u043d\u043a\u0442\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c JavaScript:<\/p>\n
\/\/  \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430 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; };     \/\/  \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 var menuElements = document.getElementById('menu'); menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> <\/i> Menu<\/button>');   \/\/  \u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0441\u043a\u0440\u044b\u0442\u0438\u044f\/\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e document.getElementById('menutoggle').onclick = function() {     changeClass(this, 'navtoogle active', 'navtoogle'); }   \/\/ document click \u0434\u043b\u044f \u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u0435\u043d\u044e \/\/ http:\/\/tympanus.net\/codrops\/2013\/05\/08\/responsive-retina-ready-menu\/comment-page-2\/#comment-438918 document.onclick = function(e) {     var mobileButton = document.getElementById('menutoggle'),         buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;       if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {         changeClass(mobileButton, 'navtoogle active', 'navtoogle');     } } <\/code><\/pre>\n
  \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u043e\u0433\u043e HTML-\u043a\u043e\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u00abMenu\u00bb \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 JavaScript. CSS \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
.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; }   .navtoogle i{     z-index:-1; }   .icon-menu {     position: relative;     top: 3px;     line-height: 0;     font-size: 1.6em; } <\/code><\/pre>\n
  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u043a\u0440\u044b\u0442\u0430, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u0435\u043d\u0435\u0435 519px (32.438em):<\/p>\n
@media (max-width: 32.438em) {       .nav .navtoogle{         margin: 0;         display: block;     } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u00abno-js\u00bb \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 JavaScript:<\/p>\n
.no-js .nav ul {     max-height: 30em;     overflow: hidden; } <\/code><\/pre>\n
  \u041a\u043e\u0433\u0434\u0430 JavaScript \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u043d\u044e:<\/p>\n
.js .nav ul {     max-height: 0em;     overflow: hidden; }   \/* \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0435\u043d\u044e \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 *\/ .js .nav .active + ul {          max-height: 30em;     overflow: hidden;     transition: max-height .4s; } <\/code><\/pre>\n
  \u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432:<\/p>\n
.nav li span {     display: inline-block;     height: 100%; }   .nav a {     padding: 0.5em;      }   .icon + span {     margin-left: 1em;     font-size: 0.8em; } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c border \u0441\u043b\u0435\u0432\u0430:<\/p>\n
.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); } <\/code><\/pre>\n
  \u041f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0430\u044f\u0441\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u043a\u043d\u0430, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0442\u0430\u0447\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e. \u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u0430\u0447-\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Modernizr<\/a>. \u0415\u0441\u043b\u0438 \u0442\u0430\u0447 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0433 \u00abtouch\u00bb:<\/p>\n
 .touch .nav a {         padding: 0.8em;     } } <\/code><\/pre>\n
  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0435, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f retina-ready \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445!   \t<\/p>\n
<\/div>\n<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/187460\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0434\u0435\u0432\u0430\u0439\u0441\u0430). \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 retina-\u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. <\/p>\n
  <\/p>\n
  \u0414\u0435\u043c\u043e<\/a> \/ \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-187460","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/187460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=187460"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/187460\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=187460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=187460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=187460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}