Tankönyv webfejlesztés - navigációs menü

Tankönyv a számítástechnika vagy a média-informatika tanulmányozásához.

Navigációs menü

Ha navigációs menüt tervez CSS-sel, akkor egy olyan HTML-kódból kell indulnia, amely továbbra is használható CSS ​​nélkül ("kecses lebontás"), és amelyet csak CSS-sel újraterveznek.

A navigációs menü kiindulópontja a navigációs címkében található hivatkozások listája:

CSS nélkül a lista normál bemutatóként jelenik meg.

Függőleges menü

A CSS segítségével vertikális menüvé alakíthatja.

Először: list-style-type: egyik sem változtatja a li elemet normál nappalivá.

Maga a link blokkképző elemmé válik a display: block paranccsal. Ennek az az előnye, hogy az egész téglalap hivatkozásként működik, és nem csak a szöveg.

A tényleges összeköttetésből blokkképző elem lesz. Ezután a teljes téglalapra lehet kattintani, nemcsak magára a szövegre

Vízszintes menü

A flex segítségével vízszintesen is megjelenítheti a menüt. A hajlítási irány alapértelmezett iránya a sor, így egy vízszintes menü.

Reszponzív navigáció hamburger menüvel

A vízszintes navigációs menük nem alkalmasak nagyon kicsi kimeneti eszközök, például okostelefonok számára. Itt a navigációs menüt egyetlen gombra redukálja, amely aztán megjeleníti vagy elrejti a navigációs menüt:

Három függőleges vonalat gyakran használnak szimbólumként az ilyen típusú menüben, más néven hamburger ikonként.

PHP a navigációs menühöz

A navigációs menünek természetesen meg kell egyeznie a webhely minden oldalán. Ezt úgy teheti meg, hogy a kódot átmásolja az összes HTML fájlba. Ha ezután új oldalt szeretne beszúrni, akkor az összes oldalt újra szerkesztenie kell.

Tehát van értelme megragadni ezt a lehetőséget, hogy az egyszerű HTML-ről PHP-re váltson. A PHP a webszerver programozási nyelve, amellyel intenzíven fogunk foglalkozni a nyári félévben.

A konvertáláshoz az összes HTML fájlnak rendelkeznie kell .php végződéssel, a navigációs menüben így néz ki:

A navigációs menü most külön fájlba van mentve, pl. Navi.php. Ezután a menü az egyes oldalakon szerepel:

Szerver oldal

A beépített fájl a szerverre kerül. Az ügyfél megkapja a teljes HTML-dokumentumot, beleértve a navigációt, és semmit sem vesz észre a felvételről. A VIEW → DISPLAY PAGE SOURCE TEXT menüpontban nem láthatja a PHP kódot.

Eredmény

Most nagyon egyszerű új menüpontot beilleszteni a navigációs menübe: csak a navi.php fájlt kell szerkeszteni.

fejezet

• Az internet és a html
  • A világháló rövid története
  • Három szabvány határozza meg az internetet
  • BNF
  • HTML alaptanfolyam
  • Feltöltés és eszközök
• Css
  • A stíluslapok rövid bemutatása
  • CSS szintaxis
  • Fontos tulajdonságok
  • CSS-írások
  • CSS szelektorok
• CSS elrendezés
  • Keretrendszer
  • Reszponzív dizájn
  • CSS az elrendezéshez
  • Részletek az elrendezésről
  • Navigációs menü
  • CSS szelektorok részletesen
• URL-ek
  • Abszolút és relatív URL-ek
  • Webkiszolgáló konfigurálása
  • Pragmatikus tippek
• Formák
  • Formák
  • A forma mint kölcsönhatás
  • CSS és forma
  • adatokat küldeni
  • Forma és PHP
  • Forma és Javascript
• Javascript Dom
  • háttérrel
  • Kecses degradáció
  • Alapvető Javascript
  • DOM
  • 2D vászon
  • forma++
