Čo je jedným z hlavných prvkov každej internetovej stránky? Samozrejme, navigačné menu. Každé menu je užitočnou súčasťou webovej stránky, pretože práve cez ňu môže používateľ prechádzať do iných sekcií stránky. Hlavná interakcia návštevníka s webovou stránkou sa uskutočňuje prostredníctvom navigačného menu. V súčasnosti sa na stránkach webových stránok môžete stretnúť s čoraz atraktívnejšími a pohodlnejšími navigačnými ponukami.

Dnes vám predstavujeme 62 atraktívnych navigačných ponúk založené na technológii CSS, javascript alebo Flash.

Navigačná ponuka CSS

Hry ako kasíno alebo hady a rebríky, zdobené krásnym farebným menu.

Tu vidíme skvelú jemnú farebnú schému a zaujímavý efekt pri otvorení podponuky.


03.

Steven Wittens nám ponúka iný pohľad na toto menu.


04.

Na stránke UX Booth si môžete pozrieť štýlové, no veľmi jednoduché menu.


05.

Stránka MacRabbit zjavne používa ponuku v štýle MAC OS alebo Apple.


06.

Webová stránka Joyent používa jednoduché, obchodne vyzerajúce menu, ktoré obsahuje zoznam prác spoločnosti.


07.

Prepracovanosť a jednoduchosť tohto portfólia vás určite osloví.


08.

Veľké menu vo forme obrázkov určite upúta vašu pozornosť. Ako vidíte, nie veľmi tradičný spôsob navrhovania jedálneho lístka.


09.

Rozbaľovacia ponuka, ktorá používa 2 farby, ktoré symbolizujú aktívnu položku ponuky a neaktívnu položku.


10.

Americká nahrávacia spoločnosť Small Stone recordings používala menu v podobe rádia, alebo v podobe Space Echo Roland SE-201.


11.

Niečo ako mapa, pomocou ktorej môžete „preskúmať“ celý web.


12.

Okrúhle menu v štýle Apple s aplikáciami pre iPhone.


13.

Clearleft používal niečo ako kalendár s naplánovanými úlohami ako menu.


14.

Zdá sa, že vybratá položka ponuky je v stlačenom stave.


15.

Kliknutím na položku ponuky sa rozbalí ďalšia podponuka. Menu vyzerá celkom jednoducho, hoci je natreté na čierno.


16. .

Toto menu používa jednoduchý a pekný efekt vznášania.


17.

Veľkosť písmen je taká roztomilá a nezvyčajná a práve to upúta vašu pozornosť.


18.

Skvelé riešenie pre použitie blokovej navigácie s veľkým efektom vznášania.


19.

Skvelá zelená farba a listový vzhľad menu upútajú vašu pozornosť. Má tiež skvelý efekt, ktorý vám pomôže určiť, v ktorej podsekcii sa práve nachádzate.


20.

Dizajnéri webových stránok Ronnyho Priesa využili skvelý koncept navigačného menu. Užívatelia sú vedení podľa plánu na poschodí.


21.

Ďalším kreatívnym spôsobom implementácie navigačného menu je použitie obrázka ovocného stromu, cez ktorý sa dostanete do ďalších podsekcií.


22.

Pozrite sa, ako Matt Dempsey kreatívne využíva ťahy štetcom.


23.

Vynikajúca implementácia navigačného menu.


24.

Vertikálne karty, ktoré vyzerajú ako priečinky, ktoré fungujú priamo na webovej lokalite. Veľmi málo používané tadiaľto ale funguje a vyzerá super.


25.

Navigačné menu implementované v štýle punk rockovej hudby. Pozrite sa, ako Jeff Sarmiento implementoval túto myšlienku.


26.

Niečo ako hierarchia. Ďalší kreatívny spôsob implementácie navigačného menu.


27.

Ikony umocňujú pocit z interakcie s menu.


Navigačné ponuky vyvinuté technológiou Flash

AT toto menu navigácia implementovala veľmi zaujímavý efekt pri prejdení kurzorom myši.


29.

Navigácia, ktorá umožňuje vykonať niektoré úpravy pomocou špeciálnych posuvníkov.


30.

Zaujímavé a atraktívne menu v štýle tarotových kariet. Ak kliknete na kartu, okamžite pôjde do ohňa.


