Вертыкальнае меню Ормана Кларка: CSS3 версія
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.
Спадзяюся, вам спадабаўся гэты ўрок, дзякуй за чытанне!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weekly