• Jquery
  • Nem feltűnő Javascript
  • Kecses degradáció
  • Speciális Javascript írás a jQuery-ben
  • A jQuery kiválasztása és kezelése
  • Interakció a jQuery-vel
• Parancs sor
  • Parancs sor
  • Hol vagyok
  • Hozzáférési jogok
  • Kép és videó
• Git
  • Verziókezelés
  • Egyszerű munkafolyamat a Gitben
  • A Git állapotának lekérdezése
  • Eszközök a Git számára
  • Nyilvános és magánkulcs
• Http
  • TCP/IP és DNS
  • HTTP
  • Eszközök
  • Példák
  • A PHP nem csak HTML-t generál
• Php előkészítés
  • Mi a php Mi történik a webszerveren?
  • Apache
  • Az első PHP program
• Php
  • Figyelmeztetés
  • PHP szintaxis
  • Fájlok és mappák a PHP-ben
  • PHP és e-mail
  • Webes űrlapok adatainak feldolgozása PHP-ben
  • Fájlfeltöltés
  • Fájl feltöltés - kezelőfelület
  • Hibák + hibakeresés
• Php db olvasás
  • Adatbázisok
  • PHP és adatbázis
  • Egy webalkalmazás felépítése
  • Olvasás az adatbázisból
  • Hatékony együttműködés a DB-vel
• ülés
  • Cookie-k
  • Munkamenet és bejelentkezés
• Php db levél
  • Írási hozzáféréssel rendelkező webalkalmazás
  • Egyértelmű
  • Helyezze be
  • Adatok szerkesztése
  • Hibakezelés
  • HTML engedélyezése
• Php db optimalizálás
  • Indexek
  • Korlátok
  • Változások az adatbázisban
  • Tranzakciók
  • Tranzakciók és PHP
• grafikus
  • HTML + CSS a grafikához
  • Pixel képek
  • SVG - vektorgrafikus
  • 2d vászon
  • 3d vászon
• Javascript
  • Változók és hatókör
  • Funkciók és ez
  • Tárgyak + osztályok
  • Funkciók és bezárások
  • Modulok
  • Stílus + tippek
  • Hibakeresés
• Alkalmazott Js és Css
  • Ellenőrizze az űrlap adatait
  • Javítva fejléc animációval
  • Lassan görgessen
  • térkép
  • Dinamikus forma
  • AJAX
  • AJAX rossz módon
  • CORS
  • Chat webaljzatok
• Json
  • JSON szintaxis
  • JSON és PHP
• Xml
  • Mi az XML
  • jól formált XML
  • DTD
  • XML és PHP
  • XML és Javascript
  • XPath
  • Példa RSS-re
• Biztonság
  • A1 - Injekció
  • A2 - hitelesítés
  • A3 - Érzékeny adatok
  • A4 - XXE
  • A5 - hozzáférés-vezérlés
  • A6 - téves konfiguráció
  • A7 - XSS
  • A8 - Deserializáció
  • A9 alkatrészek
  • A10 - ellenőrzés
  • Nem biztonságos közvetlen objektum-hivatkozás
  • CSRF
  • Átirányítások
• Wordpress
  • Mi a wordpress
  • A Wordpress rövid telepítése
  • Biztonság
  • Áttekintés háttér
  • Bejegyzések és oldalak
  • média
  • Használjon témákat, oldalsávokat és kütyüket
  • Használjon beépülő modulokat
  • Permalink
• Apache
  • Beállítás
  • Hitelesítés
  • Írja át
• Haladó Javascript
  • Hívás funkció
  • Események és bezárások
  • Prototípusok + öröklés
  • Reguláris kifejezések
• Mobil
  • Reszponzív dizájn
  • Progresszív webalkalmazás
  • Cordova
• Minőség
  • Megközelíthetőség
  • magánélet
  • teljesítmény
  • PIHENÉS

Kiadói cikkek alatt by-nc-sa a 2012-2019-es években, Brigitte Jellinek.

Ennek az oldalnak a továbbfejlesztése: fork projekt vagy kommentár az oldalon

---