Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Navigation Design
Webdesign

Вертыкальнае меню Ормана Кларка: CSS3 версія

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Orman Clark's Chunky 3D Web Buttons: The CSS3 Version
Quick Tip: Give Orman's Navigation the :target Treatment

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Далей у PSD серыі Ормана Кларка яго дзіўнае вертыкальнае меню. Мы створым яго з дапамогай CSS3 і jQuery, выкарыстоўваючы мінімальную колькасць малюнкаў.

Адзіныя малюнкі, якія мы будзем выкарыстоўваць гэта абразкі - я ствару спрайт, выкарыстоўваючы новы інструмент SpriteRight, але гэта неабавязкова. Акрамя таго, я буду выкарыстоўваць GradientApp для стварэння градыентаў CSS3, але гэта таксама неабавязкова.


Крок 1. Асноўная HTML-разметка

Пачнем з таго, што створым базавую разметку, пусты дакумент HTML5:

А цяпер разметка для нашага меню; неўпарадкаваны спіс у кантэйнеры.

Нарэшце, мы ствараем падменю, калі размяшчалі неўпарадкаваных спіс, укладзены ў кожны з існуючых элементаў спісу.

Такім чынам, гэта можа здацца складаным, але не бянтэжцеся. Спачатку мы стварылі неўпарадкаваны спіс з пяццю элементамі спісу, кожны з якіх змяшчае якар. Затым мы дадалі укладзеныя неўпарадкаваныя спісы, кожны з якіх складаецца з трох розных элемента спісу.

Я таксама дадаў клас да кожнага элементу спісу, так што ён спросціць працэс афармлення. Нарэшце, для лікаў мы стварылі тэг span ўнутры кожнага якара. Калі вы праглядзіце яго ў сваім браўзэры, ён павінен выглядаць так:

Basic markup

Крок 2: Якія плаваюць шрыфты

Спачатку пераканайцеся, што наша меню адлюстроўваецца правільна. Дадайце гэтыя правілы ў файл css/styles.css, яны задаюць знешнія і ўнутраны водступы для ўсіх нашых спісаў і удалят стыль спісу ul па-змаўчанні.

Перш чым прыступіць да афармлення нашага меню, мы створым кантэйнер з фіксаванай шырынёй і памерам шрыфта 13 пікселяў (выяўленая ў адзінках em). Спачатку, мы дадзим правіла для тэга body, font-size:100%;. Гэта забяспечыць тое, што наш стыль будзе заснаваны на памеры шрыфта браўзэра па змаўчанні (звычайна 16 пікселяў).

Цяпер я растлумачу, як працуе памер шрыфта кантэйнера. Мы павінны выказаць гэта у em; прапарцыйна да памеру яго бацькоўскага шрыфта. Мы імкнемся да памеру 13px, таму пры ўмове, што памер шрыфта бацькоўскага элемента складае 16px, наша выніковая em роўная 13/16 = 0,8125. 13px - 0,8125 * 16 пікселяў.

Выкарыстанне для нашых шрыфтоў (і іншых элементаў) адзінак em зробіць іх плаваюць. Цяпер, калі мы зменім памер шрыфта абгорткі (або наш памер па змаўчанні ў браўзэры), усе меню будзе наладжана адносна гэтага. Хай гэта вас не бянтэжыць, калі вам патрэбна дапамога ў пераўтварэнні шрыфтоў, я прапаную вам наведаць сайт pxtoem.com.

Мы задалі для кантэйнера фіксаваную шырыню 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 пікселяў для кантэйнера, які атрымалі ў спадчыну нашы якара, таму няма неабходнасці дадаць яго.

Выдатна! Зараз усё пачынае выглядаць лепш, і мы таксама атрымалі структуру! Але як наконт таго, каб дадаць колер фону, каб меню атрымалася лепш..

Step 2

Рада: Успамінаем аб EM

