Navigációs sávok CSS használatával. CSS és HTML5: Reszponzív navigációs menü Hogyan készítsünk navigációt css-ben

• Otthon
• listánk egy linket fog tartalmazni:
• Kapcsolatok
• Hír

Rólunk

Következő feladatunk az alapértelmezett listastílusok visszaállítása. Magából a listából el kell távolítanunk a külső és belső párnázást, a listaelemekből pedig a felsorolásjeleket. Ezután állítsa be a kívánt szélességet:

elemet soron belülről blokkra. Ezenkívül a listaelemekhez bal és alsó keret is hozzáadásra került.

Változásaink legfontosabb része a soron belüli elemek blokkelemekké történő újradefiniálása. Most már a linkjeink elfoglalják a listaelemek összes rendelkezésre álló helyét, vagyis a hivatkozás követéséhez már nem kell pontosan a szöveg fölé vinnünk a kurzort.

#navbar a ( háttérszín: #949494; szín: #fff; kitöltés: 5px; szövegdekoráció: nincs; betűsúly: félkövér; bal szegély: 5 képpont, tömör #33ADFF; kijelző: blokk; ) #navbar li ( border-left: 10px solid #666 border-bottom: 1px solid #666 )

Az összes fent leírt kódot egy példába egyesítettük, most a próba gombra kattintva a példaoldalra léphet, és megtekintheti az eredményt:

• Otthon
• listánk egy linket fog tartalmazni:
• Kapcsolatok
• Hír

Próbáld ki »

Térjünk vissza a korábban tárgyalt függőleges menüpéldához, és adjuk hozzá a következő szabályt a stíluslaphoz:

#navbar a:hover ( háttérszín: #666; szegély balra: 5px tömör #3333FF; ) Próbáld ki »

Az előző példában a függőleges navigációs sávot néztük meg, amely leggyakrabban a fő tartalomterülettől balra vagy jobbra található webhelyeken található. A navigációs hivatkozásokat tartalmazó menük azonban gyakran vízszintesen, a weboldal tetején helyezkednek el.

Egy vízszintes menüt egy normál lista stílusával hozhatunk létre. Az elemek tulajdonságainak megjelenítése

A menüelemek vízszintes elhelyezéséhez először hozzon létre egy listajeles listát hivatkozásokkal:

• Otthon
• listánk egy linket fog tartalmazni:
• Kapcsolatok
• Hír

Írjunk néhány szabályt a listánkhoz, amelyek visszaállítják a listákhoz használt alapértelmezett stílust, és definiáljuk újra a listaelemeket blokkról sorba:

#navbar ( margó: 0; padding: 0; list-style-type: nincs; ) #navbar li ( kijelző: inline; ) Próbáld ki »

Most már csak meg kell határoznunk a vízszintes menü stílusát:

#navbar ( margó: 0; kitöltés: 0; lista-stílus: nincs; szegély: 2px tömör #0066FF; szegélysugár: 20px 5px; szélesség: 550px; szövegigazítás: középre; háttérszín: #33ADFF; ) #navbar a ( szín: #fff; kitöltés: 5px 10px; szövegdekoráció: nincs; betűsúly: félkövér; kijelző: inline-block; szélesség: 100px; ) #navbar a:hover (szegélysugár: 20px 5px háttérszín: #0066FF ) Próbáld ki »

A létrehozandó menüben a fő navigációs hivatkozások a vízszintes navigációs sávban helyezkednek el, és olyan alelemek lesznek, amelyek csak akkor jelennek meg, ha az egérmutatót arra a menüpontra viszi, amelyre ezek az alpontok vonatkoznak.

Először létre kell hoznunk a menü HTML-struktúráját. A fő navigációs hivatkozásokat felsorolásjeles listában helyezzük el:

• Otthon
• listánk egy linket fog tartalmazni:
• Kapcsolatok
• Hír

Az alelemeket külön listában helyezzük el, beágyazva az elembe