31.

Plynulé navigačné menu, ktoré vám dá pocit pohybu vĺn na jazere.


32.

Web Nick Jones používa na navigáciu v portfóliu jednoduchú, ale dynamickú navigačnú ponuku.


33.

Na stránke Marc Ecko je navigácia prezentovaná formou obrázkovej galérie. Návštevníkom umožňuje prechádzať sa po stránkach umenia a filozofie.


34.

HBO je niečo ako archív filmových dokumentov. Používanie navigačného menu interaktívny výber filmy.


35. ?

Zaujímavé navigačné menu s jednoduchým efektom vznášania. Keď umiestnite kurzor myši na ikonu, zobrazí sa obsah ponuky.


36.

Agentúra pre návrh navigačného menu so sídlom v New Yorku a Fort Lauderdale.


37.

Štýlový neoantický dizajn navigácie s freskovým pozadím.


38.

Webová stránka Nick Ad používa flexibilné, no ľahko použiteľné navigačné menu. Kliknite kdekoľvek na stránku a uvidíte zaujímavý efekt.


39.

Kreatívny človek využíva svoju vlastnú tvorbu na prilákanie návštevníkov do portfólia.


40. .

Sekcia Sedem má zaujímavé menu v štýle brožúry s podmenu.


41.

Navigačná ponuka, ktorá sa otvára a zatvára po výbere určitých položiek.


42.

Na webovej stránke Beside je navigačné menu implementované v dúhovom štýle.


43.

Koncept kartónového portfólia. Veľmi zaujímavý efekt vznášania.


44.

Malé kocky naukladané dohromady fungujú ako navigačné menu.


45.

Farebne bohatá mapa s nádychom textúry národných havajských papúč, na ktorú sú všetci ľudia hrdí.


46.

Stôl s vecami, ktoré symbolizujú menu: telefón na kontaktovanie administratívy, časopis na prechod do portfólia, noviny na sledovanie správ a ďalšie.
Je veľmi zaujímavé, keď sa ako navigácia používajú skutočné veci.


47.

Skvelý kreatívny spôsob implementácie navigačného menu. Každý prvok je krásny svojím vlastným spôsobom, všetky dávajú život celej webovej stránke. Takéto metódy sa používajú veľmi zriedka, ale je to naozaj magické.


Navigačné menu vyvinuté pomocou technológie javascript

Jednoduché a oku lahodiace navigačné menu v rôznych farbách.


49.

Vyzerá to, že menu je implementované pomocou Flask, ale nie je to tak. Úhľadné, cool a štýlové navigačné menu s efektmi pri umiestnení myši.

Pre jednoduchú navigáciu po stránke sa na všetkých stránkach používajú menu, aby používateľ pochopil, čo a kde máte. Takmer vždy v hornej časti stránky (v hlavičke) majú horizontálne menu podľa sekcií (kategórií) webu a vertikálne menu je napísané v paneli webu (v stĺpci) a používa sa na navigáciu v článkoch.

Z článku pochopíte, ako vytvoriť menu pre html stránku, čo musíte napísať, aby ste získali horizontálne a vertikálne menu v css alebo menu s rozbaľovacím zoznamom.

Na zostavenie menu (akéhokoľvek) použijeme odrážkový zoznam, ku ktorému priamo pripojíme vlastnú triedu a napíšeme naše parametre pre túto triedu s potrebnými hodnotami.

Napríklad na vytvorenie menu použijeme zoznam s triedou class = "menu" (ľubovoľný názov triedy, iba latinské písmená) a html kód bude vyzerať takto:

  • Domov
  • články
  • O mne
  • Kontakty

AT štýl menu Zadal som požadované vlastnosti s požadovanými hodnotami:

Požadované parametre a hodnoty CSS

  • okraj: 0; - odstráňte všetky zarážky zoznamu, inak prehliadač nahradí predvolené hodnoty 20px;
  • list-style-type: none; - odstráňte značky z položiek ponuky, inak prehliadač pridá bodky alebo čísla.

Takto sa robí menu html stránky, a teraz prejdime k vytvoreniu horizontálneho menu a pozrime sa na všetko s príkladmi.

Ako vytvoriť horizontálne menu v CSS

