Tvorba webových stránok pre učebnice - navigačné menu

Učebnica pre štúdium informatiky alebo mediálnych počítačov.

Navigačné menu

Ak navrhujete navigačné menu pomocou CSS, mali by ste vychádzať z kódu HTML, ktorý je naďalej použiteľný bez CSS („ladná degradácia“) a ktorý je redizajnovaný iba s CSS.

Východiskovým bodom pre navigačnú ponuku je zoznam odkazov v navigačnej značke:

Bez CSS sa zoznam zobrazí ako bežné ukážka.

Vertikálne menu

Pomocou CSS ho môžete zmeniť na vertikálne menu.

Najskôr list-style-type: none zmení položku zoznamu li na bežný deň.

Samotný odkaz a sa stáva blokovým prvkom s display: block. To má výhodu v tom, že ako odkaz slúži celý obdĺžnik, nielen text.

Skutočný odkaz je vyrobený do prvku tvoriaceho blok. Potom je možné kliknúť na celý obdĺžnik, nielen na samotný text. Ukážka

Horizontálne menu

Pomocou flexu môžete menu zobraziť aj vodorovne. Predvolený smer ohýbania je riadok, a teda vodorovné menu.

Responzívna navigácia s hamburgerovým menu

Ponuky horizontálnej navigácie nie sú vhodné pre zariadenia s veľmi malým výstupom, ako sú napríklad smartphony. Tam zmenšíte navigačnú ponuku na jedno tlačidlo, ktoré potom zobrazí alebo skryje navigačnú ponuku:

Ako symbol pre tento typ menu, ktoré sa označuje aj ako ikona hamburgeru, sa často používajú tri zvislé čiary.

PHP pre navigačné menu

Navigačné menu by malo byť samozrejme rovnaké na všetkých stránkach tohto servera. To by sa dalo urobiť skopírovaním kódu do všetkých súborov HTML. Ak chcete vložiť novú stránku, musíte znova upraviť všetky stránky.

Preto má zmysel využiť túto príležitosť na prechod z jednoduchého HTML na PHP. PHP je programovací jazyk na webovom serveri, ktorému sa budeme intenzívne venovať v letnom semestri.

Na prevod musia byť všetky súbory HTML s koncovým .php, v navigačnej ponuke to vyzerá takto:

Navigačné menu je teraz uložené v samostatnom súbore, napríklad navi.php. Menu je potom obsiahnuté na jednotlivých stránkach:

Strana servera

Zahrnutý súbor je vložený na server. Klient dostane kompletný HTML dokument vrátane navigácie a nič si o začlenení nevšimne. Pri ZOBRAZENÍ → ZOBRAZIŤ TEXT ZDROJA STRÁNKY nevidíte kód PHP.

Výsledok

Teraz je veľmi ľahké vložiť novú položku ponuky do navigačnej ponuky: je potrebné upraviť iba súbor navi.php.

kapitola

• Web a html
  • Stručná história World Wide Web
  • Web definujú tri štandardy
  • BNF
  • Základný kurz HTML
  • Odovzdanie a nástroje
• Css
  • Stručné predstavenie šablón štýlov
  • Syntax CSS
  • Dôležité vlastnosti
  • Skriptu CSS
  • Selektory CSS
• Rozloženie CSS
  • Rámca
  • Citlivý dizajn
  • CSS pre rozloženie
  • Podrobnosti o usporiadaní
  • Navigačné menu
  • Selektory CSS podrobne
• URL
  • Absolútne a relatívne adresy URL
  • Konfigurácia webového servera
  • Pragmatické tipy
• Formuláre
  • Formuláre
  • Forma ako interakcia
  • CSS a formulár
  • poslať dáta
  • Formulár a PHP
  • Formulár a Javascript
• Javascript Dom
  • pozadia
  • Ladná degradácia
  • Základný Javascript
  • DOM
  • 2D plátno
  • formulár++
