Mi minden internetes oldal egyik fő eleme? Természetesen, navigációs menü. Az egyes menük a weboldal hasznos részei, hiszen ezen keresztül navigálhat a felhasználó az oldal más részeire. A látogató fő interakciója a webhellyel a navigációs menün keresztül történik. Napjainkban a weboldalak oldalain egyre vonzóbb és kényelmesebb navigációs menükkel lehet találkozni.
Ma bemutatjuk Önnek 62 vonzó navigációs menü CSS, javascript vagy Flash technológia alapján.
CSS navigációs menü
Olyan játékok, mint a kaszinó vagy a kígyók és a létrák, gyönyörű színes menüvel.
Itt egy nagyszerű lágy színösszeállítást látunk és érdekes hatás almenü megnyitásakor.
03.
Steven Wittens egy másik perspektívát kínál nekünk erre a menüre.
04.
Az UX Booth honlapján egy stílusos, de nagyon egyszerű menüt láthatunk.
05.
A MacRabbit webhely láthatóan MAC OS vagy Apple stílusú menüt használ.
06.
A Joyent weboldala egy egyszerű, üzletszerű menüt használ, amely felsorolja a cég munkáját.
07.
Ennek a portfóliónak a kifinomultsága és egyszerűsége mindenképpen tetszeni fog Önnek.
08.
A képek formájában megjelenő nagy menük minden bizonnyal felkeltik a figyelmét. Amint látja, nem túl hagyományos módja az étlap tervezésének.
09.
2 színt használó legördülő menü, amely az aktív és az inaktív menüpontot szimbolizálja.
10.
A Small Stone Records amerikai lemezkiadó rádió vagy Space Echo Roland SE-201 formájában menüt használt.
11.
Olyasmi, mint egy térkép, amivel az egész weboldalt "becserkészheti".
12.
Apple-stílusú kerek menü iPhone-alkalmazásokkal.
13.
A Clearleft valami olyasmit használt, mint a naptár ütemezett feladatokkal menüként.
14.
Úgy tűnik, hogy a kiválasztott menüpont lenyomott állapotban van.
15.
Egy menüpontra kattintva egy további almenü nyílik ki. A menü meglehetősen egyszerűnek tűnik, bár feketére van festve.
16. .
Ez a menü egyszerű és kellemes hideg lebegés hatást használ.
17.
A betűk mérete annyira aranyos és szokatlan, és ez az, ami felkelti a figyelmét.
18.
Nagyszerű megoldás a blokk navigáció használatához nagyszerű lebegtetési effektussal.
19.
A nagyszerű zöld szín és a leveles menü megjelenése felkelti a figyelmet. Nagyszerű hatása is van, amely segít meghatározni, hogy éppen melyik alszakaszban van.
20.
Ronny Pries weboldalának tervezői kihasználták a nagyszerű navigációs menü koncepcióját. A felhasználókat az emeleten lévő terv szerint irányítják.
21.
A navigációs menü megvalósításának másik kreatív módja egy gyümölcsfa képének használata, amelyen keresztül más alfejezetekhez is eljuthat.
22.
Tekintse meg Matt Dempsey kreatív ecsetvonásait.
23.
A navigációs menü kiváló megvalósítása.
24.
Függőleges lapok, amelyek úgy néznek ki, mint a közvetlenül a webhelyen működő mappák. Nagyon ritkán használt ez a módszer de működik és jól néz ki.
25.
Navigációs menü a punk rock zene stílusában. Nézze meg, hogyan valósította meg Jeff Sarmiento ezt az ötletet.
26.
Olyan, mint egy hierarchia. Egy másik kreatív módja a navigációs menü megvalósításának.
27.
Az ikonok fokozzák a menüvel való interakció érzését.
Flash technológiával fejlesztett navigációs menük
NÁL NÉL ezt a menüt a navigáció egy nagyon érdekes hatást valósított meg az egérkurzor mozgatásakor.
29.
Navigáció, amely lehetővé teszi bizonyos beállítások elvégzését speciális csúszkák segítségével.
30.
Érdekes és vonzó menü Tarot kártyák stílusában. Ha rákattint a kártyára, azonnal a tűzbe megy.
31.
Folyékony navigációs menü, amely a tavon mozgó hullámok érzését kelti.
32.
A Nick Jones webhely egy egyszerű, de dinamikus navigációs menüt használ a portfólió közötti navigáláshoz.
33.
A Marc Ecko weboldalán a navigáció képgaléria formájában jelenik meg. Lehetővé teszi a látogatók számára, hogy végigjárják a művészet és a filozófia lapjait.
34.
Az HBO egy filmdokumentum archívum. A navigációs menü használata interaktív válogatás filmeket.
35. ?
Érdekes navigációs menü egyszerű hover effektussal. Ha az egérmutatót egy ikon fölé viszi, megjelenik a menü tartalma.
36.
New York-i és Fort Lauderdale-i székhelyű navigációs menütervező iroda.
37.
Stílusos neo-ókori navigációs design freskókkal díszített háttérrel.
38.
A Nick Ad webhely rugalmas, de könnyen használható navigációs menüt használ. Kattintson bárhová az oldalon, és érdekes hatást fog látni.
39.
Egy kreatív ember saját munkájával vonzza a látogatókat a portfólióba.
40. .
A Seven Seven érdekes brosúra stílusú menüt tartalmaz almenükkel.
41.
Egy navigációs menü, amely bizonyos elemek kiválasztásakor megnyílik és bezáródik.
42.
A Beside weboldalon a navigációs menü szivárvány stílusban van megvalósítva.
43.
Karton portfólió koncepció. Nagyon érdekes lebegő hatás.
44.
Az egymásra halmozott kis kockák navigációs menüként működnek.
45.
Színekben gazdag térkép a nemzeti hawaii papucsok textúrájának felhangjával, amelyre minden ember büszke.
46.
Egy asztal a menüt szimbolizáló dolgokkal: telefon az adminisztrációval való kapcsolatfelvételhez, magazin a portfólióhoz, újság a hírek megtekintéséhez és így tovább.
Nagyon érdekes, amikor valódi dolgokat használnak navigációként.
47.
Remek kreatív módja a navigációs menü megvalósításának. Mindegyik elem szép a maga módján, mindegyik életet ad az egész weboldalnak. Nagyon ritkán használnak ilyen módszereket, de ez igazán varázslatos.
Javascript technológiával fejlesztett navigációs menük
Egyszerű és szemet gyönyörködtető navigációs menü különböző színekben.
49.
Úgy tűnik, hogy a menüt a Flask segítségével hajtották végre, de nem az. Egy ügyes, menő és stílusos navigációs menü egérmutató effektusokkal.
A webhelyen való könnyű navigáció érdekében az összes oldalon menüket használnak, hogy a felhasználó megértse, mi és hol van. Szinte mindig az oldal tetején (a fejlécben) vannak vízszintes menü a webhely szakaszai (kategóriái) szerint, a függőleges menü pedig az oldalsávban (az oszlopban) található, és a cikkek közötti navigálásra szolgál.
A cikkből megtudhatja, hogyan kell menüt készíteni egy html webhelyhez, mit kell írnia ahhoz, hogy vízszintes és függőleges menüt kapjon a css-ben, vagy egy legördülő listát tartalmazó menüt.
A menü elkészítéséhez (bármilyen) fogjuk használni pontozott lista, amelyhez közvetlenül csatoljuk a saját osztályunkat, és ehhez az osztályhoz írjuk a paramétereinket a szükséges értékekkel.
Például egy menü létrehozásához használunk egy listát a class="menu" karakterlánccal (bármilyen osztálynév, csak latin betűk), és a html kód így fog kinézni:
NÁL NÉL menüstílus Megadtam a kívánt tulajdonságokat a kívánt értékekkel:
Kötelező CSS-paraméterek és értékek
- margó: 0; - távolítsa el a lista összes behúzását, ellenkező esetben a böngésző lecseréli az alapértelmezett 20 képpontos értéket;
- list-style-type: nincs; - távolítsa el a jelölőket a menüpontok közül, különben a böngésző pontokat vagy számokat ad hozzá.
Így készül a menü html oldalak, és most térjünk át egy vízszintes menü létrehozására, és nézzünk meg mindent példákkal.
Hogyan készítsünk vízszintes menüt CSS-ben
A vízszintes menü megjelenítéséhez listával csak egy paramétert kell beírnunk a fenti kódkijelzésbe: inline; hogy a menüpontok egy sorba igazodjanak és vízszintesen kövessék egymást. Illetve a margó segítségével töltsön be a menüelemek közé.
És így fog kinézni:
Elkészült a vízszintes menü, hátra van, hogy szép megjelenést kölcsönözzünk neki.
A vízszintes menü minden elemének adjunk szegélyt, és tegyük ferde élekkel, töltsük ki bizonyos színt background-color (háttér hozzáadása a menüponthoz), és módosítsa a hivatkozás megjelenését.
A vízszintes menü már így fog megjelenni:
Mivel a vízszintes menü a legtöbb esetben az oldal fejlécébe van írva, a példában hátteret adtam a menühöz, amit a fejléc színének megfelelően módosítunk.
Az egyértelműség kedvéért a menüpontokat középre helyeztem a text-align: center; , amely törölhető (automatikusan balra igazítható), vagy beállítható szöveg igazítási érték:jobb; és a jobb oldalon megjelenik a vízszintes menü.
Egyébként te is használhatod, amit a saját szemeddel láthatsz és ingyen letölthetsz.
Hogyan készítsünk függőleges menüt CSS-sel
Függőleges menü a CSS-ben az oldalon nagyjából ugyanúgy történik és stílusos, mint a vízszintes, csak itt .menu-2 li-ben változik (... az értékkijelző paraméter: block; (blokk elemre mutat), ami ez a menüelemek függőleges megjelenítése.
És még egy adalék a függőleges menühöz: mivel a legtöbb esetben az oldal oldaloszlopában található, aminek fix szélessége van, ezért kénytelenek vagyunk a szélességi szélességet is beállítani: 100%; függőleges menünket úgy, hogy az átfogja az oszlop teljes szélességét.
Nézzük meg a CSS függőleges menüjét egy példával:
A függőleges menü így fog megjelenni az oldalon:
Légy óvatos!
Hogyan készítsünk legördülő menüt CSS-sel
Készítsen legördülő menüt a segítségével CSS használatával elég egyszerű. Csak néhány paramétert adunk hozzá a meglévő kódhoz a függőleges menüből, amely a menüpontok legördülő listájáért lesz felelős.
Feltétlenül emlékezzen!
Annak érdekében, hogy a legördülő menü szigorúan a vezető hivatkozással szemben jelenjen meg, a CSS-ben a következőt kell írnia: position: relatív ahhoz a li címkéhez, ahol ez a hivatkozás található; , és a legördülő menü pozíciójához: abszolút;
Írjunk html kódot a CSS legördülő menüjéhez.
Tekintse meg, hogyan fog kinézni a CSS legördülő menü az oldalon.
Ugyanígy egy legördülő menüt írnak vízszintes navigációs elrendezéssel. Az egyetlen dolog, hogy ne felejtse el megváltoztatni a felső és a bal paraméterek értékét (felső és bal behúzás).
Néz!
A CSS mindössze 3 módosításával a függőleges legördülő navigációs elrendezés vízszintes legördülő navigációvá változik.
Változások a CSS-ben a legördülő menüben
- Csere a .saitbar-ban - szélesség: 240 képpont; szélességen: 100%;
- Csere a .menu-4-ben li - kijelző: blokk; a kijelzőn:inline-block;
- Csere a .menu-4 ul.almenüben - felső: 0; felül: 34 képpont;
- Csere a .menu-4 ul.almenüben - balra: 214px; bal oldalon: 7px;
Vízszintes menü a webhely szakaszainak listája, ezért logikusabb az elemen belüli jelölés
- majd alkalmazza a CSS-stílusokat elemeire. A menü ilyen elrendezése a legelterjedtebb a weboldalon való elhelyezés nyilvánvaló előnyei miatt.
- Menü tétel
- Menü tétel
- Menü tétel ...
- .
A korábbi publikációkban tárgyaltak szerint a párosított elem
- felsorolásjeles listát hoz létre, és
- a lista egyik eleme. Az érthetőség kedvéért írjuk meg a kódot egyszerű menü:
Navigáció Webhely navigáció
- itthon
- A hét hírei
- A technológiai fejlődés
- Csevegés
A platform megjelenésével azonban a jelölőnyelv további címkékkel bővült. Éppen ezért a modern weboldalak menüje egy speciális felhasználásával készül címke< menü>. Használat közben ez az elem nem különbözik a felsorolásjeles listáktól.
Egység helyett < ul> előírt < menü>. A munka oldaláról nézve azonban jelentős különbségek mutatkoznak. Tehát a második példa felgyorsítja a keresőprogramok és a robotok munkáját a -ban. Az oldal szerkezetének elemzésekor azonnal megértik, hogy ez a kódrészlet felelős a webhelytérképért.
Vannak vízszintes, függőleges és legördülő menük. Néha a navigációs sáv képként van kialakítva. A technológiai szegmens bővülése óta a webszolgáltatások adaptívvá teszik, azaz. Az oldal szerkezete automatikusan alkalmazkodik az eszközök képernyőméretéhez. Vegye figyelembe a felsorolt menücsoportokat.
Hozzunk létre egy vízszintes navigációs modellt
Ez a fajta navigáció a legnépszerűbb. A panel vízszintes kialakítása esetén az összes menüelem az oldal fejlécében vagy a „láblécben” található (néha a navigációs elemek duplikálva vannak, fent és lent is megjelennek).
Példaként készítünk egy vízszintes panelt, melynek menüelemeit css-sel (lépcsőzetes stíluslapok) stílusozzuk, vagy inkább átalakítjuk. Tehát minden egyes elem egy ferde téglalapban lesz. Érdekelt?
Az átalakításhoz egy css tulajdonságot használunk átalakítani. Transzformáció megadásához használja a beépített függvényt ferdeX, amelyben a dőlésszög fokban van megadva.
Sajnos minden böngésző a maga módján működik ezzel a tulajdonsággal, az előírt szabványok ellenére. Ezért speciális előtagokat hoztak létre annak jelzésére, hogy vagy:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
És most a megszerzett tudást egy példa írására alkalmazzuk.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Vízszintes panel Vízszintes panel És most függőlegesen. Azt mondtam, függőleges!
A második programnál az előző kódot vesszük alapul. Azt szerettem volna, ha a függőleges menüelemeim nem ferde, hanem lekerekített sarkúak legyenek.
Ehhez egy másikat használtam css tulajdonság határ-sugár.
A korábbi cikkekben már dolgoztam ezzel a paraméterrel, így úgy gondolom, hogy nem lesz nehézség a működésének megértésében.
Függőleges panel Mint látható, a kód fő változása a nyilatkozat hiánya kijelző: inline-block, amely valójában a navigációs elemek vízszintes elrendezéséért volt felelős.
A menü alpontjai: legördülő lista
Áttekintettük a navigációs sávok főbb csoportjait, de van még több fajta, vagy jobban mondva kiegészítő.
Néha előfordulnak olyan helyzetek, amikor egyes pontok kiegészítik a főbbeket. Ebben az esetben nem nélkülözheti a legördülő listákat. CSS eszközökkel történő átalakításokkal jönnek létre.
Az alábbiakban csatoltam egy kis program kódját, amely megvalósítja ezt a megközelítést.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Legördülő lista Legördülő lista Vízszintes
Navigációs sáv
A könnyen használható navigáció elengedhetetlen minden webhelyhez.
A CSS segítségével az unalmas HTML-menüket gyönyörű navigációs sávokká alakíthatja.
Navigációs sáv = hivatkozások listája
A navigációs sáv alapjaként szabványos HTML-kódot igényel.
Példáinkban egy navigációs sávot fogunk felépíteni egy szabványos HTML-listából.
A navigációs sáv alapvetően egy hivatkozások listája, tehát elemek felhasználásával
- és természetesen
- :
Példa
- itthon
- hírek
- Kapcsolatok
- Rólunk
Most távolítsuk el a felsorolásjeleket, a margókat és a kitöltést:
Példa magyarázat:
- list-style-type: nincs; - Eltávolítja a markereket. A navigációs sávnak nincs szüksége felsorolásjelekre
- Margó beállítása: 0; és párnázás: 0; az alapértelmezett böngészőbeállítások eltávolításához
A fenti példában szereplő kód szabványos kód, amelyet függőleges és vízszintes navigációs sávokon is használnak.
Függőleges navigációs sáv
Függőleges navigációs sáv létrehozásához be kell állítania az elem stílusát a listában a fenti kódon kívül:
Példa magyarázat:
- display:block; - A hivatkozások blokkelemként való megjelenítése a kattintható hivatkozások területét képezi (nem csak szöveg), és lehetővé teszi a szélesség (és a kitöltés, a margók, a magasság stb.) megadását, amit csak akar.
- szélesség: 60 képpont - A blokkelemek alapértelmezés szerint teljes szélességet foglalnak el. A szélességet 60 képpontra szeretnénk állítani
A szélességet is beállíthatja
- és távolítsa el a szélességet , mert blokkelemként megjelenítve a rendelkezésre álló teljes szélességet elfoglalják. Ez ugyanazt az eredményt fogja eredményezni, mint az előző példa:
- vagy linkek a központban.
Tulajdonságszegély hozzáadása
- . Adjon hozzá szegélyeket a navigáció körül. Ha a panelen belül is szegélyeket szeretne beállítani, akkor minden elemhez szegélyt kell adni
- , kivéve az utolsót:
Javított függőleges navigáció
Hozzon létre egy teljes magasságú, "fix" oldalsáv-navigációt:
Példa
ul(
Kódszerkesztő »
list-style-type: nincs;
margó: 0;
párnázás: 0;
szélesség: 25%
háttérszín: #f1f1f1;
magasság: 100%; /* Teljes magasság */
pozíció: rögzített; /* Ragassza fel, még tekercsen is */
túlcsordulás: auto; /* Görgetés engedélyezése, ha a sidenav túl sok tartalommal rendelkezik */
}Jegyzet: Előfordulhat, hogy ez a példa nem működik megfelelően mobileszközökön.
Vízszintes navigációs sáv
Kétféleképpen hozhat létre vízszintes navigációs sávot. Használat beágyazott vagy úszó listaelemek.
Beépített listaelemek
A vízszintes navigációs sáv létrehozásának egyik módja az elemek megadása
- mint beépített, a fenti kód "standard" mellett:
Példa magyarázat:
- kijelző: inline; - Alapértelmezés szerint elemek
- blokk elemek. Itt eltávolítjuk a sortöréseket minden listaelem előtt és után, hogy ugyanabban a sorban jelenjenek meg.
Lebegő listaelemek
Egy másik módja a vízszintes navigáció, lebegő elemek létrehozásának
- meg kell adniuk a navigációs hivatkozások helyét:
Példa magyarázat:
- balra lebeg; - Használja az úszót, hogy a blokkelemeket egymás mellett lebegjen
- display:block; - A hivatkozások blokkelemként való megjelenítése a kattintható linkek teljes területét (nem csak szöveget) teszi ki, lehetővé teszi a kitöltés megadását (és ha akarja, magasság, szélesség, margók stb.)
- padding: 8px - Mivel a blokkelemek a teljes rendelkezésre álló szélességet elfoglalják, nem tudnak egymás mellett lebegni. Tehát mutasson meg néhány kiegészítést, hogy jól nézzen ki.
- háttérszín: #dddddd; - Hozzáad szürke háttér színek minden elemhez
Tanács: Háttérszín hozzáadása: #dddddd; ban ben
- , kivéve az utolsót:
Példa a függőleges navigációs sávra
Alapszintű függőleges navigációs sáv létrehozása szürke háttérszínnel, és a hivatkozások háttérszínének megváltoztatása, amikor rájuk viszi az egérmutatót:
Példa
ul(
list-style-type: nincs;
margó: 0;
párnázás: 0;
szélesség: 200 képpont
háttérszín: #f1f1f1;
}li a (
display:block;
szín: # 000;
padding: 8px 16px;
szöveg-dekoráció: nincs;
}/* A hivatkozás színének módosítása az egérmutatóval */
Kódszerkesztő »
li a: lebeg (
háttérszín: #555;
fehér szín;
}Központosítsa a hivatkozásokat és adjon hozzá szegélyeket
Szöveg-align:középre igazítás hozzáadása ehhez
- a lista egyik eleme. Az érthetőség kedvéért írjuk meg a kódot egyszerű menü:
Vízszintes menü készítése: jelölési és tervezési példák
HTML jelölés és alapvető stílusok a vízszintes menühöz
Alapértelmezés szerint az összes listaelem megtalálható függőlegesen, amely a tárolóelem teljes szélességére kiterjed, ami viszont átfogja a tárolóblokk teljes szélességét.
HTML jelölés a vízszintes navigációhoz
Ezenkívül a címke belsejében elhelyezett vízszintes menü is elhelyezhető az elemen belül és/vagy
Elhelyezésük többféleképpen lehetséges vízszintesen. Először vissza kell állítania a navigációs elemek alapértelmezett böngészőstílusait:
Ul (lista-stílus: nincs; /*eltávolítja a lista jelölőit*/ margó: 0; /*eltávolítja az 1em felső és alsó margóját*/ padding-left: 0; /*eltávolítja a 40 képpontos bal oldali kitöltést*/ ) a (szövegdekoráció: nincs; /*a linkszöveg aláhúzásának eltávolítása*/)
1. li módszer (megjelenítés: soron belüli;)
Tegye sorba a listaelemeket. Ennek eredményeként vízszintesen helyezkednek el, a jobb oldalon 0,4 em-nek megfelelő hézagot adnak közéjük (a betűmérethez viszonyítva). Az eltávolításhoz adjon hozzá egy negatív jobb margót a li li-hez (margin-right: -4px;) . Ezután alakítsa ki a hivatkozásokat tetszés szerint.
2. módszer. li (lebegtetés: balra;)
A lista elemeit lebegővé tesszük. Ennek eredményeként vízszintesen vannak elrendezve. Az ul konténerblokk magassága nulla lesz. A probléma megoldására hozzáadjuk (túlcsordulás: rejtett;) az ul -hoz, kibővítve azt, és így lehetővé teszi, hogy lebegő elemeket tartalmazzon. A hivatkozásokhoz adjon hozzá egy (megjelenítés: blokk;) és stílusát tetszés szerint.
3. li módszer (megjelenítés: inline-block;)
Listaelemek készítése inline-block. Vízszintesen vannak elrendezve, a jobb oldalon rés keletkezik, mint az első esetben. A hivatkozásokhoz adjon hozzá egy (megjelenítés: blokk;) és stílusát tetszés szerint.
4. módszer ul (megjelenítés: flex;)
Az ul lista rugalmas tárolóvá tétele a . Ennek eredményeként a lista elemei vízszintesen vannak elhelyezve. Adjon hozzá egy (megjelenítés: blokk;)-t a hivatkozásokhoz, és stílusa szerint alakítsa őket.
1. Reszponzív menü aláhúzással, ha egy hivatkozás fölé viszi az egérmutatót
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( listastílus: nincs; margó: 40px 0 5px; kitöltés: 25px 0 5px; szöveg igazítása: középre; háttér: fehér; ) .menu-main li (megjelenítés: inline-block;) .menu- main li:after ( tartalom: "|"; szín: #606060; kijelző: inline-block; vertical-align:top; ) .menu-main li:last-child:after (tartalom: nincs;) .menu-main a ( szövegdekoráció: nincs; font-család: "Ubuntu Condensed", sans-serif; betűköz: 2px; pozíció: relatív; kitöltés alsó: 20px; margó: 0 34px 0 30px; betűméret: 17px; text-transform: nagybetűs; kijelző: inline-block; átmenet: színes .2s; ) .menu-main a, .menu-main a:visited (szín: #9d999d;) .menu-main a.current, .menu- main a:hover(szín: #feb386;) .menu-main a:before, .menu-main a:after (tartalom: ""; pozíció: abszolút; magasság: 4px; felső: automatikus; jobb: 50%; alul : -5px; bal: 50%; háttér: #feb386; átmenet: .8s; ) .menu-main a:hover:before, .menu-main .current:before (balra: 0;) .menu-main a: hover:after, .menu-main .current:after (jobbra: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (megjelenítés: blokk;) .menu-main li:after (tartalom: nincs;) .menu- main a ( padding: 25px 0 20px; margó: 030 képpont; ) )2. Reszponzív menü esküvői weboldalhoz
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozíció: relatív; háttér: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( tartalom: ""; megjelenítés: blokk; magasság : 1px; szegély-felül: 3px tömör #575350; szegély-alsó: 1px tömör #575350; margó-alsó: 2px; ).felső-menü:utána (szegély-alsó: 3px tömör #575350; szegély-felül: 1px tömör #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main (lista-stílus: nincs; kitöltés: 0 30px; margó: 0; betűméret: 18px; szövegigazítás: középen; pozíció: relatív; ) .menu-main:before, .menu-main:after ( tartalom: "\25C8"; sor magassága: 1; pozíció: abszolút; felső: 50%; transzformáció: translateY(-50% ); ) .menu-main:before (balra: 15px;) .menu-main:after (jobbra: 15px;) .menu-main li ( kijelző: inline-block; padding: 5px 0; ) .menu-main a (szövegdekoráció: nincs; megjelenítés: soron belüli blokk; margó: 2px 5px; kitöltés: 6px 15px; betűcsalád: "PT Sans", sans-serif; betűméret: 16px; szín: #777777; keret-alsó : 1px tömör átlátszó n: .3s lineáris; ) .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. szélesség: 500 képpont) ( .menu-main li (megjelenítés: blokk;) )3. Reszponzív menü fésűkagylóval
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( listastílus: nincs; kitöltés: 0 30 képpont; margó: 0; betűméret: 18 képpont; szöveg igazítása: középre; pozíció: relatív; háttér: fehér; ) .menu-main:after ( tartalom: ""; pozíció: abszolút; szélesség: 100%; magasság: 20 képpont; bal: 0; alsó: -20 képpont; háttér: radiális gradiens (fehér 0%, fehér 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; háttérméret: 20px 20px; háttérismétlés: ismétlés-x; ) .menu-main li (megjelenítés: inline-block;) .menu-main a (szövegdekoráció: nincs; megjelenítés: soron belüli blokk; margó: 0 15 képpont; kitöltés: 10 képpont 30 képpont; betűcsalád: "PT Sans Caption", serif nélkül; szín: #777777; átmenet: .3s lineáris; pozíció: relatív; .menu -main a:before, .menu-main a:after (tartalom: ""; pozíció: abszolút; felső: calc(50% - 3px); szélesség: 6px; magasság: 6px; szegélysugár: 50%; háttér: #F58262; átlátszatlanság: 0; átmenet: .5s könnyű be-ki; ) .menu-main a:before (balra: 5px;) .menu-main a:after (jobbra: 5px;) .menu-main a. current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (átlátszatlanság: 1;) .menu-main a.current, .menu-main a:hover (szín: #F58262; ) @media(max-width:680px) ( .menu-main li (megjelenítés: blokk;) )4. Reszponzív szalagmenü
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margó: 0 60 képpont; pozíció: relatív; háttér: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,1,1), pxset 0 150px -150px rgba(255,255,255,.12), beillesztett -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index: 2; bal: .p; szélesség: 30; top-menu:before ( top: 0; border-bottom: 1px szaggatott rgba(255,255,255,.2); ) .top- menu:after ( alul: 0; border-top: 1px szaggatott rgba(255,255,255,.2); ) .menu-main ( lista-stílus: nincs; padding: 0; margó: 0; text-align: center; ) . menu-main:before, .menu-main:after ( tartalom: ""; pozíció: abszolút; szélesség: 50 képpont; magasság: 0; felső: 8 képpont; szegély-felül: 18 képpont tömör #5A394E; szegély-alsó: 18 képpont tömör # 5A394E; átalakítás: forgatás (360 fok); z-index: -1; ) .menu-main: előtt ( balra: -30 képpont; szegély-balra: 12 képpont tömör rgba(255, 255, 255, 0); ) .menu- main:after ( jobbra: -30px; szegély jobbra: 12px tömör 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", sans-serif; szín: fehér; átmenet: .3s lineáris; ) .menu-main a.current, .menu-main a:hover (háttér: 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 (tartalom: nincs;) .menu-main a (megjelenítés: blokk;) )5. Reszponzív menü logóval a közepén
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( pozíció: relatív; háttér: rgba(34,34,34,.2); ) .menu-main ( lista-stílus: nincs; margó: 0; padding: 0; ) .menu-main:after ( tartalom: ""; kijelző: táblázat; egyértelmű: mindkettő; ) .bal-elem (lebegő: balra;) .jobb-elem (lebegés: jobb;) .navbar-logo ( pozíció: abszolút; bal: 50%; top 50% ; betűköz: 2px; betűcsalád: "Arimo", sans-serif; betűsúly: félkövér; szín: fehér; átmenet: .3s lineáris; ) .menu-main a:hover (háttér: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo ( pozíció: abszolút; bal: 50% ;top: 10px; transzformáció: translateX(-50%); ) .menu-main li ( float: nincs; megjelenítés: inline-block; ) .menu-main a ( vonalmagasság: normál; kitöltés: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (megjelenítés: blokk;) )6. Reszponzív menü logóval a bal oldalon
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( háttér: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); kitöltés: 20px; ) .top-menu:after (tartalom: "" ;display: table; clear: mindkettő li (megjelenítés: inline-block;) .menu-main a ( szövegdekoráció: nincs; megjelenítés: blokk; pozíció: relatív; sormagasság: 61 képpont; bal oldali kitöltés: 20 képpont; betűméret: 18 képpont; betűköz : 2px; betűcsalád: "Arimo", sans-serif; betűsúly: félkövér; szín: #F73E24; átmenet: .3s lineáris; ) .menu-main a:before (tartalom: ""; szélesség: 9px; magasság: 9px; háttér: #F73E24; pozíció: abszolút; balra: 50%; transzformáció: forgatás (45 fok) lefordításX (6,5 képpont); átlátszatlanság: 0; átmenet: .3s lineáris; ) .menu-main a:hover:before (átlátszatlanság: 1;) @media (max-width: 660px) ( .menu-main ( float: nincs; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (megjelenítés: blokk;) )Szép napot mindenkinek, aki éppen olvassa ezt a kiadványt. Ma az egyik webhelyépítő eszközről szeretnék mesélni, amely nélkül egyetlen webes erőforrás sem tud nélkülözni. Ez a webhely menü, vagy ahogy mondani szokás, a webhelytérkép. A mai napig a menünek végtelen számú típusa és alfaja létezik.
Az online áruházak, blogok, oktatási szolgáltatások és egyéb források fejlesztői kísérleteznek, és egyre több új és szokatlan kártyát készítenek. A cikk elolvasása után megtudhatja, hogy az összes típusú navigációs sáv milyen fő csoportokra van osztva, mindegyiket kipróbálhatja, és megtanulhatja, hogyan kell menükódot írni egy html webhelyhez. És most térjünk is közvetlenül a lényegre!
Navigációs sáv létrehozási eszközök
A jelölőnyelvben többféle módon hozhat létre menüt. Fő koncepciójuk a rendezetlen lista használata. Így a nálunk megszokott html 4-ben a fejlesztők címkéket írnak az oldalra
- és