Ak chcete zobraziť horizontálne menu pomocou zoznamu, stačí do vyššie uvedeného kódu napísať iba jeden parameter display: inline; tak, aby boli položky ponuky zarovnané na jeden riadok a vodorovne za sebou. A tiež pridať výplň medzi položky ponuky pomocou okraja .

  • Domov
  • články
  • O mne
  • Kontakty

A bude to vyzerať takto:

Horizontálne menu máme hotové, ostáva mu dodať krásny vzhľad.

Dajme každej položke v horizontálnom menu orámovanie a nech má skosené okraje, výplň určitú farbu background-color (pridajte pozadie pre položku ponuky) a zmeňte vzhľad odkazu.

  • Domov
  • články
  • O mne
  • Kontakty

Horizontálne menu sa už zobrazí takto:

Keďže horizontálne menu je vo väčšine prípadov predpísané v hlavičke stránky, v príklade som do menu pridal pozadie, ktoré si zmeníte tak, aby zodpovedalo farbe vašej hlavičky.

A kvôli prehľadnosti som položky ponuky vycentroval použitím vlastnosti text-align: center; , ktorý je možné vymazať (automaticky zarovnať doľava), alebo nastaviť hodnota zarovnania textu:správny; a na pravej strane sa zobrazí horizontálna ponuka.

Mimochodom, môžete tiež použiť, čo môžete vidieť na vlastné oči a stiahnuť si ho zadarmo.

Ako vytvoriť vertikálne menu pomocou CSS