• Jquery
  • Nenápadný Javascript
  • Ladná degradácia
  • Špeciálny javascriptový zápis v jQuery
  • Výber a manipulácia s jQuery
  • Interakcia s jQuery
• Príkazový riadok
  • Príkazový riadok
  • Kde som
  • Prístupové práva
  • Obrázok a video
• Git
  • Kontrola verzie
  • Jednoduchý pracovný tok v Gite
  • Dotaz na stav Gitu
  • Nástroje pre Git
  • Verejný a súkromný kľúč
• Http
  • TCP/IP a DNS
  • HTTP
  • Náradie
  • Príklady
  • PHP negeneruje iba HTML
• Príprava php
  • Čo je to php Čo sa stane na webovom serveri?
  • Apache
  • Prvý program PHP
• Php
  • Varovné oznámenie
  • Syntax PHP
  • Súbory a priečinky v PHP
  • PHP a e-mail
  • Spracovávať údaje z webových formulárov v PHP
  • Nahranie súboru
  • Nahrávanie súborov - klientske rozhranie
  • Chyby + ladenie
• Čítanie php db
  • Databázy
  • PHP a databáza
  • Štruktúra webovej aplikácie
  • Čítanie z databázy
  • Efektívna práca s databázou
• zasadanie
  • Cookies
  • Relácia a prihlásenie
• Písmeno php db
  • Webová aplikácia s prístupom na zápis
  • jasný
  • Vložte
  • Upraviť údaje
  • Spracovanie chyby
  • Povoliť HTML
• Optimalizácia php db
  • Indexy
  • Obmedzenia
  • Zmeny v databáze
  • Transakcie
  • Transakcie a PHP
• grafický
  • HTML + CSS pre grafiku
  • Pixel obrázky
  • SVG - vektorová grafika
  • 2d plátno
  • 3d plátno
• Javascript
  • Premenné a rozsah
  • Funkcie a toto
  • Objekty + triedy
  • Funkcie a uzávery
  • Moduly
  • Štýl + tipy
  • Ladenie
• Applied Js and Css
  • Skontrolujte údaje formulára
  • Opravená hlavička s animáciou
  • Pomaly rolujte
  • mapa
  • Dynamická forma
  • AJAX
  • AJAX nesprávne spôsoby
  • CORS
  • Webové zásuvky na rozhovor
• Json
  • Syntax JSON
  • JSON a PHP
• Xml
  • Čo je to XML
  • dobre sformulovaný XML
  • DTD
  • XML a PHP
  • XML a Javascript
  • XPath
  • Príklad RSS
• Bezpečnosť
  • A1 - Injekcia
  • A2 - autentifikácia
  • A3 - Citlivé údaje
  • A4 - XXE
  • A5 - kontrola prístupu
  • A6 - nesprávna konfigurácia
  • A7 - XSS
  • A8 - Deserializácia
  • Komponenty A9
  • A10 - monitorovanie
  • Nebezpečné priame odkazovanie na objekty
  • CSRF
  • Presmerovania
• Wordpress
  • Čo je wordpress
  • Krátka inštalácia Wordpressu
  • Bezpečnosť
  • Prehľad backend
  • Príspevky a stránky
  • médiá
  • Používajte témy, bočné panely a widgety
  • Použite doplnky
  • Permalinks
• Apache
  • Konfigurovať
  • Overenie
  • Prepísať
• Pokročilý Javascript
  • Funkcia volania
  • Udalosti a uzávierky
  • Prototypy + dedičstvo
  • Regulárne výrazy
• mobilné
  • Citlivý dizajn
  • Progresívna webová aplikácia
  • Cordova
• Kvalita
  • Prístupnosť
  • súkromia
  • výkon
  • ODDYCH

publikované pod Creative Commons by-nc-sa v rokoch 2012-2019 Brigitte Jellinek.

Pre ďalší rozvoj tejto stránky: vidlicový projekt alebo komentár na tejto stránke

---