• Otthon
• listánk egy linket fog tartalmazni:
• Kapcsolatok
  • Cím
  • Telefon
  • Email
• Hír

Most kezdjük el írni a CSS kódot. Először is el kell rejtenie a listát az alelemekkel a display: none deklaráció segítségével, hogy azok ne jelenjenek meg folyamatosan a weboldalon. Az alelemek megjelenítéséhez szükségünk van erre, amikor az egérmutatót egy elem fölé viszi

#navbar ul (megjelenítés: nincs; ) #navbar li:hover ul (megjelenítés: blokk; )

Mindkét listáról eltávolítjuk az alapértelmezett behúzásokat és jelölőket. A navigációs hivatkozásokkal ellátott listaelemeket lebegővé tesszük, vízszintes menüt képezve, de az alelemeket tartalmazó listaelemeknél lebegőt állítunk be: none; hogy egymás alatt jelenjenek meg.

#navbar, #navbar ul ( margó: 0; kitöltés: 0; listastílus-típus: nincs; ) #navbar li ( lebegés: balra; ) #navbar ul li ( lebegés: nincs; )

Ezután meg kell győződnünk arról, hogy a legördülő almenünk nem nyomja le a navigációs sáv alatti tartalmat. Ehhez beállítjuk a listaelemek pozícióját: relatív; , valamint az altételeket tartalmazó lista pozíció: abszolút; és adjunk hozzá egy felső tulajdonságot 100%-os értékkel, így az abszolút pozicionált almenü pontosan a link alatt jelenik meg.

#navbar ul ( kijelző: nincs; pozíció: abszolút; felső: 100%; ) #navbar li ( lebegés: balra; pozíció: relatív; ) #navbar ( magasság: 30 képpont; ) Próbáld ki »

A szülőlista magassága szándékosan lett hozzáadva, mivel a böngészők nem tekintik a lebegő tartalmat elemtartalomnak, magasság hozzáadása nélkül a listánkat figyelmen kívül hagyja a böngésző, és a listát követő tartalom körbeveszi a menüt.

Most már csak mindkét listánk stílusát kell alakítanunk, és elkészül a legördülő menü:

#navbar ul ( kijelző: nincs; háttérszín: #f90; pozíció: abszolút; felső: 100%; ) #navbar li:hover ul ( kijelző: blokk; ) #navbar, #navbar ul ( margó: 0; kitöltés: 0; lista-stílus: nincs ) #navbar (magasság: 30px; háttérszín: #666; padding-left: 25px; min-width: 470px; ) #navbar li (lebegés: bal; pozíció: relatív; magasság: 100%; ) #navbar li a (kijelző: blokk; kitöltés: 6px; szélesség: 100px; szín: #fff; szövegdekoráció: nincs; szöveg igazítása: középre; ) #navbar ul li ( lebegés: nincs; ) #navbar li:hover ( háttérszín: #f90; ) #navbar ul li:hover ( háttérszín: #666; )

Meghívjuk Önt, hogy ismerkedjen meg a reszponzív (adaptív) menük Javascript használata nélküli létrehozásának új technikájával. Tiszta és szemantikus HTML5 jelölést használ. A menü igazítható balra, középre vagy jobbra. Ez a menü a lebegtetést kapcsolja be, ami kényelmesebb a felhasználók számára. Ezen kívül van egy jelzője is, amely a „futás/szálfűzés” menüpontot mutatja. Minden mobil és asztali böngészőn működik, beleértve az Internet Explorert is!

Cél

Ennek az oktatóanyagnak az a célja, hogy bemutassa, hogyan alakíthat át egy normál menüt legördülő menüvé egy kis kijelzőn.

Ez a trükk hasznosabb lesz a sok linket tartalmazó navigációhoz, mint az alábbi képernyőképen. Az összes gombot egy elegáns legördülő menübe tömörítheti.

Nav HTML jelölés