З CSS вышэй вы можаце бачыць, што лёгка забыцца, што на самой справе азначаюць вашыя em-адзінкі. Гэта добрая ідэя пакінуць каментары да вашых першапачатковым разліках, так што, калі вы вернецеся да свайго коду ў будучыні, вы зможаце зразумець тое, што адбываецца. Памятаеце формулу: жаданыя px / бацькоўскія px = выніковыя em і выкарыстоўвайце прыблізны сімвал (≈), калі вы акругляецца вынік.


Крок 4: CSS для падменю

Час дадаць CSS для белага падменю. Нам трэба дадаць белы фон з шэрымі межамі. Звярніце ўвагу, што апошні элемент не мае ніжняй мяжы, мы наладзім яго з дапамогай псеўда-селектара :last-child. У нас ёсць цёмна-сіняя мяжа, таму мы выдалім шэры, дадаўшы яшчэ адзін сіні.

Наступны крок будзе падобны на папярэдні; мы зноў дадамо вышыню і шырыню, мы зменім фон на белы. На гэты раз нам трэба змяніць памер шрыфта. Мы імкнемся да 12px, таму, выкарыстоўваючы наш разлік жаданых px / бацькоўскіх px = выніковыя em, атрымліваем 0.923em

Давайце таксама зменім колер тэксту на шэры. Звярніце ўвагу, што мы выкарыстоўвалі ўласцівасць display:block. Калі б мы выкарыстоўвалі float:left меню не плаўна анімавалі, таму мы выкарыстоўваем ўласцівасць display: block, каб дапамагчы ім рухацца прыгожа і плаўна. вы таксама заўважылі, што мы дадалі дадатковы стыль; мы ўжываем яго да апошняга элемента ў тэгу ul. Мы зробім гэта, каб змяніць колер границы.

Теперь усё выглядае вельмі добра!

Step 3

Крок 5: Навядзенне і актыўны стиль

Мы дададзим стыль для навядзення і актыўнага станаў, гэта асабліва важна калі меню разгорнута! Мы таксама дададзим ніжнюю мяжу ў актыўны меню. Цяпер, калі вы думаеце, "чаму мы не дадалі актыўны клас?». Добра, мой сябар, гэта тое, што мы зробім з дапамогай jQuery крыху пазней.


Крок 6: Абразкі галоўнага меню

Мы дададзим абразкі, выкарыстоўваючы псеўда ўласцівасць :before. Спачатку мы звернем увагу на тэгі якароў у спісах, мы выкарыстоўваецца і ў дачыненні фонавы спрайт і усталюем яго ўласцівасць на no-repeat. Мы зададзим памер шрыфта 36px, хоць тэксту тут няма; мы будзем выкарыстоўваць 36px, для таго, каб мы маглі выкарыстоўваць шырыню і вышыню 1em, якая роўная 36px. Затым мы змяшчаем элемент ўніз на 50% і выдаляем .5em водступу зверху, каб цэнтраваць яго.

Выкарыстоўваючы класы для кожнага элемента спісу, мы нададзім ім адпаведную зыходную пазіцыю для спрайт.

Заўвага: Я стварыў гэты спрайт з дапамогай прыкладання SpriteRight, калі вы захочаце пагуляць са спрайтам, я ўключыў малюнкі і файлы праекта ў зыходныя файлы.

Step 5

Шаг 7: Нумарацыя галоўнага меню

Окажите, памятаеце тэгі span, якія мы дадалі? Яны будуць лікамі!

Спачатку мы дададзим памер шрыфта 11px (які пераўтворыцца прыкладна ў 0.857em). Мы размесцім іх абсалютна, і зрушыць іх направа на 1em, яшчэ раз узгадаем - em, каб рабіць памер плывучым. Мы зрушым яго ўніз на 50% і выдалім верхні водступ, каб цэнтраваць яго. Фон будзе дададзены разам з ценямі кантэйнера, унутранай і знешняй абводкай.

І зноў, каб зрабіць яго плывучым, мы будзем выкарыстоўваць водступы, каб стварыць шырыню і вышыню. Мы выкарыстоўваем em нават для радыусу межаў; нам трэба гэта для таго, каб, калі тэкст будзе больш, яны могуць стаць непрапарцыйным. Я таксама дадаў яшчэ адзін стыль, пры навядзенні паказальніка і актыўнага класа для спасылкі.

