- vizuálne môže byť efekt rovnaký, ale všimnite si, že v tomto prípade zostane šírka prvku .menu stále 100%.
Oddelenie doložiek
Ak chcete vizuálne oddeliť položky ponuky, môžete pre každú z nich nastaviť dolný alebo horný okraj. V závislosti od toho, ktorý z nich používate, vám bude v hornej alebo dolnej časti ponuky chýbať orámovanie. Toto je možné opraviť pridaním ďalšieho okraja do samotného bloku .menu:
Menu a (horný okraj: 1 pixel plný modrý;) .menu (horný okraj: 1 pixel plný modrý;)
Výška bodu a vertikálne zarovnanie
Odkazy na ponuku momentálne vyzerajú príliš nízko, blízko seba. Ak text každého odkazu nezaberá viac ako jeden riadok, môžete zväčšiť jeho výšku a ponechať text vertikálne na stred pomocou vlastností height a line-height:
Ponuka a (výška: 30px; výška riadku: 30px;) GIF
Ako môžete vidieť na animácii, vlastnosť height ovplyvňuje výšku odkazu a line-height mení výšku samotného textového riadku. Ak chcete, aby bol text odkazu vertikálne vycentrovaný, nezabudnite pre tieto dve vlastnosti nastaviť rovnaké hodnoty.
Horizontálne menu
Hlavnou úlohou pri vytváraní horizontálnej navigácie je usporiadanie položiek ponuky v jednom riadku. Dá sa to urobiť niekoľkými spôsobmi.
Metóda jedna
Prvou možnosťou je nastaviť položky zoznamu tak, aby zobrazovali vlastnosť s hodnotou inline alebo inline-block:
Menu li (zobrazenie: inline;)
V tomto prípade značky vnútri nemôžete ho zablokovať, inak sa body prestanú horizontálne zoraďovať a opäť budú stáť vo zvislej polohe. Odkazy môžu byť tiež nastavené ako vložené alebo vložené do bloku. Ak chcete v budúcnosti vytvoriť odsadenie odkazu, vyberte to druhé.
Potom môžete začať navrhovať odkazy. Môžete napríklad vytvoriť takýto štýl:
Menu a (text-decoration: none; font-family: sans-serif; color: # 5757a0; display: inline-block; padding: 10px 20px; background-color: lavender; border-bottom: 5px solid # 5757a0;)
Ku každému odkazu sme pridali farbu pozadia a spodný okraj a zväčšili sme jeho rozmery výplňou. Všimnite si, že medzi položkami ponuky sú malé medzery, aj keď sme ich nepridali prostredníctvom štýlov. Vznikajú preto, lebo prehliadač takto interpretuje znak návratu vozíka medzi uzatváraciu a otváraciu značku.
... Tieto medzery je možné odstrániť napísaním HTML kódu zoznamu na jeden riadok:
Je to však nepohodlné, pretože tieto zmeny bude potrebné vykonať v HTML manuálne a bude ťažké prečítať kód. Preto sa môžete pokúsiť zbaviť sa medzier pomocou zápornej hodnoty margin-right:
Menu li (pravý okraj: -5px;)
Tento kód medzery neodstráni, ale prekryje ich posunutím prvkov o päť pixelov doľava. Túto metódu nemožno nazvať veľmi spoľahlivou, pretože veľkosť medzery sa môže líšiť v závislosti od iných štýlov.
Ak vo vašom návrhu nie sú plánované medzery medzi odsekmi, je lepšie použiť druhú metódu horizontálneho zarovnania prvkov.
Metóda dva
Možno ste už uhádli, že druhou možnosťou na vytvorenie horizontálneho menu je použitie vlastnosti float. Ak to chcete urobiť, pridajte štýl pre značky
:Menu li (plávajúce: vľavo;)
Ako vidíte, medzi bodmi už nie sú žiadne medzery. Všetky ostatné štýly fungujú ako predtým. Ak však po navigácii pridáte ďalší prvok HTML (povedzme
), potom bude ovplyvnený tokom a bude zarovnaný s položkami ponuky. Túto akciu môžete vrátiť späť pridaním vlastnosti clear: left do nadpisu. Ale pri vývoji webu s veľkým počtom rôznych stránok môže byť ťažké sledovať, či ste niekde nezabudli špecifikovať túto vlastnosť. Z navigačnej strany je oveľa jednoduchšie zrušiť obal. Nasledujúci záznam vám s tým pomôže:
Menu (pretečenie: skryté;)
To tiež pomôže vrátiť rodiča plávajúcich prvkov do normálnej výšky. O tomto probléme sme už hovorili v predchádzajúcich lekciách, ale potom sme ho vyriešili pomocou špeciálneho hacku pomocou pseudoprvku: after. Vyššie uvedený príklad je ďalším spôsobom, ako sa vysporiadať s výškou zmiznutého kontajnera.
Poznámka: ak nastavíte pozadie pre prvok .menu, neuvidíte ho, kým naň nepoužijete overflow: hidden. Dáva to zmysel, pretože ako môžete vidieť pozadie prvku, ktorého výška je nula?
V ďalšej lekcii sa budeme podrobnejšie zaoberať možnosťami selektorov atribútov, pomocou ktorých môžete nastavovať
Posledná aktualizácia: 27.04.2016
Navigačný panel hrá na stránke dôležitú úlohu, pretože poskytuje prechody medzi stránkami lokality alebo k externým zdrojom. Poďme sa pozrieť na to, ako vytvoriť jednoduchý navigačný panel.
V skutočnosti je navigačný panel súborom odkazov, často vo forme neusporiadaného zoznamu. Existujú rôzne navigačné lišty: vertikálne a horizontálne, jednoúrovňové a viacúrovňové, ale v každom prípade je v strede každej navigácie prvok ... Preto sa pri vytváraní navigačnej lišty môžeme stretnúť s množstvom ťažkostí, ktoré vyplývajú z obmedzení prvku odkazu. Totiž element je malé, čo znamená, že preň nemôžeme určiť šírku, výšku, výplň. Šírka odkazu automaticky zaujme miesto, ktoré potrebuje.
Vertikálne menu
Bežným riešením tohto problému pre vertikálne ponuky je urobiť z odkazu blokový prvok.
Navigačný panel v HTML5
Po nastavení vlastnosti display: block môžeme definovať šírku bloku odkazu, padding atď.
Horizontálne menu
Existujú dva spôsoby vytvorenia horizontálneho menu. Prvým je použitie vlastnosti float a vytváranie plávajúcich prvkov z väzieb, ktoré sa okolo seba obtekajú zľava. A druhý spôsob je vytvoriť rad odkazov nastavením vlastnosti display: inline-block.
Pomocou plavákov
Algoritmus na vytvorenie navigačnej lišty pomocou float je rozdelený do dvoch etáp. V prvom kroku je prvok li, ktorý obklopuje odkaz, nastavený na float: left; ... To umožňuje, aby boli všetky prvky zoznamu usporiadané v riadku s dostatočnou šírkou, keď sa pravý prvok zoznamu zalomí okolo ľavého prvku zoznamu.
Druhou fázou je nastavenie zobrazenia prvku odkazu: blok, čo nám umožňuje nastaviť šírku, výplň, vo všeobecnosti všetky tie znaky, ktoré sú charakteristické pre prvky bloku.
Navigačný panel v HTML5
- Domov
- Blog
- Kontakty
- O stránke
inline a inline-block
Aby sme vytvorili vodorovnú navigačnú lištu, musíme urobiť každý prvok li inline, to znamená nastaviť ho na zobrazenie: inline. Potom pre prvok odkaz, ktorý sa nachádza v prvku li, môžeme nastaviť display: inline-block:
Navigačný panel v HTML5
- Domov
- Blog
- Kontakty
- O stránke
Ak váš web nie je obmedzený na jednu webovú stránku, potom stojí za zváženie pridanie navigačnej lišty (menu). Menu – časť webovej stránky, ktorá má návštevníkovi pomôcť pri navigácii na stránke. Akékoľvek menu je zoznam odkazov vedúcich na interné stránky lokality. Najjednoduchší spôsob, ako pridať navigačný panel na vašu stránku, je vytvoriť menu pomocou CSS a HTML.
Vertikálne menu
Prvým krokom pri vytváraní vertikálneho menu je vytvorenie zoznamu s odrážkami. Musíme byť tiež schopní identifikovať zoznam, takže k nemu pridáme atribút id s id „navbar“. Každý prvok
náš zoznam bude obsahovať jeden odkaz:
- Domov
- správy
- Kontakty
- O nás
Našou ďalšou úlohou je obnoviť predvolené štýly zoznamu. Musíme odstrániť výplň a výplň zo samotného zoznamu a odrážky z položiek zoznamu. Potom nastavíme požadovanú šírku:
#navbar (margin: 0; padding: 0; list-style-type: none; width: 100px;)
Teraz je čas upraviť samotné odkazy. Pridáme im farbu pozadia, zmeníme parametre textu: farbu písma, veľkosť a váhu, odstránime podčiarknutie, pridáme malé odsadenia a predefinujeme zobrazenie. prvok z riadku do bloku. Okrem toho boli do položiek zoznamu pridané ľavé a spodné rámy.
Najdôležitejšou súčasťou našich zmien je predefinovanie vložených prvkov na blokové prvky. Teraz naše odkazy zaberajú všetok dostupný priestor položiek zoznamu, to znamená, že na sledovanie odkazu už nemusíme prechádzať kurzorom nad textom.
#navbar a (background-color: # 949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid # 33ADFF; display: block;) #navbar li ( border-left: 10px solid # 666; border-bottom: 1px solid # 666;)
Všetok kód popísaný vyššie sme spojili do jedného príkladu, teraz kliknutím na tlačidlo vyskúšať môžete prejsť na stránku s príkladom a pozrieť si výsledok:
Názov dokumentu
- Domov
- správy
- Kontakty
- O nás
Skús"Keď umiestnite kurzor myši na položku ponuky, jej vzhľad sa môže zmeniť a upútať pozornosť používateľa. Takýto efekt môžete vytvoriť pomocou pseudotriedy: hover.
Vráťme sa k predchádzajúcemu príkladu vertikálnej ponuky a do šablóny so štýlmi pridajte nasledujúce pravidlo:
#navbar a: podržte kurzor (farba pozadia: # 666; ľavý okraj: 5 pixelov plné # 3333FF;) Vyskúšajte to "
Horizontálne menu
V predchádzajúcom príklade sme sa pozreli na vertikálny navigačný panel, ktorý sa najčastejšie nachádza na stránkach vľavo alebo vpravo od oblasti hlavného obsahu. Ponuky s navigačnými odkazmi sú však často umiestnené vodorovne v hornej časti webovej stránky.
Horizontálnu ponuku je možné vytvoriť úpravou bežného zoznamu. Vlastnosť zobrazenia pre prvky
musíte nastaviť hodnotu na inline, aby boli položky zoznamu umiestnené za sebou.
Ak chcete umiestniť položky ponuky vodorovne, najskôr vytvorte zoznam s odrážkami s odkazmi:
- Domov
- správy
- Kontakty
- O nás
Napíšme pár pravidiel pre náš zoznam, ktoré obnovia štýl používaný pre predvolené zoznamy a predefinujú položky zoznamu z bloku na malé písmená:
#navbar (margin: 0; padding: 0; list-style-type: none;) #navbar li (display: inline;) Skúste to "
Teraz už len musíme definovať štýl našej horizontálnej ponuky:
#navbar (margin: 0; padding: 0; list-style-type: none; border: 2px solid # 0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: # 33ADFF; ) #navbar a (farba: #fff; výplň: 5px 10px; výzdoba textu: žiadna; váha písma: tučné; zobrazenie: vložený blok; šírka: 100px;) #navbar a: vznášanie sa (polomer okraja: 20px 5px ; farba pozadia: # 0066FF;) Skúste to "
Rozbaľovacia ponuka
Menu, ktoré vytvoríme, bude mať hlavné navigačné odkazy umiestnené vo vodorovnej navigačnej lište a podpoložky, ktoré sa zobrazia až po prejdení kurzorom myši na položku ponuky, na ktorú tieto podpoložky odkazujú.
Najprv musíme vytvoriť štruktúru HTML pre naše menu. Hlavné navigačné odkazy umiestnime do zoznamu s odrážkami:
- Domov
- správy
- Kontakty
- O nás
Podpoložky umiestnime do samostatného zoznamu vnorením do prvku
ktorý obsahuje nadradený odkaz týkajúci sa článkov. Teraz máme jasnú štruktúru pre náš budúci navigačný panel:
- Domov
- správy
- Kontakty
- O nás
Skús"Teraz sa pustíme do písania kódu CSS. Najprv musíte skryť zoznam podpoložiek so zobrazením: žiadne; deklarácia, aby sa na webovej stránke nezobrazovali stále. Ak chcete zobraziť podpoložky, potrebujeme to pri umiestnení kurzora myši nad prvok
zoznam bol opäť skonvertovaný na blokový prvok:#navbar ul (zobrazenie: žiadne;) #navbar li: hover ul (zobrazenie: blok;)
Odstráňte predvolené okraje a značky z oboch zoznamov. Položky zoznamu s navigačnými odkazmi sú plávajúce, tvoriace horizontálne menu, ale pre položky zoznamu obsahujúce podpoložky nastavte float: none; aby sa zobrazovali pod sebou.
#navbar, #navbar ul (okraj: 0; výplň: 0; typ štýlu zoznamu: žiadny;) #navbar li (plávajúci: vľavo;) #navbar ul li (plávajúci: žiadny;)
Ďalej sa musíme uistiť, že naša rozbaľovacia podponuka neposúva obsah pod navigačný panel smerom nadol. Za týmto účelom dáme položkám zoznamu pozíciu: relatívna; a zoznam obsahujúci podpoložky position: absolute; a pridajte top vlastnosť s hodnotou 100% tak, aby sa presne pod odkazom objavilo absolútne umiestnené podmenu.
#navbar ul (zobrazenie: žiadne; pozícia: absolútna; horná časť: 100 %;) #navbar li (plávajúca: vľavo; pozícia: relatívna;) #navbar (výška: 30px;) Skúste to "
Výška nadradeného zoznamu bola pridaná zámerne, keďže prehliadače neberú do úvahy plávajúci obsah ako obsah prvku, potom bez pridania výšky bude náš zoznam prehliadačom ignorovať a obsah nasledujúci za zoznamom sa zalomí naše menu.
Teraz musíme upraviť naše zoznamy a rozbaľovacia ponuka bude pripravená:
#navbar ul (zobrazenie: žiadne; farba pozadia: # f90; pozícia: absolútna; horná časť: 100 %;) #navbar li: hover ul (zobrazenie: blok;) #navbar, #navbar ul (okraj: 0; výplň: 0; list-style-type: none;) #navbar (výška: 30px; farba pozadia: # 666; padding-left: 25px; min-width: 470px;) #navbar li (float: left; position: relatívna; výška: 100 %;) #navbar li a (zobrazenie: blok; výplň: 6px; šírka: 100px; farba: #fff; dekorácia textu: žiadna; zarovnanie textu: stred;) #navbar ul li (plávajúca: žiadna; ) #navbar li: vznášať sa (farba pozadia: # f90;) #navbar ul li: vznášať sa (farba pozadia: # 666;)
Navigačná lišta
- toto je jeden z prvkov príkazového rozhrania programu. Ide o akýsi „obsah“ sekcie alebo pomocné okno (obr. 1.9). Pomocou neho môžete zobraziť jednu alebo druhú informáciu obsiahnutú v sekcii alebo v pomocnom okne.
Navigačná lišta obsahuje navigačné príkazy, teda príkazy, ktoré nespôsobujú zmeny údajov, ale umožňujú iba navigáciu k požadovaným informáciám. Spravidla ide o príkazy na presun do niektorých zoznamov. Keď je takýto príkaz vyvolaný, v pracovnej oblasti sa zobrazí zodpovedajúci zoznam, ktorý nahradí predchádzajúci obsah pracovnej oblasti.
Napríklad v dôsledku volania príkazu Sklady v pracovnom priestore sa otvorí zoznam skladov (obr. 1.10).
Obrázok 1.9 - Navigačný panel príkazového rozhrania Pracovnej plochy spravovanej aplikácie 1C: Enterprise 8 v režime Konfigurácia
Obrázok 1.10 - Vyvolanie navigačného príkazu príkazového rozhrania Pracovnej plochy spravovanej aplikácie 1C: Enterprise 8
Sú situácie, keď je potrebné analyzovať alebo porovnať rôzne časti toho istého zoznamu alebo rôzne zoznamy. V tomto prípade môžete otvoriť niekoľko zoznamov súčasne (obr. 1.11). Jeden je v hlavnom okne a zvyšok je v sekundárnych oknách.
Ak chcete otvoriť zoznam v pomocnom okne, pri volaní navigačného príkazu musíte podržať kláves Shift.
Obrázok 1.11 - Vyvolanie navigačného príkazu s otvorením niekoľkých zoznamov príkazového rozhrania pracovnej plochy spravovanej aplikácie 1C: Enterprise 8
Príkazy na navigačnom paneli sú zvyčajne umiestnené v troch štandardných skupinách (obrázok 1.12).
Úplne prvá skupina - Dôležité... Jej názov sa nezobrazuje, ale príkazy tejto skupiny sú tučne. Tu sú príkazy na navigáciu k informáciám, ktoré sa v tejto časti používajú najčastejšie.
Druhá skupina - Spoločné... Táto skupina tiež nemá názov, jej príkazy sú zobrazené bežným písmom.
Tretia skupina - Pozri tiež... Príkazom v tejto skupine predchádza nadpis Pozri tiež a nie sú potrebné pre prácu v tejto časti. Ale môžu byť užitočné.
Obrázok 1.12 - Vyvolanie navigačného príkazu s otvorením niekoľkých zoznamov príkazového rozhrania pracovnej plochy spravovanej aplikácie 1C: Enterprise 8
Okrem štandardných skupín môže navigačná lišta obsahovať aj skupiny vytvorené vývojárom.
V skupine tímov Spoločné môžu existovať ďalšie skupiny príkazov. Takéto skupiny majú nadpisy a príkazy v nich umiestnené sú zobrazené odsadené od ľavého okraja (obr. 1.13). Kliknutím na nadpisy týchto skupín možno príkazy skryť a zobraziť.
Ak sú sekcie programu tvorené podsystémami prvej úrovne, tak skupiny príkazov v navigačnom paneli tvoria podsystémy druhej a nižšej úrovne (obr. 1.14).
Spravidla počet tímov umiestnených v skupinách Dôležité a pozri tiež- nie skvelé. Kým ste v skupine Hlavný príkazov môže byť pomerne veľké množstvo. Preto sa používa dodatočné zoskupenie týchto tímov, ktoré uľahčuje orientáciu v ich zložení.
Obrázok 1.13 - Ďalšie skupiny príkazov príkazového rozhrania Pracovnej plochy spravovanej aplikácie 1C: Enterprise 8
Obrázok 1.14 - Súlad medzi skupinami príkazov a príkazovým rozhraním pracovnej plochy spravovanej aplikácie 1C: Enterprise 8
Používateľ má možnosť prispôsobiť si zloženie navigačnej lišty: pridať alebo odstrániť príkazy, zmeniť ich poradie. Môže napríklad odstrániť skupiny tímov technické údaje a Ceny a príkaz Úpravy zostatkov presunúť do skupiny pozri tiež(obr. 1.15)... Program si automaticky zapamätá nastavenia vykonané používateľom a nabudúce zobrazí navigačnú lištu tak, ako ju používateľ nakonfiguroval.
Obrázok 1.14 - Používateľská rekonfigurácia príkazového rozhrania Pracovnej plochy spravovanej aplikácie 1C: Enterprise 8
Hodnota avatarov v psychológii
Hodnota avatarov v psychológii
Ako zdôrazniť písmeno v MS Word
Čo to znamená, ak je avatar osoby
Ako si vytvoriť svoj vlastný Twitter moment