, hvor bygge videre på instituttets 4 top bar,,, denne post er en del af en serie kaldet institut for begyndere. institut for begyndere: det øverste barfoundation for begyndere: knapper og dropdowns, zurb er instituttets 4 elementer, en fremragende top bar, og som er blevet næsten symbolsk af instituttets websted bygge.i dag skal vi se på, hvordan man kan gennemføre det på en anden måde, idet det andre steder på den side, der giver dig en skik og lydhør horisontale navigation menu.,,,, ved at komme i gang, for det første, vi får brug for den seneste institut.luk og alle filerne i deres arbejde eller en test, fortegnelse.vi vil kun bruge index.html, vores egen style.css, som vi vil tilsidesætte de forskellige klasser af toppen bar for at gøre vores skik navigation.,, instituttets 4 misligholdelse css download -, navigations - område baggrund image,,,,, downloade baggrund image fastsat ovenfor.vi vil bruge det på menuen, så der i din "img" mappe.har alt?så tænd din yndlings redaktør, og lad os komme af sted!,, at oprette html struktur, trin 1: general markup, indeks fil i din downloade kommer med en forudindstillet html.du kan tage alt, hvad du har i hovedet - - og du kan forlade manuskriptet forbindelser (inden udløbet af organ, tag), hvor de er.vi har brug for det, for at sikre, at nettet og toppen bar faktisk arbejde. kan du klare resten af prøvedukken indhold.vi skal til fulde bredde, konstruktion, ikke noget kompliceret, bare noget for at få en bedre idé om, hvad vi arbejder med. okay, lad os oprette header, navigation, indhold og fod område og sætte nogle dumme indhold for at udfylde formål.vi vil give hvert område en klasse "fulde bredde, så i hvert område vil vi lægge en div med en klasse =" linje ", en virksomhed i forbindelse med fast ejendom med en klasse =" large-12 "og klasse =" søjler ".det opstiller et grundlæggende net struktur.,, note:, for flere oplysninger om, hvordan systemet virker, tage et kig på institut for begyndere: forsyningsnettet, <!- header område - > < header klasse = "fulde bredde header område" > < div klasse = "ror" > < div klasse = "large-12 kolonne" > < h2 > foundation-4 skik top bar < /h2 > < /div > < /div > < /header > <!- navigation område - > < div klasse = "fulde bredde navigation område" > < div klasse = "ror" > < div klasse = "large-12 kolonne" > < nav klasse = "top" > < ///////nav > < /div > < /div > < /div > <!- område - > < div klasse = "fulde bredde område" > < div klasse = "ror" > < div klasse = "large-12 kolonne" > < p > lorem ipsum dolor sidde amet, consectetur adipisicing elit.harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo ese quaerat veritatis laboriosam eius modi amet maxime ikke - officielle nemo?minister, quisquam, voluptatum, dolor nam reiciendis under aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum?sed quis hic, eos, quibusdam eum aut optio repudiandae på!eligendi, neque ratione alias enim quae magnam dolores, ese pariatur earum laborum reiciendis - sunt sequi sapiente ducimus) ipsam.sapiente, minima, tilbageføre, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores!optio, - suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate på facilis aliquid cum fugit labore omnis provident recusandae autem.doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate frem?rem, ese, nulla vitae adipisci sequi deleniti kvasi -!< /p > < /div > < /div > < /div > <!- lille område - > < div klasse = "fulde bredde fod område" > < div klasse = "ror" > < div klasse = "large-12 kolonne" > & kopi; 2013 < /div > < /div > < /div > trin 2: øverste bar avance, før vi bliver stil, vi vil lægge det væsentlige html struktur for at gøre instituttets øverste bar arbejde ordentligt.vi har brug for fem grundlæggende elementer for at få motoren i gang:,,, nav med klasse = "top",,, ul med klasse = "afsnit område",,, li med klasse = "greb topbar" = udvid menuen i mobil indretning, afsnit med klasse = "top bar afsnit",,, ul med klasse = "venstre", og ul med klasse = "ret", lad os nu oprettet disse grundprincipper og gennemføre de fem elementer,.,, note: i denne forelæsning eksempel, vi skal nok gøre en skik navigation menu, således at de afsnit i (som normalt holder logoet i tekst og billede form).for at gøre dette har vi bare lade den li med klasse = "navn" i ul med klasse = "afsnit område" tom. også, lad os tilføje nogle menu elementer og en dropdown menuen, mens vi er ved det.at medtage en dropdown tilføjer klasse "har dropdown" til li element, du vil indeholde de dropdown, så får i en ny ul med en klasse "dropdown".angiver, at de nuværende aktive side kan vi give vores nuværende menupunkt en klasse "aktive" på li element.vi kan forlade ul klasse = "ret", tom.normalt ville du bruge dette område at tilføje en knap eller en søgning input form.for yderligere oplysninger om detaljerne i den øverste bar avance, tage et kig på institut for begyndere: det øverste bar. se på følgende: de bemærkninger, forklare, hvordan det er at opbygge. <!- nav - pak - > < nav klasse = "top" > < ul klasse = "afsnit område" > <!- afsnit område - > < li klasse = "navn" > < /li > <!- fjerne klassen "menu ikon" for at slippe af med menu ikon.tag "menu" har bare ikon alene... > < li klasse = "greb topbar menu ikon" > < en href = "#" > < span > menu < /span > < /a > < /li > < /ul > <!- afsnit wrap - > < afsnit klasse = "top bar afsnit" > <!-- Left Nav Section --> \t\t<ul class="left"> \t\t\t<li class="active"><a href="#">Home</a></li> \t\t\t<li><a href="#">About us</a></li> \t\t\t<li><a href="#">Our products</a></li> \t\t\t<li><a href="#">Portfolio</a></li> \t\t\t<li><a href="#">Blog</a></li> \t\t\t<li><a href="#">Prices</a></li> \t\t\t<li class="has-dropdown"> \t\t\t\t<a href="#">Features</a> \t\t\t\t<ul class="dropdown"> \t\t\t\t\t<li><a href="#">Modalboxes</a></li> \t\t\t\t\t<li><a href="#">Submenu's and navigation</a></li> \t\t\t\t\t<li><a href="#">Price tables</a></li> \t\t\t\t\t<li><a href="#">Buttons</a></li> \t\t\t\t\t<li><a href="#">Button groups</a></li> \t\t\t\t\t<li><a href="#">Labels, Keystrokes and Tooltips</a></li> \t\t\t\t\t<li><a href="#">Alert boxes</a></li> \t\t\t\t\t<li><a href="#">Columns</a></li> \t\t\t\t</ul> \t\t\t</li> \t\t\t<li><a href="#">Contact</a></li> \t\t</ul> \t\t<!- ret nav - sektionen - > < ul klasse = "rigtige" > < /ul > < /afsnit > < /nav > trin 3: hidtidige resultater, se på resultaterne i din computer.vi er nu nedsat et grundlæggende fundament rammer ved hjælp af den øverste bar til at skabe en horisontal menu.for at placere det andre steder end i toppen af browser er blot at sætte nav - klasse = "top" i træk og kolonner. når du er størrelse browseren, kan man se, at den menu ændringer på forud fastlagte pause. det næste skridt er at give det en vane -.vi skal fokusere på, hvordan vi kan stil op bar og som klasse anvendes til at.,,,, at css, trin 1: generel stil, hvis du ikke har gjort det, skabe en ny css fil, hedder det style.css og placere det i landestøttestrategien mappe af din fond download.glem ikke at medtage det i hovedet, i deres indeks fil, refererer til det under foundation.css som så:, < head > < meta - charset = "utf - 8" > < meta - navn = "viewport" indhold = "bredde = anordning bredde" > og lt; afsnit > institut 4 < /afsnit > < forbindelse rel = "stylesheet" href = "css /institut. css" > < forbindelse rel = "stylesheet" href = "css /stil. css" > < manuskript src = "j 'er /sælgeren /skik. modernizr. er" > < /manuskript > < /head >,, hvis du ikke sted under foundation.css ikke tilsidesætte den øverste bar klasser. okay, lad os få nogle grundlæggende design på hovedet, navigation, indhold og fod område.for sejlads område, vi vil bruge en baggrund image, som du tidligere har downloadet.den generelle udformning ikke er en stor ting, tag et kig på css nedenfor.vi tilføjer en fuld bredde klasse for hvert område, for at sikre, at det fylder den fulde bredde i browseren. organ {baggrund farve:&#ccc;} /* *, der er baggrunden for de forskellige sektioner * * /. header område {baggrund farve:d465c; min højde: 160px;}. navigation område (baggrund billede: url ("... /img /navigation (jpg); baggrund gentager: repeat-x;} område (polstring: 50px 0 70px 0}. fod område {baggrund farve:
f1f1f; farve:&#fff; min højde: 50px; polstring: 20px 0 0 0}. fuld bredde (minutter bredde: 100%; holdning: relativ;} h2 (farve:&#fff; skrifttype vægt: normal; margen top: 50px;}, trin 2: øverste bar styles, hvis man ser på resultaterne, menukortet ser stadig enlidt ud af sted.det er, fordi det stadig bruger misligholdelse ccs.lad os ordne det!der er et par af css klasser, vi er nødt til at løse for at få de ønskede resultater.først skal vi fjerne nogle af de sorte baggrund på. top bar klasse og afsnit lister og ændre højde og linjehøjde på 58px (, højde for sejlads område).se kommentarerne til yderligere forklaring., * * ændringer baggrund farve, højde og margen på grænsen * * /. top bar {baggrund: ingen. højde: 58px; linje højde: 58px; margen nederst: 0} /* * fjerner på sort baggrund menu bar * * /. top bar afsnit ul {baggrund: ingen; tekst omdanne: store;} /* * fjerner på sort baggrund menupunkt * * /. top bar afsnit li a: (. knap) (baggrund: ingen; linje højde: 58px; polstring: 0 27px;}, vi har fjernet den misligholdelse, sort baggrund fra nav - klasse = "top", afsnit lister og menuen ankre.vi justerer højde, højde og fyld og ændre teksten til store, for at gøre det hele passer med vores skik design. hvis du opfriske din browser, vil de se, at det er ved at tage form.lad os fortsætte med dropdowns menuen, aktive og svæv.Take a look at the CSS below and again, read the commented text for explanation:, /** Changes the active menu item from default black to a gradient **/ .top-bar-section ul li.active > a { background: rgb(0, 0, 0); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent; color: #fff; } /** Changes the hover state of non active menu items **/ .top-bar-section li:hover a { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent; color: #fff; } /** Changes non active menu items text color to black **/ .top-bar-section ul li > a { color: #2d2d2d; } /** Changes the hover stspiste dropdown menu produkter * * /. top bar afsnit ul.dropdown li a: den: (. knap) (baggrund: ingen gentager skriftrulle, 0 0 rgba (0, 0 0, 0, 9)} /* * vigtige udfylde for ul dropdown beholder * * /. top bar afsnit ul.dropdown {baggrund:ō, farve:&#fff;} /* * det fastsætter den holdning, og farven på de dropdown pil * * /. top bar afsnit. har dropdown > a: efter {grænse farve: rgba (0, 0 0, 1) gennemsigtige gennemsigtige margen top: 2.5px;}, vi har foretaget flere ændringer af vores menu her.det første, vi ændrede standard sort baggrund af aktive menupunkt til css hældning.så vi gav de ikke - aktive menu punkter resembeling svæv.for at gøre den ikke - erhvervsaktive menu punkter mere synlig, vi ændrer teksten farver for en mørkegrå.de ændringer, der er foretaget,. top bar afsnit li: den, der vil holde den dropdown menu i svævede, når din mus bevæger sig i den dropdown poster.for at fuldende css gav vi ul dropdown beholder en baggrund, fylde og flytter udgangsposition for dropdown pil, fordi vores polstring tilpasninger til toppen bar afsnit., trin 3: hidtidige resultater, opfriske din browser og tage et kig på de hidtidige resultater.vi er ikke færdige endnu, men vi er stadig nødt til at sikre, at det ser godt ud, når vi resize vores browsere skærmstørrelse (eller for den sags skyld, når vi ser på det på en mindre enhed).for at det kan ske, skal vi tilføje nogle medier forespørgsler til vores css fil.,,,, at medierne forespørgsler, trin 1: media forespørgsler, der er et par ting, som vi er nødt til at tilpasse sig til menuen arbejde med vores skik, design, da skærmens størrelse reduceres.dette involverer mest at tilføje noget polstring, højde, tekst, farver og baggrund farver.tag et kig på css nedenfor, og se på de bemærkninger, for at få en redegørelse for hver sektion., @ medier kun skærm og max bredde: 942px) {* er lydhør menu til sejlads, containere og ændre dens baggrund for sorte * /. top bar ul {baggrund farve: rgba (0, 0, 0 0, 5); polstring nederst: 13px;} /* ændring ikke - aktive menupunkt farve sort * /. top bar afsnit ul li > en (farve:&#fff;} /* giver dropdown ul en sort udfylde * /. top bar afsnit ul {baggrund:�.} /* give tilbage på efter i en submenu passende udfylde * /. top bar afsnit. dropdown li.title h5 en {linje højde: 57px;}/* den fastsætter den holdning, og farven på de dropdown pil * /. top bar afsnit. har dropdown > a: efter {grænse farve: rgba (255 255 255, 1) gennemsigtige gennemsigtige margen top: 2.5px;) /* end medier forespørgsel * /, trin 2: nyder deres resultater, medmindre den fil, opfriske din browser og lege med browser størrelse.som du kan se menuen passer vores design pænt.,,,, konklusion, så det var vores lektion om, hvordan vi kan skabe en skik - responderende menu med toppen bar fra instituttet 4 ramme.og husk, menuen, behøver ikke at være øverst på siden.bare pak den i sine egne rækker og kolonner div., så kan du næsten sted den, hvor du vil.instituttet er et glimrende værktøj til hurtigt at udvikle fleksible modeller, og når du kender din vej rundt, du rent faktisk kan forme det, som du vil have det.have det sjovt!,