Step 6

Крок 8: Нумары падменю і стрелки

Этот крок падобны на папярэдні, таму я не буду ўдавацца ў падрабязнасці. Асноўныя адрозненні тут у тым, што я выдаліў колер фону, змяніў мяжу і змяніў колер шрыфта. Нам таксама трэба дадаць стрэлку выкарыстоўваючы псеўда ўласцівасць :before. Мы вызначаем шырыню і вышыню і дадаем водступ злева ў em для таго каб ён быў плывучым.

Нарэшце, стан навядзення (дзякуй ўдзельнікам, якія паказалі на яго адсутнасць). Мы проста ўжываем больш цёмны колер (#32373D) да тэгу якара, псеўда-стрэлцы і ліку ў тэгу span.

Теперь усё выглядае даволі выдатна? Я думаю, што прыйшоў час дадаць некаторыя функцыянальныя магчымасці!

Step 7

Крок 9: jQuery врэмя

Палагаю, вы даўно чакалі, каб дайци да гэтага падзелу?! Ну, нарэшце, мы падабраліся да jQuery. Спачатку нам трэба будзе ўсталяваць спасылку на бібліятэку jQuery, выкарыстоўваючы адну з іх, размешчаную Google. Апошняя версія - 1.7.1. Дадайце ў падзел загалоўка сваёй HTML-старонкі наступнае:

Зараз дадайце ў ніжнюю частку вашага html-дакумента да закрыцця тэга </body>. Не хвалюйцеся, калі гэта выглядае занадта заблытаным, я растлумачу гэта праз минуту.

Для пачатку мы захоўваем тэгі падменю і якароў галоўнага меню ў двух розных зменных, гэта спрашчае зварот да іх пазней.

Гэты код схавае ўсе падменю пры загрузцы страницы

Для пачатку мы пакажам так, каб ён выканаў каманду, калі мы націскаем на адзін з тэгаў якароў асноўнага меню.

Тут мы прадухіляем пераход па спасылках якароў або змяненне адрасы ў радку. Напрыклад, калі вы калі-небудзь стварылі тэг якара са спасылкай «#», калі вы яго націснеце, ён не з'явіцца ў адраснай радку. Якара па-змаўчанні адключаныя.

Цяпер мы пакажам, што калі menu_a ўтрымлівае клас 'active', яго трэба выдаліць.

Тут мы выкарыстоўваем ўласцівасці '.filter' і ': visible'. Калі меню адкрыта, неабходна выканаць анімацыю ў нармальным рэжыме.

Калі меню закрыта, дадаць клас «active» (каб мы маглі атрымаць доступ да афармлення CSS) і выканаць анімацыю ў нармальным рэжыме.

Цяпер мы выкарыстоўваем ELSE як частка нашай умовы. Такім чынам, ELSE выдаляе клас active і перамяшчае меню, каб схаваць яго. Гэта так проста, што мы можам рэалізаваць любы меню, ня перазагружаючы старонку.

Заўвага: Калі вы хочаце змяніць хуткасць анімацыі, зменіце нармальны рэжым на, напрыклад. '500'. Гэта выканае анімацыю за 500 мілісекунд.

Калі вам цікава вывучыць jQuery з нуля, будзе карысна азнаёміцца з бясплатным рэсурсам Изучы jQuery за 30 дзён на tutsplus.com.


Выник

Вось, мы зрабілі гэта да канца! Мы рэалізавалі прыгожае вертыкальнае навігацыйнае меню Ормана, выкарыстоўваючы CSS3 і jQuery! Даведайцеся, як стварыць этоже меню, выкарыстоўваючы толькі CSS3 з дапамогай псеўда селектара :target.

Final
Final large
#wrapper {width: 440px; font-size: 1em}

Спадзяюся, вам спадабаўся гэты ўрок, дзякуй за чытанне!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.