Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)
Далей у PSD серыі Ормана Кларка яго дзіўнае вертыкальнае меню. Мы створым яго з дапамогай CSS3 і jQuery, выкарыстоўваючы мінімальную колькасць малюнкаў.
Адзіныя малюнкі, якія мы будзем выкарыстоўваць гэта абразкі - я ствару спрайт, выкарыстоўваючы новы інструмент SpriteRight, але гэта неабавязкова. Акрамя таго, я буду выкарыстоўваць GradientApp для стварэння градыентаў CSS3, але гэта таксама неабавязкова.
Крок 1. Асноўная HTML-разметка
Пачнем з таго, што створым базавую разметку, пусты дакумент HTML5:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vertical Navigation Menu: CSS3 Coded</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> </body> </html>
А цяпер разметка для нашага меню; неўпарадкаваны спіс у кантэйнеры.
<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a></li> <li class="item2"><a href="#">Videos <span>147</span></a></li> <li class="item3"><a href="#">Galleries <span>340</span></a></li> <li class="item4"><a href="#">Podcasts <span>222</span></a></li> <li class="item5"><a href="#">Robots <span>16</span></a></li> </ul> </div>
Нарэшце, мы ствараем падменю, калі размяшчалі неўпарадкаваных спіс, укладзены ў кожны з існуючых элементаў спісу.
<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item2"><a href="#">Videos <span>147</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item3"><a href="#">Galleries <span>340</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item4"><a href="#">Podcasts <span>222</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> <li class="item5"><a href="#">Robots <span>16</span></a> <ul> <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> </ul> </li> </ul> </div>
Такім чынам, гэта можа здацца складаным, але не бянтэжцеся. Спачатку мы стварылі неўпарадкаваны спіс з пяццю элементамі спісу, кожны з якіх змяшчае якар. Затым мы дадалі укладзеныя неўпарадкаваныя спісы, кожны з якіх складаецца з трох розных элемента спісу.
Я таксама дадаў клас да кожнага элементу спісу, так што ён спросціць працэс афармлення. Нарэшце, для лікаў мы стварылі тэг span ўнутры кожнага якара. Калі вы праглядзіце яго ў сваім браўзэры, ён павінен выглядаць так:
Крок 2: Якія плаваюць шрыфты
Спачатку пераканайцеся, што наша меню адлюстроўваецца правільна. Дадайце гэтыя правілы ў файл css/styles.css, яны задаюць знешнія і ўнутраны водступы для ўсіх нашых спісаў і удалят стыль спісу ul па-змаўчанні.
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
} Перш чым прыступіць да афармлення нашага меню, мы створым кантэйнер з фіксаванай шырынёй і памерам шрыфта 13 пікселяў (выяўленая ў адзінках em). Спачатку, мы дадзим правіла для тэга body, font-size:100%;. Гэта забяспечыць тое, што наш стыль будзе заснаваны на памеры шрыфта браўзэра па змаўчанні (звычайна 16 пікселяў).
Цяпер я растлумачу, як працуе памер шрыфта кантэйнера. Мы павінны выказаць гэта у em; прапарцыйна да памеру яго бацькоўскага шрыфта. Мы імкнемся да памеру 13px, таму пры ўмове, што памер шрыфта бацькоўскага элемента складае 16px, наша выніковая em роўная 13/16 = 0,8125. 13px - 0,8125 * 16 пікселяў.
Выкарыстанне для нашых шрыфтоў (і іншых элементаў) адзінак em зробіць іх плаваюць. Цяпер, калі мы зменім памер шрыфта абгорткі (або наш памер па змаўчанні ў браўзэры), усе меню будзе наладжана адносна гэтага. Хай гэта вас не бянтэжыць, калі вам патрэбна дапамога ў пераўтварэнні шрыфтоў, я прапаную вам наведаць сайт pxtoem.com.
body {
font-size: 100%;
}
a {
text-decoration: none;
}
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
} Мы задалі для кантэйнера фіксаваную шырыню 220px і выраўнялі яе па цэнтры з водступамі зверху, дадаўшы стыль margin:100px auto;.
Крок 3: CSS для галоўнага меню
Далей мы дадамо стыль для меню. Мы зробім шырыню і вышыню меню тэга ul auto, а затым і ў дачыненні цень да ўсяго аб'екту. Усталёўваючы вышыню як аўто, цень будзе настройвацца пры адкрыцці слайдера.
Затым аформім якара; мы дададим шырыню 100%, што азначае, што яны будуць расцягвацца да шырыні кантэйнера памерам 220 пікселяў. Для вышыні мы будзем выкарыстоўваць адзінкі em, так што ўспомніце наш асноўны памер шрыфта 13px. У нашым файле .psd ввысота 36 пікселяў, так што гэта наша мэта. Мы возьмем 36 і падзелім яго на 13, што атрымаецца прыкладна 2.75em (36/13 = 2.76923077). Мы таксама ўсталюем 2.75em для вышыні радка (каб Цэнтраваць ўвесь тэкст па вертыкалі), затым выкарыстоўваецца і ў дачыненні водступ для тэксту, ствараючы прастору для абразкі якую мы дадамо пазней.
Мы дададзим CSS3 градыент для фону, я забег наперад і стварыў яго з дапамогай GradientApp. Затым мы зменім шрыфт, выкарыстоўваецца і ў дачыненні шрыфт Helvetica Neue і белы колер разам з ценем для тэксту. Заўважце, што тут мы не ўсталёўвалі памер шрыфта. Гэта таму, што наш базавы шрыфт складае 13 пікселяў для кантэйнера, які атрымалі ў спадчыну нашы якара, таму няма неабходнасці дадаць яго.
body {
font-size: 100%;
}
a {
text-decoration: none;
}
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
} Выдатна! Зараз усё пачынае выглядаць лепш, і мы таксама атрымалі структуру! Але як наконт таго, каб дадаць колер фону, каб меню атрымалася лепш..
body {
background:#32373d;
} 
Рада: Успамінаем аб EM
З CSS вышэй вы можаце бачыць, што лёгка забыцца, што на самой справе азначаюць вашыя em-адзінкі. Гэта добрая ідэя пакінуць каментары да вашых першапачатковым разліках, так што, калі вы вернецеся да свайго коду ў будучыні, вы зможаце зразумець тое, што адбываецца. Памятаеце формулу: жаданыя px / бацькоўскія px = выніковыя em і выкарыстоўвайце прыблізны сімвал (≈), калі вы акругляецца вынік.
#wrapper {
font-size: 0.8125em; /* 13/16 = 0.8125*/
}
.menu > li > a {
height: 2.75em; /* 36/13 ≈ 2.75*/
line-height: 2.75em; /* 36/13 ≈ 2.75*/
text-indent: 2.75em; /* 36/13 ≈ 2.75*/
} Крок 4: CSS для падменю
Час дадаць CSS для белага падменю. Нам трэба дадаць белы фон з шэрымі межамі. Звярніце ўвагу, што апошні элемент не мае ніжняй мяжы, мы наладзім яго з дапамогай псеўда-селектара :last-child. У нас ёсць цёмна-сіняя мяжа, таму мы выдалім шэры, дадаўшы яшчэ адзін сіні.
Наступны крок будзе падобны на папярэдні; мы зноў дадамо вышыню і шырыню, мы зменім фон на белы. На гэты раз нам трэба змяніць памер шрыфта. Мы імкнемся да 12px, таму, выкарыстоўваючы наш разлік жаданых px / бацькоўскіх px = выніковыя em, атрымліваем 0.923em
Давайце таксама зменім колер тэксту на шэры. Звярніце ўвагу, што мы выкарыстоўвалі ўласцівасць display:block. Калі б мы выкарыстоўвалі float:left меню не плаўна анімавалі, таму мы выкарыстоўваем ўласцівасць display: block, каб дапамагчы ім рухацца прыгожа і плаўна. вы таксама заўважылі, што мы дадалі дадатковы стыль; мы ўжываем яго да апошняга элемента ў тэгу ul. Мы зробім гэта, каб змяніць колер границы.
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
} Теперь усё выглядае вельмі добра!
Крок 5: Навядзенне і актыўны стиль
Мы дададзим стыль для навядзення і актыўнага станаў, гэта асабліва важна калі меню разгорнута! Мы таксама дададзим ніжнюю мяжу ў актыўны меню. Цяпер, калі вы думаеце, "чаму мы не дадалі актыўны клас?». Добра, мой сябар, гэта тое, што мы зробім з дапамогай jQuery крыху пазней.
.menu > li > a:hover,
.menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
} Крок 6: Абразкі галоўнага меню
Мы дададзим абразкі, выкарыстоўваючы псеўда ўласцівасць :before. Спачатку мы звернем увагу на тэгі якароў у спісах, мы выкарыстоўваецца і ў дачыненні фонавы спрайт і усталюем яго ўласцівасць на no-repeat. Мы зададзим памер шрыфта 36px, хоць тэксту тут няма; мы будзем выкарыстоўваць 36px, для таго, каб мы маглі выкарыстоўваць шырыню і вышыню 1em, якая роўная 36px. Затым мы змяшчаем элемент ўніз на 50% і выдаляем .5em водступу зверху, каб цэнтраваць яго.
Выкарыстоўваючы класы для кожнага элемента спісу, мы нададзім ім адпаведную зыходную пазіцыю для спрайт.
Заўвага: Я стварыў гэты спрайт з дапамогай прыкладання SpriteRight, калі вы захочаце пагуляць са спрайтам, я ўключыў малюнкі і файлы праекта ў зыходныя файлы.
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
} 
Шаг 7: Нумарацыя галоўнага меню
Окажите, памятаеце тэгі span, якія мы дадалі? Яны будуць лікамі!
Спачатку мы дададзим памер шрыфта 11px (які пераўтворыцца прыкладна ў 0.857em). Мы размесцім іх абсалютна, і зрушыць іх направа на 1em, яшчэ раз узгадаем - em, каб рабіць памер плывучым. Мы зрушым яго ўніз на 50% і выдалім верхні водступ, каб цэнтраваць яго. Фон будзе дададзены разам з ценямі кантэйнера, унутранай і знешняй абводкай.
І зноў, каб зрабіць яго плывучым, мы будзем выкарыстоўваць водступы, каб стварыць шырыню і вышыню. Мы выкарыстоўваем em нават для радыусу межаў; нам трэба гэта для таго, каб, калі тэкст будзе больш, яны могуць стаць непрапарцыйным. Я таксама дадаў яшчэ адзін стыль, пры навядзенні паказальніка і актыўнага класа для спасылкі.
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
} 
Крок 8: Нумары падменю і стрелки
Этот крок падобны на папярэдні, таму я не буду ўдавацца ў падрабязнасці. Асноўныя адрозненні тут у тым, што я выдаліў колер фону, змяніў мяжу і змяніў колер шрыфта. Нам таксама трэба дадаць стрэлку выкарыстоўваючы псеўда ўласцівасць :before. Мы вызначаем шырыню і вышыню і дадаем водступ злева ў em для таго каб ён быў плывучым.
Нарэшце, стан навядзення (дзякуй ўдзельнікам, якія паказалі на яго адсутнасць). Мы проста ўжываем больш цёмны колер (#32373D) да тэгу якара, псеўда-стрэлцы і ліку ў тэгу span.
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
} Теперь усё выглядае даволі выдатна? Я думаю, што прыйшоў час дадаць некаторыя функцыянальныя магчымасці!
Крок 9: jQuery врэмя
Палагаю, вы даўно чакалі, каб дайци да гэтага падзелу?! Ну, нарэшце, мы падабраліся да jQuery. Спачатку нам трэба будзе ўсталяваць спасылку на бібліятэку jQuery, выкарыстоўваючы адну з іх, размешчаную Google. Апошняя версія - 1.7.1. Дадайце ў падзел загалоўка сваёй HTML-старонкі наступнае:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Зараз дадайце ў ніжнюю частку вашага html-дакумента да закрыцця тэга </body>. Не хвалюйцеся, калі гэта выглядае занадта заблытаным, я растлумачу гэта праз минуту.
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script> var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a'); Для пачатку мы захоўваем тэгі падменю і якароў галоўнага меню ў двух розных зменных, гэта спрашчае зварот да іх пазней.
menu_ul.hide(); Гэты код схавае ўсе падменю пры загрузцы страницы
menu_a.click(function(e) { Для пачатку мы пакажам так, каб ён выканаў каманду, калі мы націскаем на адзін з тэгаў якароў асноўнага меню.
e.preventDefault(); Тут мы прадухіляем пераход па спасылках якароў або змяненне адрасы ў радку. Напрыклад, калі вы калі-небудзь стварылі тэг якара са спасылкай «#», калі вы яго націснеце, ён не з'явіцца ў адраснай радку. Якара па-змаўчанні адключаныя.
if(!$(this).hasClass('active')) {
menu_a.removeClass('active'); Цяпер мы пакажам, што калі menu_a ўтрымлівае клас 'active', яго трэба выдаліць.
menu_ul.filter(':visible').slideUp('normal'); Тут мы выкарыстоўваем ўласцівасці '.filter' і ': visible'. Калі меню адкрыта, неабходна выканаць анімацыю ў нармальным рэжыме.
$(this).addClass('active').next().stop(true,true).slideDown('normal'); Калі меню закрыта, дадаць клас «active» (каб мы маглі атрымаць доступ да афармлення CSS) і выканаць анімацыю ў нармальным рэжыме.
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal'); Цяпер мы выкарыстоўваем ELSE як частка нашай умовы. Такім чынам, ELSE выдаляе клас active і перамяшчае меню, каб схаваць яго. Гэта так проста, што мы можам рэалізаваць любы меню, ня перазагружаючы старонку.
Заўвага: Калі вы хочаце змяніць хуткасць анімацыі, зменіце нармальны рэжым на, напрыклад. '500'. Гэта выканае анімацыю за 500 мілісекунд.
Калі вам цікава вывучыць jQuery з нуля, будзе карысна азнаёміцца з бясплатным рэсурсам Изучы jQuery за 30 дзён на tutsplus.com.
Выник
Вось, мы зрабілі гэта да канца! Мы рэалізавалі прыгожае вертыкальнае навігацыйнае меню Ормана, выкарыстоўваючы CSS3 і jQuery! Даведайцеся, як стварыць этоже меню, выкарыстоўваючы толькі CSS3 з дапамогай псеўда селектара :target.
#wrapper {width: 440px; font-size: 1em} Спадзяюся, вам спадабаўся гэты ўрок, дзякуй за чытанне!
