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

Як наладзіць фонд 4 Top Bar

by
Length:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

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

Фонд Zurb ў 4 мае бліскучую верхнюю панэль, якая стала амаль сімвалам зборкі сайта Foundation. Сёння мы будзем глядзець на тое, як вы можаце рэалізаваць яго па-іншаму, калі размяшчалі яго ў іншым месцы на старонцы, што дае вам карыстацкую і спагадлівае меню навігацыі па гарызанталі.


Пачатак

Па-першае, мы будзем мець патрэбу ў апошні фонд. Распакуйце і змясціць усе файлы ў вашай працы ці тэставы каталог.  Мы будзем выкарыстоўваць толькі index.html, што робіць нашу ўласную style.css, у якім мы будзем перавызначаць розныя класы верхняй панэлі, каб зрабіць нашу карыстацкую навігацыю.

foundation-download

Акрамя таго, загрузіць фонавы малюнак, азначанае вышэй. Мы будзем выкарыстоўваць гэта для меню, так што месца ў вашай тэчцы «IMG». Ёсць усе? Затым запусціце ваш любімы рэдактар і давайце ісці!


Настройка HTML-структуры

Крок 1: Агульныя Markup

Індэксны файл ў загружаным пастаўляецца з некаторым прадусталяваным HTML. Вы можаце пакінуць усё, як вы знойдзеце яго ў тэг загалоўка, і вы можаце пакінуць спасылкі скрыпту (перад тэгам цела закрыцця), дзе яны знаходзяцца.  Нам трэба ўсё гэта, каб пераканацца, сетка і Top Bar на самай справе працуюць.

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

Добра, давайце створым загаловак, навігацыю, змест і калантытул вобласць і змясціць у нейкай фіктыўны кантэнт для мэтаў запаўнення.  Мы дамо кожнай вобласці класа «поўнай шырыню», то ў кожнай вобласці мы размесцім DIV з класам = «побач», у DIV з класам = "вялікай 12" і класам = «слупкі». Гэта настройвае базавую структуру сеткі.

Заўвага: Для атрымання дадатковай інфармацыі аб тым, як працуе сетка, паглядзіце на фонд для пачаткоўцаў: The Grid System

Крок 2: Top Bar Markup

Перад тым, як атрымаць стыль, мы выкладваем асноўныя структуры HTML, каб зрабіць працу Foundation Top Bar правільна. Нам трэба пяць асноўных элементаў, каб атрымаць працу рухавіка:

  • nav з class="top-bar"
  • ul з class="title-area"
  • li з class="toggle-topbar" = пашырыць меню ў мабільным макеце
  • section з class="top-bar-section"
  • ul з class="left" i ul з class="right"

Цяпер, давайце ўсталюем гэтыя асновы і рэалізаваць пяць элементаў.

Заўвага: У дадзеным падручніку прыкладзе мы хочам зрабіць карыстацкае меню навігацыі, такім чынам выдаляючы назву ў ім (які звычайна трымае лагатып, у тэкставым або графічным фармаце). Каб зрабіць гэта, мы проста пакінуць Лі з класам = «імя» ў вул з класам = «загалоўнай вобласці» пусты.

Акрамя таго, давайце дадамо некаторыя элементы меню і выпадальнае меню, у той час як мы на яго. Каб уключыць выпадальны дадаць клас «мае-выпадальны спіс» для літыева элемента, які вы хочаце ўтрымліваць выпадальны спіс, а затым увесці новую вул з класам «выпадальны».  Каб паказаць бягучую актыўную старонку, мы можам даць нашым бягучы пункт меню клас «актыўны» на элеменце LI. Мы можам пакінуць клас = «права» уль пуста.  Звычайна вы будзеце выкарыстоўваць гэтую вобласць, каб дадаць кнопку або форму пошуку уваходнага сігналу. Для атрымання больш падрабязнай інфармацыі пра спецыфіку верхняй панэлі разметкі, зірніце на фонд для пачаткоўцаў: The Top Bar.