Vertikálne menu v CSS sa robí a štylizuje na stránke v podstate rovnakým spôsobom ako horizontálna, len tu sa mení na .menu-2 li (... parameter so zobrazením hodnoty: blok; (ukazuje na prvok bloku), ktorý dáva je to vertikálne zobrazenie položiek ponuky.

A ešte jeden dodatok k vertikálnemu menu: keďže sa vo väčšine prípadov nachádza v bočnom stĺpci webu, ktorý má pevnú šírku, sme nútení nastaviť aj šírku šírky: 100%; našu vertikálnu ponuku tak, aby pokrývala celú šírku stĺpca.

Pozrime sa na vertikálnu ponuku CSS s príkladom:

  • Prvá položka menu
  • Druhá položka menu
  • Tretia položka menu
  • Štvrtá položka menu

Vertikálne menu sa na stránke zobrazí takto:

Buď opatrný!

Predpísal som pre vertikálne menu namiesto bočného panela webu, takže ho odstránite na konci kódu
vymazať to isté.

Ako vytvoriť rozbaľovaciu ponuku pomocou CSS

Vytvorte rozbaľovaciu ponuku pomocou pomocou CSS celkom jednoduché. Len do existujúceho kódu z vertikálneho menu pridáme niekoľko parametrov, ktoré budú zodpovedné za rozbaľovací zoznam položiek menu.

Určite si zapamätajte!
Aby sa rozbaľovacia ponuka presne zobrazovala oproti vedúcemu odkazu, musíte v CSS pre značku li, kde sa tento odkaz nachádza, napísať position: relativní; a pre pozíciu rozbaľovacej ponuky: absolútna;

Píšme html kód pre rozbaľovaciu ponuku v CSS.

  • Prvá položka menu
  • Druhá položka ponuky ⇒
    • Prvý pododsek
    • Druhý pododsek
    • Tretí pododsek ⇒
      • Prvý odkaz
      • Druhý odkaz
      • Tretí odkaz
      • štvrtý odkaz
    • Štvrtý pododsek
  • Tretia položka ponuky ⇒
    • Prvý odkaz
    • Druhý odkaz
    • Tretí odkaz
    • štvrtý odkaz
  • Štvrtá položka menu

Pozrite sa, ako bude na stránke vyzerať rozbaľovacia ponuka CSS.

Rovnakým spôsobom je napísaná rozbaľovacia ponuka s horizontálnym rozložením navigácie. Jediná vec je, že nezabudnite zmeniť hodnoty parametrov hore a vľavo (horná a ľavá zarážka).

Pozri!
Len s 3 zmenami CSS sa naše rozloženie vertikálnej rozbaľovacej navigácie zmení na horizontálnu rozbaľovaciu navigáciu.

Zmeny CSS pre rozbaľovaciu ponuku

  • Nahradiť v .saitbar - šírka: 240px; na šírku: 100 %;
  • Vymeňte v .menu-4 li - zobrazenie: blok; na displeji:inline-block;
  • Nahradiť v .menu-4 ul.submenu - hore: 0; navrchu: 34px;
  • Nahradiť v .menu-4 ul.submenu - vľavo: 214px; vľavo: 7px;
Dátum zverejnenia: 18.08.2018

Horizontálne menu je zoznam sekcií stránky, takže je logickejšie označovať vnútri prvku

    a potom aplikujte štýly CSS na jeho prvky. Toto usporiadanie menu je najbežnejšie kvôli zjavným výhodám v jeho umiestnení na webovej stránke.

    Ako vytvoriť horizontálne menu: príklady značiek a dizajnu

    HTML značenie a základné štýly pre horizontálne menu

    Štandardne sú umiestnené všetky položky zoznamu vertikálne po celej šírke kontajnerového prvku, ktorý sa zase rozprestiera po celej šírke jeho kontajnerového bloku.

    HTML značky pre horizontálnu navigáciu

    Do prvku možno dodatočne umiestniť horizontálne menu umiestnené vo vnútri značky

    a/alebo
    ...
    . Vďaka tomuto html značeniu je daný sémantický význam a tiež sa objavuje dodatočná príležitosť na formátovanie bloku ponuky.

    Existuje niekoľko spôsobov, ako ich umiestniť horizontálne. Najprv musíte obnoviť predvolené štýly prehliadača pre navigačné prvky:

    Ul ( list-style: none; /*odstráni značky zoznamu*/ okraj: 0; /*odstráni horný a dolný okraj 1em*/ padding-left: 0; /*odstráni ľavý výplň 40px*/ ) a (text-decoration: none; /*odstrániť podčiarknutie textu odkazu*/)

    Metóda 1. li (zobrazenie: inline;)

    Urobte položky zoznamu vložené. V dôsledku toho sú usporiadané vodorovne, na pravej strane sa medzi ne pridá medzera rovnajúca sa 0,4 em (vypočítaná vzhľadom na veľkosť písma). Ak ho chcete odstrániť, pridajte záporný pravý okraj k li li (margin-right: -4px;) . Ďalej upravte štýl odkazov, ako chcete.

    Metóda 2. li (plávajúca: vľavo;)

    Prvky zoznamu robíme plávajúcimi. V dôsledku toho sú usporiadané horizontálne. Výška ul kontajnerového bloku bude nulová. Na vyriešenie tohto problému pridáme (pretečenie: skryté;) do ul , čím ho rozšírime a umožníme mu tak obsahovať plávajúce prvky. V prípade odkazov pridajte (zobraziť: blok;) a upravte ich podľa potreby.

    Metóda 3. li (zobrazenie: inline-block;)

    Vytváranie položiek zoznamu inline-block. Sú usporiadané horizontálne, na pravej strane je vytvorená medzera, ako v prvom prípade. V prípade odkazov pridajte (zobraziť: blok;) a upravte ich podľa potreby.

    Metóda 4. ul (zobrazenie: flex;)

    Vytvorenie zoznamu ul ako flexibilného kontajnera pomocou súboru . V dôsledku toho sú prvky zoznamu usporiadané horizontálne. Pridajte (zobrazenie: blok;) pre odkazy a upravte ich podľa potreby.

    1. Responzívne menu s efektom podčiarknutia pri umiestnení kurzora myši nad odkaz

    • práca
    • O
    • Blog
    • kontakt
    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after ( content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", bezpätkové; medzery medzi písmenami: 2px; pozícia: relatívna; padding-bottom: 20px; margin: 0 34px 0 30px; veľkosť písma: 17px; text-transform: veľké písmená; displej: inline-block; prechod: farba .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; vľavo: 50 %; pozadie: #feb386; prechod: .8s; ) .menu-main a:hover:before, .menu-main .current:before (vľavo: 0;) .menu-main a: hover:after, .menu-main .current:after (vpravo: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (content: none;) .menu- hlavné a ( odsadenie: 25px 0 20px; okraj: 030px; ))

    2. Responzívne menu pre svadobný web

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozícia: relatívna; pozadie: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ).top-menu:after ( border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: stred; pozícia: relatívna; ) .hlavná ponuka:pred, .hlavná ponuka:po ( obsah: "\25C8"; výška riadku: 1; pozícia: absolútna; hore: 50 %; transformácia: preložiťY(-50 % ); ) .menu-main:before (vľavo: 15px;) .menu-main:after (vpravo: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px pevná priehľadnosť n: 0,3 s lineárny; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) )

    3. Citlivé menu s hrebenatkami

    • práca
    • O
    • Blog
    • kontakt
    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relativní; background: white; ) .menu-main:after ( content: ""; pozícia: absolútna; šírka: 100%; výška: 20px; vľavo: 0; spodok: -20px; pozadie: radiálny prechod (biela 0%, biela 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: žiadne; zobrazenie: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", bezpätkové; farba: #777777; prechod: .3s lineárny; poloha: relatívna; ) .menu -main a:before, .menu-main a:after ( content: ""; position: absolute; top: calc(50% – 3px); width: 6px; height: 6px; border-radius: 50%; background: . current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (nepriehľadnosť: 1;) .menu-main a.current, .menu-main a:hover (farba: #F58262; ) @media(max-width:680px) ( .menu-main li (display: block;) )

    4. Responzívna ponuka s nástrojmi

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; position: relativní; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), vložka -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index: 2; vľavo: 0; šírka: 100 %; top-menu:before ( top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) .menu-main:before, .menu-main:after ( content: ""; position: absolute; šírka: 50px; výška: 0; hore: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotation(360deg); z-index: -1; ) .menu-main: pred ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(2) 55, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a (text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", bezpätkové; farba: biela; prechod: .3s lineárny; ) .menu-main a.current, .menu-main a:hover (pozadie: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (obsah: žiadny;) .menu-main a (zobrazenie: blok;) )

    5. Responzívne menu s logom v strede

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( pozícia: relatívna; pozadie: rgba(34,34,34,.2); ) .menu-main ( list-style: none; margin: 0; padding: 0; ) .menu-main:after ( content: ""; display: table; clear: both; ) .left-item (float: left;) .right-item (float: right;) .navbar-logo ( position: absolute; left: 50%; top : 50%; transform: translate(-50%,-50%); ) .menu-main a (text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; medzery medzi písmenami: 2px; font-family: "Arimo", bezpätkové; váha písma: tučné; farba: biela; prechod: .3s lineárny; ) .menu-main a:hover (pozadie: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo (position: absolute; left: 50% ;top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a (line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )

    6. Responzívne menu s logom na ľavej strane

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" ;display: table; clear: both; ) .navbar-logo (display: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: block; position: relatívna; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", bezpätkové; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; výška: 9px; pozadie: #F73E24; pozícia: absolútna; vľavo: 50%; transformácia: rotácia (45°) translateX(6,5px); nepriehľadnosť: 0; prechod: 0,3 s lineárny; ) .menu-main a:hover:before (opacity: 1;) @media (max-width: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (výplň: 0 10px;) .menu-main a:be vpredu (transformácia: otočiť(45°) preložiťX(-6px);) ) @media (maximálna šírka: 600px) ( .menu-main li (zobrazenie: blok;) )

    Dobrý deň všetkým, ktorí práve čítajú túto publikáciu. Dnes vám chcem povedať o jednom z nástrojov na vytváranie stránok, bez ktorého sa nezaobíde žiadny webový zdroj. Toto je ponuka lokality, alebo ako sa hovorí, mapa lokality. K dnešnému dňu existuje nekonečné množstvo druhov a poddruhov jedálneho lístka.

    Vývojári internetových obchodov, blogov, vzdelávacích služieb a iných zdrojov experimentujú a vytvárajú stále viac nových a nezvyčajných kariet. Po prečítaní článku zistíte, do akých hlavných skupín sú rozdelené všetky typy navigačných panelov, budete si môcť každý z nich vyskúšať a tiež sa naučíte, ako napísať kód menu pre html stránku. A teraz poďme rovno k veci!

    Nástroje na vytváranie navigačnej lišty

    V značkovacom jazyku existuje niekoľko spôsobov, ako vytvoriť menu. Ich hlavnou koncepciou je použitie neusporiadaného zoznamu. V pre nás obvyklom html 4 vývojári teda píšu značky na stránku