Egy modern weboldal adaptív menüje nemEz csak luxus, nem szükséglet. A modern eszközök sokasága megköveteli a webmesterektől, hogy olyan elrendezést hozzanak létre, amely logikusan jelenik meg a különböző felbontású képernyőkön. És bizonyos esetekben a reszponzív menü létrehozása sokkal nehezebb, mint maga a tervezés, ezért meg kell fontolni ezt a kérdést.
Menü nagy képernyőhöz
Az adaptív általános elrendezési séma megértésemenüben, először létre kell hoznia egy menüstruktúrát HTML-ben, és CSS segítségével stílust kell alakítania. Ezután a kapott anyag alapján javíthatja az adaptív sablont. Tehát a HTML szerkezete így fog kinézni.
Kételemes menü HTML-ben |
 |
CSS-stílusokat kell hozzáadnia a kapott menühöz. Meg kell adni a betűméretet és -színt, a hátteret és a blokk elhelyezését.
Bevezetési folyamat
Egyszerű funkciók létrehozása a hétköznapok számáraA számítógép képernyője egyszerű dolog, és ez látható a példán. A webhely adaptív menüje csak akkor jön létre, ha van valami, amivel dolgozni kell, vagyis amikor már hozzáadták a navigációs elemeket. A mobileszközök és táblagépek legoptimálisabb menüopciója a hamburger ikon lesz - egy négyzet alakú mező, amelyben három függőleges vonal van húzva. Ha megnyomja, minden menüpont megnyílik. Ilyen navigáció létrehozásához címkéket kell hozzáadnia a HTML-dokumentumhoz.
HTML dokumentumcímkék |
 |
Ezután hozzá kell adnia ezeket a címkéketmegfelelő stílusokat, hogy vizuálisan tetszetős és olvasható menüt hozzon létre. A navigációs és menüikon látványterve mellett ennek megfelelően kell megtervezni a kép helyzetét is. Így a menü_icon span:nth-child(1) {top:0 px}; feltétel bevezetésre kerül. Vagyis a kép behúzása felülről nulla pixel lesz. Hasonlóképpen be kell állítania a többi oldal értékeit.
Most már majdnem kész a reszponzív menü.Érdemes figyelni a kijelzőre: nincs feltétel. Alapértelmezés szerint a menü ikon nem lesz látható az oldalon, ezért egy további osztályt kell hozzáadnia a CSS dokumentumhoz a következő feltétellel: .menu__icon {display: inline-block;}. Ez láthatóvá teszi a navigációt.
Ezenkívül hozzá kell adnia a lépcsőzetes táblázathozstílusfeladat, amely szükség szerint elrejti a bekezdéseket és albekezdéseket. Ehhez fix menüpozíciót kell beállítani a CSS-ben, meg kell tervezni a megjelenítést és az igazítást. Az elemek a túlcsordulás:auto; átlátszatlanság:0; z-index:1000. Hozzáadhatjuk a menu__links-item osztályt is, amely a menüelemek stílusát jelzi, de ez a fejlesztő kérésére történik.
Végső érintés
Így a reszponzív menü a CSS-ben majdnembefejezett. Ahhoz, hogy az ikonra kattintva megjelenjen, funkciókat kell hozzáadnia. Az egyszerűség kedvéért jobb a jQuery használata, de ha akarod, létrehozhatsz tiszta JavaScriptet is. Mindkét esetben ugyanazt a feltételt kell alkalmazni:
- (function($){$(function() $(.menu__icon").on("kattintás", function() $(this).closest(.menu").toggleClass("menu_state_open");}) ;});})(jQuery).
Ezzel az adaptív navigáció elrendezése véget ért. De ez csak egy a számos lehetőség közül az ilyen jellegű funkciók létrehozására, ezért érdemes megfontolni a többit is. Legalábbis néhány közülük.
A szabványok megváltoztatása nélkül
Az internetezők többsége elvárjalásd a navigációs sávot a webhely tetején. Ez már egyfajta standard lett, így az adaptív vízszintes menünek tisztességes megjelenésűnek kell lennie. Megtehető CSS használatával, mind a fenti példákban, mind pedig egy kezelő szkript csatlakoztatásával. A reszponzív menü létrehozása általában 3 lépésből áll:
- HTML címkék írása
- Stílusozd őket a Cascading Style Sheets (CSS) segítségével.
- Meglévő menü adaptálása.
Természetesen minden webhelynek saját menüsora van, de ha az erőforrás CMS-en jön létre, akkor sokkal könnyebb lesz új adaptív menüt létrehozni.
Bootstrap
Az adaptív funkciók létrehozása nemilyen komoly probléma, ha Bootstrap eszközöket használ. A vízszintes menü létrehozásához szükséges sablonok már itt vannak. Csak csatlakoznia kell a bootstrap.js fájlforráshoz. A keretrendszer segítségével a webmesternek lehetősége nyílik bármilyen bonyolultságú navigáció létrehozására. A Bootstrap segítségével reagáló menüt készítenek valamilyen kód segítségével.
Példa egy 3 elemet tartalmazó vízszintes reszponzív menüre |
 |