Паглядзіце на наступны HTML, каментары тлумачаць, як гэта стварыць.

Крок 3: Вынікі So Far

Паглядзіце на вынікі ў вашым браўзэры.  Цяпер мы стварылі базавую структуру Foundation з дапамогай верхняй панэлі, каб стварыць гарызантальнае меню. Для таго, каб размясціць яго дзе-небудзь, акрамя як у верхняй частцы браўзэра, каб проста паставіць нав клас = "зверху-бар» у радку і слупках спраў.

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

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

foundation-4-custom-top-bar-html-layout

Настройка CSS

Крок 1: Агульныя Styling

Калі вы яшчэ не зрабілі, стварыць новы файл CSS, назавіце яго style.css і змясціць яго ў тэчку CSS загружанае Foundation. Не забудзьцеся ўключыць яго ў тэг загалоўка ў файле індэкса, спасылацца на яго пад foundation.css, як так:

Калі вы не змесціце яго пад foundation.css ня перакрыюць класы Top Bar.

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

Крок 2: Верхняя панэль Стылі

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

Ёсць некалькі класаў CSS, якія мы павінны вырашыць, каб атрымаць жаданыя вынікі.  Па-першае, мы выдалім некаторыя з чорнага фону на класе .top-бар і спісы секцый і змяняць вышыню і вышыню радка ў 58px (вышыня навігацыйнай-вобласці). Праверце каментары для далейшага тлумачэнні.

Мы выдалілі па змаўчанні чорны фон з нав класа = "зверху-бар», у спісах падзелу і якароў меню ст. Мы карэктуем вышыню, вышыню радкі і водступы і пераўтварыць тэкст у верхні рэгістр, каб зрабіць усё гэта вяжацца з нашай нестандартнай канструкцыі.

Калі вы абновіце ваш браўзэр вы ўбачыце, што ён пачынае прымаць форму. Давайце працягнем з выпадальнымі, пунктамі меню, актыўнымі і парыць стану. Паглядзіце на малюнак ніжэй і CSS зноў прачытайце каментаваў тэкст для тлумачэння:

Мы ўнеслі некалькі змяненняў у нашым меню тут. Па-першае, мы змянілі па змаўчанні чорны фон элемента актыўнага меню з градыентам CSS.  Тады мы далі неактыўным пунктах меню, стан resembeling лунання. Для таго, каб элементы неактыўнае меню больш выразна бачныя мы мяняем колер тэксту на цёмна-шэры. Змены, зробленыя на .top-bar-section li:hover будуць трымаць стан выпадальнага меню на вагаліся, калі вашы мышы перамяшчаюцца над раскрывала элементамі.  Для завяршэння CSS мы далі улям DropDown кантэйнеру заліванне фону і перастаўляць становішча па змаўчанні стрэлкі расчыняецца спісу, з-за нашу карэкціроўку водступаў у верхні бары-секцыю.

Крок 3: Вынікі So Far

Абнавіце браўзэр і паглядзіце на вынікі да гэтага часу. Мы яшчэ не зусім зроблена; нам усё яшчэ трэба, каб пераканацца, што ўсё выглядае добра, пры змене памеру браўзэрам памер экрана (або, калі на тое пайшло, калі мы глядзім на яго на меншым прыладзе).  Каб гэта адбылося, мы дадамо некаторыя медиазапросы ў наш файл CSS.


Настройка медыя-запыты

Крок 1: Media Queries

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

Крок 2: Атрымлівайце асалоду ад вашымі вынікі

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

foundation-4-custom-top-bar-final-product-responsive

выснову

Так, што пра абгортвае наш падручнік пра тое, як мы можам стварыць карыстацкі спагадлівае меню з дапамогай верхняй панэлі з рамак Foundation 4.  І памятайце, што меню не павінна быць у верхняй частцы старонкі. Проста абгарніце яго ў сваіх уласных радках і слупках DIV, то вы можаце змясціць яго практычна ў любым месцы вы хочаце!

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

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.