Itt található a navigáció jelölése. A címke szükséges egy abszolút pozíciós CSS-tulajdonsággal rendelkező legördülő menü létrehozásához. Ezt egy későbbi leckében elmagyarázzuk. A .current osztály az aktív/aktuális menü hivatkozásokra mutat.

• Portfólió
• Ábra
• Web Design
• Nyomtatási média
• Grafikai tervezés

A navigációhoz szükséges CSS (asztali nézet) meglehetősen alap, ezért itt nem megyünk túlságosan a részletekbe. Ne feledje, hogy az elem NAV-jában a display:inline-block értéket a float:left helyett adtuk meg

elem.

/* nav */ .nav ( pozíció: relatív; margó: 20px 0; ) .nav ul ( margó: 0; kitöltés: 0; ) .nav li ( margó: 0 5px 10px 0; kitöltés: 0; lista-stílus: nincs; kijelző: inline-block; .nav a ( padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( color: #000; ) . nav .current a ( háttér: #999; szín: #fff; szegélysugár: 5px; )

Középre és jobbra igazítás

Ahogy fentebb említettük, a gombok igazítását a „text-align” (szöveg igazítása) segítségével módosíthatja.

/* right nav */ .nav.right ul ( text-align: right; ) /* center nav */ .nav.center ul ( text-align: center; )

Internet Explorer támogatás

Az Internet Explorer 8 és régebbi verziói nem támogatják a HTML5-címkéket és a médialekérdezéseket. Tartalmazza a CSS3-mediaqueries.js (vagy answer.js) és a html5shim.js fájlokat a tartalék támogatás biztosításához. Ha nem szeretné hozzáadni a html5shim.js fájlt, cserélje ki a címkét egy címkére.

Itt kezdődik a móka – a menük reagálóvá tétele a médialekérdezések segítségével! 600px-nél a nav elemet relatív helyzetbe állítottuk, hogy el tudjuk helyezni

menü lista tetején abszolút pozícióval. Minden elemet elrejtettünk
• a display:none megadása, de a .current kihagyása
• blokkként jelenik meg. Aztán a NAV lebegőn mindent beállítunk
• to display:block (ez a legördülő lista eredményét adja meg). Grafikus ikont adtunk a check.current elemhez, amely jelzi, hogy az elem aktív. A menü középpontjának jobbra igazításához használja a bal és jobb oldali pozicionálási tulajdonságot
  lista.

  @média képernyő és (max. szélesség: 600 képpont) ( .nav ( pozíció: relatív; minimális magasság: 40 képpont; ) .nav ul ( szélesség: 180 képpont; kitöltés: 5 képpont 0; pozíció: abszolút; felül: 0; bal: 0 keret: tömör 1px #aaa: #fff url(images/icon-menu.png) no-repeat 10px border-radius: 0 1px 2px rgba(0,0,0,.); 3); .navli (megjelenítés: nincs; /* az összes elrejtése

  • tételek */ margó: 0; ) .nav .current ( kijelző: blokk; /* csak az áramot mutatja
  • item */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( háttér: nincs; szín: #666; ) /* a nav hover */ . nav ul:hover ( background-image: none; ) .nav ul:hover li ( kijelző: blokk; margó: 0 0 5px; ) .nav ul:hover .current ( háttér: url(images/icon-check.png) no-repeat 10px 7px ) /* jobb nav */ .nav.right ul ( bal: auto; jobb: 0; ) /* center nav */ .nav.center ul ( bal: 50%; margin-left: - 90 képpont;

    Magas konverziók!

    Lehetővé teszi egy menüelem CSS-osztályainak módosítását.

    Az add_filter("nav_menu_css_class", "filter_function_name_8591", 10, 4); function filter_function_name_8591($classes, $item, $args, $depth)( // filter... return $classes; ) $classes (sor)

    CSS-osztályok, amelyek egy elemre vonatkoznak

  • menüpontot. Példa:

    Array( => menüelem => menüelem-típus-post_típus => menüelem-objektum-oldal => menüelem-265) $elem (WP_Post)

    Az aktuális menüpont objektum. Példa:

    WP_Post Object ( => 265 => 1 => 2018-04-07 09:45:46 => 2018-04-07 06:45:46 => => Visszajelzés => => közzététel => lezárva => lezárva = > => 265 => => => 2018-04-19 00:20:29 => 2018-04-18 21:20:29 => => 0 => http://wp-test.ru/ ? p=265 => 1 => nav_menu_item => => 0 => raw => 265 => 0 => 214 => oldal => post_type => Oldal => http://wp-test.ru/post- 99 => Visszajelzés => => => => Tömb ( => => menüelem => menüelem-típus-post_típus => menüelem-objektum-oldal) => => => =>) $args (stdClass)

    Egy objektum a wp_nav_menu() függvény argumentumaival. Példa:

    StdClass Object ( => WP_Term Object ( => 21 => Az első menüm => moe-pervoe-menu => 0 => 21 => nav_menu => => 0 => 3 => raw) => div => = > => elsődleges menü => => 1 => wp_page_menu => => => => => => megőrzés => 0 => => elsődleges) $mélység (szám) Menüpont szintje. Hozzáadva a 4.1.0 verzióhoz. Behúzásra használják. A felső menüelemek $mélysége = 0, a beágyazottaké $mélység = 1 és így tovább.

    Példák #1 Adjon hozzá egy CSS-osztályt csak egy adott menüponthoz

    Tegyük fel, hogy fel kell adnunk egy további CSS osztályt a „Visszajelzés” menüponthoz (id=265), és csak akkor, ha ez az elem megjelenik az elsődleges menüterülethez tartozó menüben, akkor:

    Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); függvény change_menu_item_css_classes($classes, $item, $args, $depth) ( if($item->ID === 265 && $args->theme_location === "elsődleges")( $classes = "speciális css-osztály "; ) $classes visszaküldése;)

    Belépünk az elrendezésbe:

    • Visszacsatolás
    • Minden cikk
    • Webhelytérkép
    #1 Távolítsa el a CSS osztályokat az összes menüpontból

    Távolítsuk el az összes CSS-osztályt az összes webhely menüeleméből.

    Add_filter("nav_menu_css_class", "__return_empty_array");

    Megkapjuk az elrendezést:

    • Visszacsatolás
    • Minden cikk
    • Webhelytérkép

    Az első példához hasonlóan feltételeket is használhat. Távolítsuk el a CSS osztályokat az összes menüpontból, és adjuk hozzá saját CSS osztályunkat a menüelemekhez az elsődleges menüterületről:

    Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); függvény change_menu_item_css_classes($classes, $item, $args, $depth) ( if ($args->theme_location === "elsődleges") ( $classes = [ "my-css" ]; ) else ( $classes = ; ) return $classes;

    Megkapjuk az elrendezést:

    • Visszacsatolás
    • Minden cikk
    • Webhelytérkép
    Megjegyzések
    • A 4.1.0-s verziótól kezdve a $depth paraméter hozzáadásra került.
    Változások listája

    3.0.0 verziótól	Bevezetve.
    4.1.0 verziótól	A $depth paraméter hozzáadva.

    Ismét rátérek arra a témára, hogy navigációt hozzon létre egy kizárólag a -t használó webhelyhez. Szinte az összes modern böngésző támogatja az alapvető funkciókat, ez lehetővé teszi a navigációs sávok effektusainak és megjelenésének rugalmasabb testreszabását JavaScript vagy további képfájlok csatlakoztatása nélkül, csak parancsok használatával.
    Ma egy legördülő alelemekkel rendelkező navigációs menü felépítését és végrehajtásának technikáját tekintjük át. A panel megjelenését a segítségével díszítjük, lekerekítjük a sarkokat, és egy kis árnyékot adunk a betűtípushoz.

    Szokás szerint, mint mindig, kezdésként a bemutató oldalon láthat egy példát egy kész legördülő menü működésére, a végrehajtó kód további elemzéséhez pedig töltse le a forráskódot.

    HTML jelölés

    A teljes menüstruktúrát rendezetlen lista formájában alakítottam ki, egy div blokkba helyezve egy adott „menu-nav” osztályú, a -hoz való kötéshez.

    < div class = "menu-nav" > < ul> < li class = "first" >< a href= "#" >Otthon< li>< a href= "#" >Leckék< ul> < li>< a href= "#" >HTML/CSS< li>< a href= "#" >Photoshop< li>< a href= "#" >Dreamweaver< li>< a href= "#" >Vaku< li>< a href= "#" >Videó< ul> < li>< a href= "#" >Youtube< li>< a href= "#" >Vimeo< li>< a href= "#" >Rutube< li>< a href= "#" >Programok< ul> < li>< a href= "#" >Rendszer< li>< a href= "#" >Biztonság< li>< a href= "#" >Multimédia< li>< a href= "#" >Internet< li>< a href= "#" >Online< ul> < li>< a href= "#" >Szolgáltatások< li>< a href= "#" >Wordpress< ul> < li>< a href= "#" >Beépülő modulok< li>< a href= "#" >WP témák< li>< a href= "#" >A Webhelyről< li>< a href= "#" >Kapcsolatok

    • Otthon
    • Leckék
      • HTML/CSS
      • Photoshop
      • Dreamweaver
      • Vaku
    • Videó
      • Youtube
      • Vimeo
      • Rutube
    • Programok
      • Rendszer
      • Biztonság
      • Multimédia
      • Internet
    • Online
      • Szolgáltatások
    • Wordpress
      • Beépülő modulok
      • WP témák
    • A Webhelyről
    • Kapcsolatok

    Amint a kódpéldából látható, a legördülő panelek létrehozásához egy újabb kis egyszerű kódrészletet adtam néhány menüelemhez, hogy rendezetlen listát hozzunk létre:
    

    Mostantól bármely főmenüponthoz hozzáadhat legördülő listákat. Ha megnézi az alábbi kódot, láthatja, hogyan került az alpontok legördülő listája a menüpontba (4):
    

    < ul> < li>1. pont< li>2. pont< li>3. pont< li>4. pont< ul> < li>1. alpont< li>2. albekezdés< li>3. alpont< li>4. alpont

    • 1. pont
    • 2. pont
    • 3. pont
    • 4. pont
      • 1. alpont
      • 2. albekezdés
      • 3. alpont
      • 4. alpont

    CSS-stílus nélkül ez az egész terv úgy fog kinézni, mint egy lista. Nézzük meg, hogyan tervezzük meg a legördülő menünket CSS segítségével.
    

    CSS

    CSS-t használunk a menü megjelenésének és funkcionalitásának stílusához. Először hozzon létre egy CSS-fájlt, nevezze el, és mentse el a következő formátumban: style.css.

    Megjegyzés: Ügyeljen arra, hogy a következő kódot helyezze el a HTML-dokumentum fejében, a ..... címkék közé a CSS-fájl meghívásához:

    < link rel= "stylesheet" type= "text/css" href= "style.css" />

    Most, hogy rendelkezik egy style.css fájllal, elkezdhetjük stílusok hozzáadását, valamint a lehetőségekkel és funkciókkal való kísérletezést. A nagyobb áttekinthetőség érdekében megjegyzéseket fűztem néhány CSS-kód paraméterhez:
    

    /*Alap*/ * ( margó: 0 ; kitöltés: 0 ; ) body( font-család: Helvetica, Arial, sans-serif; betűméret: 14px; háttér: #474747 url(bg.png); ) #container (szélesség: 960 képpont; /*tároló szélessége*/ margó: 10 képpont automatikus; ) /*Menü*/ . menu- nav ( pozíció: relatív; szélesség: 100%; /*Menüsor szélessége*/ magasság: 50px; betűméret: 14px; szín: #999; margó: 0 auto; margó felső: 20px; /*Szín és menüsor háttér gradiens*/ háttér: - moz- linear- gradient(top, #647db5, #395593): - webkit- gradient(linear, left top, left bottom, from(#647db5), to(#395593)); border: 1px solid #444 /*A menüsor lekerekített sarkai*/ border- sugar: 8px - khtml- border- sugar: 8px; menu- nav ul ( lista-stílus: nincs; szín: #FFF; ) . menu- nav ul li ( lebegés: balra; pozíció: relatív; ) . menü- nav ul li a (szegély-jobb: 1px szilárd #364f87; keret- bal: 1px szilárd #7189c0; kitöltés: 17px; kijelző: blokk; szöveg- díszítés: nincs; szöveg- igazítás: középre; szín: #FFF; háttér: #395593 háttér: - moz- linear- gradient(top, #647db5, #395593): - webkit- gradient(linear, left top, left bottom, from(#647db5), to(#395593)) ; háttér- kép: - o- lineáris- gradiens(top, rgb(100, 125, 181) , rgb(57, 85, 147) ) ) ; menü- navli. először a ( border- sugar: 8px 0 0 8px; - moz- border- radius: 8px 0 0 8px; - khtml- border- radius: 8px 0 0 8px; - webkit- border- radius: 8px 0 0 8px; ) / *Háttérszín és színátmenet az egérmutatón*/ . menü- nav ul li a: hover ( háttér: #647db5; háttér: - moz- linear- gradient(top, #395593, #647db5); háttér: - webkit- gradient(lineáris, bal felső, bal alsó, from(# 395593), to(#647db5)); menu- nav ul li ul ( kijelző: nincs; ) . menü- nav ul li: hover ul ( kijelző: blokk; pozíció: abszolút; min- szélesség: 200 képpont; bal: 0; margó- felső: - 1 képpont; ) . menü - nav ul li: hover ul li a ( kijelző: blokk; szín: #ffffff; szélesség: 110 képpont; szöveg - igazítás: középre; szegély - alsó: 1 képpont tömör #283f74; szegély - felső: 1 képpont tömör #366ea6; háttér: #364f87 ) . menü- nav ul li ul li: első- gyermek a ( border- top: none; ) . menü- nav ul li ul li: utolsó- gyermek a (szegély- alsó- bal- sugár: 5 képpont; szegély- alsó- jobb- sugár: 5 képpont; - moz- határ- sugár- bal alsó: 5 képpont; - moz- határ- sugár - jobb alsó: 5px - webkit - szegély - jobb alsó - sugár: 5 képpont - webkit - alsó - bal sugár: 5 képpont; menü- nav ul li: hover ul li a: hover ( háttér: #395593; szín: #ffffff; )

    /*Alap*/ * (margó: 0; kitöltés: 0;) body( font-family:Helvetica,Arial, sans-serif; font-size:14px; background: #474747 url(bg.png); ) #container ( szélesség: 960 képpont; /*tároló szélessége*/ margó: 10 képpont automatikus; ) /*Menü*/ .menu-nav ( pozíció: relatív; szélesség: 100%; /*Menüsáv szélessége*/ magasság: 50 képpont; betűméret :14px: #999 margó: 20px; from(#647db5), to(#395593)); 0 -1px 0 #444 /*Kerekített menüsáv: 8px; -webkit-border-radius; menu-nav ul ( list-style:none; color: #FFF; ) .menu-nav li ( float:left ; position:relative; .menu-nav ul li a ( border-right: 1px solid #364f87;

    Ez minden. Miután elhelyezte a fenti kódot a stíluslapon, a legördülő menü teljesen stílusos lesz, és készen áll a használatra. A tiszta CSS3 használatakor ne feledje, hogy nem minden böngésző támogatja egyformán jól az új szabványokat. Például az IE régebbi verzióiban ez a menü kissé másképp fog kinézni, bár ennek a „haladás fékezésének” megvannak a maga mankói))).

    Üdvözlettel, Andrey