A módszer jellemzői
Ez a kód nehézkes lehet, de érthető. Érdemes megjegyezni, hogy itt a fő szerepet a címke játssza nav, amely a navigáció létrehozásáért és megjelenéséért felelős. Ide kapcsolódnak a konténerek is tartály-folyadék és tartály, amely beállítja a pontok szélességét. Segítségükkel a menüt kibővítheti a különböző felbontású képernyőkön, vagy fixen hagyhatja.
Az osztályok fontos szerepet játszanak az adaptív funkcionalitás kialakításában. összeomlás és navbar-összeomlásakik felelősek a stílusért. Maga a menü úgy jön létre, hogy felírja a vízszintesen elhelyezett elemek felsorolását.
Ha ezt a kódot használja a navigáció létrehozásáhozkereteket, akkor a széles képernyőkön úgy fog kinézni, mint egy vízszintes szalaghirdetés. Az elején ott lesz az erőforrás neve, majd az elemek szigorúan meghatározott sorrendben. A keskeny képernyőkön csak az oldal neve és a hamburger ikon jelenik meg, amelyre kattintva függőleges listában jelennek meg a menüpontok.
Legördülő menü
A Bootstrap erőforrás nagyszerű segítőtárs lesz egy reszponzív legördülő menü létrehozásához. Ehhez egyszerűen cserélje ki az előző példában szereplő <li> címkesort az alábbi kódra.
Legördülő elemek |
 |
Ez megtehető egy tételre illés többnek. A legördülő alelemekkel rendelkező pozíció közelében egy lefelé mutató nyíl jelenik meg. Ha rákattint, megjelenik a létrehozott lista. Ha a navigáció kis képernyőn jelenik meg, akkor a legördülő listával rendelkező elemet is egy nyíl jelzi, de jobbra mutató irányt. Ha rákattint, egy másik függőleges altételek listája jelenik meg.
Többszintű menü
Legördülő listákat azonban nem hozhat létre.csak a Bootstrap használatával. Ha ez a könyvtár nincs csatlakoztatva, létrehozhat egy érzékeny többszintű menüt HTML és CSS használatával, majd engedélyezheti a PHP funkciót.
Először létre kell hoznia egy HTML fájltegy rendezetlen lista, amely más listákat is tartalmaz. Ehhez a szabványos <ul> és <li> címkéket kell használni. Nem szabad megfeledkeznünk az osztályok kialakításáról sem, amelyeket később a CSS lépcsőzetes stíluslapja dolgoz fel. A világosabbá tétel érdekében érdemes egy kis példát hozni a listák írására és az osztályok létrehozására.
Navigációs sáv HTML-lista |
 |
A reszponzív legördülő menü animációja be van állítvalépcsőzetes stíluslap segítségével. Itt meg kell adnia a menü paramétereit, amikor a képernyő 50, 75 és 25%-kal csökken. Az adaptív funkcionalitás létrehozásának ez a megközelítése megfelelő elrendezést biztosít, amelyben a menü nem „mozdul ki”.
És végül be kell írnia az alább jelzett funkciót a dokumentumba.
függvény |
 |
Ha az oldal nem gondolja végig a használatátezen kívül minden funkcióhoz külön script dokumentumot kell készítenie. Ha sima HTML-be teszed, akkor egyszerűen megjelenik a böngészőablakban a szöveg részeként, és nem fog működni.
JQuery
Szintén nagyszerű megoldás lenne egy panel létrehozásanavigáció a JQuery plugin segítségével. Egy ilyen szolgáltatás adaptív menüje mindössze néhány percet vesz igénybe. Maga a plugin letölthető az internetről, egyszerű és áttekinthető felülettel rendelkezik, amely könnyen és egyszerűen használható. Tehát nem lehet probléma a stílusfájl csatlakoztatásával.
A stílusfájl csatlakoztatása után egy szkriptet kell írnia az adaptív navigáció létrehozásához.
Ezt követően létre kell hoznia a navigációt, ha még nem létezik. Itt minden a következő elv szerint működik: "Minden ötletes egyszerű." Egy HTML-dokumentumban egy felsorolásjeles listát kell létrehoznia egy címkében nav. Használhatja a korábban már megadott példát vagy annak egyszerűsített változatát, amely az alábbiak szerint néz ki.
Menüelemek HTML-ben |
 |
A munka ezen szakaszában csak a logó jelenik meg a böngészőben, maga a menü pedig el van rejtve. Ahhoz, hogy megjelenjen, hozzá kell adnia egy függvényt, amely változásokat okoz a bővítményben - okayNav.
függvény |
$(function(){ var navigation = $("#nav-main").okayNav(); }); |
Most megtekintheti a munka eredményét.A böngészőablak normál szélességével ez a menü teljesen normálisnak tűnik, de ha csökkenti a képernyőt, az utolsó elemek eltűnnek. Ehelyett három nagy pont jelenik meg, amelyek függőlegesen helyezkednek el. Ha megnyomják, úgy tűnik, hogy felborulnak, vízszintes helyzetbe kerülnek, és a rejtett menüelemek a képernyő jobb felső sarkában lévő függőleges listában megjelennek.
Ez a megoldás nagyon modernnek tűnik, az alkalmazott animációs effektus pedig kedvező megvilágításba helyezi az erőforrást a látogatók számára.
Joomla
És az utolsó lehetőség egy reszponzív menü létrehozásáhoza Joomla rendszer használatával. Ez egy ingyenes webhelykészítő szolgáltatás, amely egy CMS tartalomkezelő rendszer. És ahogy már a legelején említettük, ha az oldal CMS segítségével jött létre, és a meglévő menüt adaptívra kell módosítani, akkor a legjobb, ha az oldal funkcionalitásának létrehozását a legelső címkétől kezdjük. Az előző példákhoz hasonlóan itt is létre kell hoznia egy listajeles menülistát HTML-ben. Csak minden tételhez kell saját osztályt írni. Összességében minden az alábbiak szerint néz ki.
Menü a jooble számára |
 |
Ezután stílusokat kell hozzáadnia.A legjobb, ha az összes kitöltést 0 képpontra állítja, és alkalmazza a dobozméretet: border-box. Ez lehetővé teszi az elemek meghatározott szélességének megtartását, függetlenül attól, hogy hány behúzás van. Ezután állítsa be a szülőmenüelem (div) szélességét 90%-ra, majd kezdje el az egyes elemek stílusát külön-külön.
Eltávolíthatja a szegélyeket, megváltoztathatja a színt és kitöltheti,készítsen egy tervet, amely akkor jelenik meg, amikor a kurzort mozgatja. Egyszóval, tegyen meg mindent, ami megfelel az erőforrás tervezésének. A reszponzív Joomla menü létrehozásának utolsó lépése a konvertálása. A Joomla leggyakrabban olyan menüt hoz létre, amely a képernyő méretének megváltozásakor automatikusan újraépül, több sorra osztva. Ez mind CSS-ben történik, az egyetlen funkció, amelyet bele kell foglalni, az a böngészők közötti feltétel. Lehetővé teszi, hogy a menü ugyanúgy nézzen ki a különböző böngészőkben.
Böngészőkön átívelő funkcionalitás |
 |
Egy reszponzív menü létrehozása valóban nem egyszerű,Ehhez tudásra és tapasztalatra van szükség. Az összes leírt példa csak egy kis része a lehetséges variációknak, de még ezek is hasznosak lehetnek, ha valaki rendelkezik alapvető HTML- és CSS-ismeretekkel.
