A webhely menüjének meglehetősen gyakori elrendezése, amikor a vele lévő tároló az oldalon elérhető teljes szélességet elfoglalja. Ebben az esetben az első elem a bal széllel szomszédos, az utolsó pedig a jobb oldalon, és az összes elem közötti távolság egyenlő. Ma elmondjuk, hogyan történik ez.
Példát kínálunk egy gumimenü megvalósítására CSS használatával az erőforrásként. Ebben a menüben az elemek egy sorban helyezkednek el. Javascript nem lesz használva. A menü tartalma egy normál listába kerül. Az ilyen menü fő jellemzője a sokoldalúság, amely abban nyilvánul meg, hogy az elemek száma és hossza tetszőleges lehet.
Hogyan lehet ezt megvalósítani?Minden programozó felkínálja a saját módját egy adott probléma megoldásának. Minden a képzeletétől, professzionalizmusától és képességeitől függ. A probléma leggyakoribb megoldása egy táblázat használata. Emellett sokan javasolnák a javascript használatát. Sietek csalódást okozni azoknak, akik a display tulajdonság használatát javasolnák az értéktáblázattal vagy táblázatcellával. Ez a módszer nem eléggé kompatibilis több böngészővel.
A mi megoldásunkKínálatunk a HTML5 és CSS3 ismeretek szilárd alapjaira épül.
A folyamat lényege a text-align tulajdonságon alapul az justify értékkel. Azok számára, akik elfelejtették, emlékeztetem: ez a tulajdonság a szöveg igazítását a tároló teljes szélességében orientálja.
Megoldásunk használata során két kötelező szabályt kell betartani. Az első az, hogy a menüelem tárolójának szélessége kisebb legyen, mint a szöveg. Vagyis nem egy sorban. A második fontos szabály az, hogy a szavak egyformán nyújtódnak, függetlenül attól, hogy ugyanahhoz a ponthoz tartoznak-e vagy sem.
Az alábbiakban látható a kód, amely példaként szolgál egy gumimenü létrehozására:
HTML
< ul> < li>< a href= "#" >Otthon< li>< a href= "#" >Blog< li>< a href= "#" >Hír< li>< a href= "#" >Népszerű< li>< a href= "#" >Új elemek
ul ( text- align: justify; túlcsordulás: rejtett; /* kiküszöböli a metódus mellékhatásait */ magasság: 20px; /* szintén kiküszöböli a felesleges */ kurzor: alapértelmezett ; /* beállítja a kurzor kezdeti alakját */ margó : 50px 100px 0 100px background: #eee padding: 5px ) li (kijelző: soron belüli; /* szövegessé teszi a menüelemeket */ ) li a (megjelenítés: soron belüli blokk; /* kiküszöböli a szótöréseket a menüben; szín: #444; ) a : hover ( szín: #ff0000; ) ul: after ( /* a második sort képezi a módszer kidolgozásához */ tartalom: "1" ; margó balra: 100 %; magasság: 1px; túlcsordulás: rejtett kijelző: inline- blokk;
Ha a jó öreg Internet Explorerben szeretne dolgozni, a következő kódot is hozzá kell adnia a CSS-hez
ul ( z- index: kifejezés(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margó balra: 100%; ) * html ul ( /* csak ie6 kell */ magasság: 30 képpont; )
A szükséges tulajdonságértékek és kód megadása után ezt a gumimenüt kapjuk:
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
A vízszintes menü a webhely szakaszainak listája, ezért logikusabb az elemen belül megjelölni
- , majd alkalmazza a CSS-stílusokat elemeire. Ez a menüelrendezés a legelterjedtebb a weboldalon való elhelyezés nyilvánvaló előnyei miatt. Hogyan készítsünk vízszintes menüt: elrendezési és tervezési példák
HTML jelölés és alapvető stílusok a vízszintes menühöz
- Menüpont
- Menüpont
- Menüpont ...
- blokkburkoló a menühöz
- maga a menü felsorolásjeles listán keresztül (ul tag)
- Nos, a menüpontok bent vannak, és ennek megfelelően már vannak linkjeik
- vertical-align: bottom - ez a tulajdonság azért szükséges, hogy ha egy menüpont szövege 2 soros, akkor egyenletesen jelenjen meg. Amikor elkészítjük a menüt, eltávolíthatja ezt a tulajdonságot, nagyíthatja, hogy az elemek tömörítve legyenek, és a szöveg két sorba kerüljön, és megjelenik egy megjelenítési probléma. Adja vissza az ingatlant, és minden rendben lesz.
- display: table-cell - mivel magát a megjelenítési menüt táblasornak állítottuk be, logikus lenne beállítani, hogy az elemei cellákként jelenjenek meg egy táblázatban. Ez kötelező.
- szélesség: automatikus – a szélesség automatikusan kiszámításra kerül, a bekezdésben lévő szöveg hosszától függően
- text-align: center - ez csak a szöveg középpontba helyezésére szolgál
- magasság: 50 képpont – állítsa a magasságot 50 képpontra
- nos, a border-right csak egy szegély a jobb oldalon, az elemek elválasztója
- a text-decoration tulajdonság felülírja a hivatkozások alapértelmezett aláhúzását
- szélesség: 1000 képpont talán a legfontosabb vonal. Körülbelül ekkora szélességűre kell beállítani a hivatkozásokat, esetleg kisebbre, de mindenképpen nagyobbra, mint a lehető legszélesebb menüpont. A hivatkozások nem lesznek 1000 pixel szélesek, mivel a szélességet a li menüpont korlátozza, melynek szélessége auto-ra van állítva, de ez lehetővé teszi, hogy a menü tetszőleges számú eleménél mindig 100 legyen. a szélesség százaléka.
- függőleges igazítás: középső és megjelenítő: táblázat-cella - az első a szöveget függőlegesen középre igazítja, a második pedig a hivatkozásokat is cellaként jeleníti meg. Mindkét ingatlanra szükség van.
- font - nos, ez csak egy beállításkészlet a betűtípushoz. Ebben a cikkben olvashat a betűtípusok css tulajdonságairól.
- Otthon
- Rólunk
- Szolgáltatásaink
- Szolgáltatásunk 1. sz
- Szolgáltatásunk 2. sz
- Szolgáltatásunk 3. sz
- Szolgáltatásunk 4. sz
- Szolgáltatás 5
- Hír
- Kapcsolatok
- a menü dinamikusan rajzolódik ki;
- az elválasztótól a bekezdésig tartó behúzások mindenhol azonosak;
- szebb és rugalmasabb design.
- oldalra mutatáskor vip paddal
- a harmadik szint felugró legördülő menüjével
- Otthon
- Rólunk
- Szolgáltatásaink
- Szolgáltatásunk 1. sz
- Kiegészítés a szolgáltatáshoz 1
- Kiegészítés a szolgáltatáshoz 2
- Szolgáltatásunk 2. sz
- Kiegészítés a szolgáltatáshoz 3
- Kiegészítés a szolgáltatáshoz 4
- Szolgáltatásunk 3. sz
- Szolgáltatásunk 4. sz
- Szolgáltatás 5
- Szolgáltatásunk 1. sz
- Hír
- Kapcsolatok
- Útvonalterv térkép
- Térkép-kiegészítő
- Kiegészítés a 2. térképhez
- Visszajelzési űrlap
- Útvonalterv térkép
Alapértelmezés szerint az összes listaelem függőlegesen van elrendezve, és elfoglalja a tárolóelem teljes szélességét, amely viszont a tárolóblokk teljes szélességét elfoglalja.
HTML jelölés a vízszintes navigációhoz
A címkén belül található vízszintes menü ezenkívül elhelyezhető a ... és/vagy ... elemen belül. Ennek köszönhetően a html jelölés szemantikai jelentést kap, és további lehetőséget ad a menüblokk formázására.
Számos módja van a vízszintes elhelyezésüknek. Először vissza kell állítania a navigációs elemek alapértelmezett böngészőstílusait:
Ul (lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*eltávolítja a felső és alsó margót, amely egyenlő 1em*/ padding-left: 0; /*eltávolítja a 40 képpontnak megfelelő bal oldali kitöltést*/ ) a ( szövegdekoráció: nincs; /*a hivatkozás szövegének aláhúzásának eltávolítása*/)
1. li módszer (megjelenítés: soron belüli;)Listaelemek kisbetűssé tétele. Ennek eredményeként vízszintesen helyezkednek el, és a jobb oldalon 0,4 em rés van közöttük (a betűmérethez viszonyítva). Az eltávolításhoz adjon hozzá egy negatív jobb margót a li li-hez (jobb margó: -4 képpont;) . Ezután tetszés szerint alakítjuk a linkeket.
2. módszer. li (lebegtetés: balra;)Listaelemek lebegővé tétele. Ennek eredményeként vízszintesen helyezkednek el. A konténerblokk ul magassága nullává válik. A probléma megoldására hozzáadjuk (túlcsordulás: rejtett;) az ul-hoz, kiterjesztve azt, és így lehetővé téve, 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 helyezkednek el, 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 (kijelző: flex;)Az ul lista rugalmas tárolóvá tétele a . Ennek eredményeként a listaelemek vízszintesen vannak elrendezve. Adunk hozzá egy (display: block;)-t a hivatkozásokhoz, és tetszés szerint stílusozzuk őket.
1. Adaptív menü aláhúzással, ha az egérmutatót egy hivatkozás fölé viszi @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űk: inline-block: color .2s ) .menu-main a:visited (szín: #9d999d;). ) .menu-main a:before, .menu-main a:after (tartalom: ""; pozíció: abszolút; magasság: 4px; felül: automatikus; jobb: 50%; lent: -5px; bal: 50%; háttér : #feb386; átmenet: .8s; .menu-main a:hover:fore, .menu-main .current:fore (balra: 0; .menu-main .current:after) 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; @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 border-top: 3px solid #575350 .felső-menü: után 575350; box-shadow: 0 2px 7px margin-top: .menu-main (lista-stílus: nincs; margó: 0; font-size: 18px; text-align: center; pozíció: relatív; ) .menu-main:before, .menu-main:after ( tartalom: "\25C8"; sormagasság: 1; pozíció: abszolút; felső: 50%; transzformáció: translateY(-50% ); (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ó átmenet: .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 csipkézett menü @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 magasság: 20px, háttér: 0%, fehér 70%, rgba (255,255,0) 100% -10px; background-repeat: repeat-x) .menu-main li (megjelenítés: inline-block;) .menu-main a (szövegdekoráció: nincs; kijelző: inline-block; kitöltés: 10px 30px; font-family: "PT Sans Caption", sans-serif; átmenet: .3s lineáris; -main a:before, .menu-main a:after (tartalom: ""; pozíció: abszolút; felső: calc(50% - 3px); szélesség: 6px ; magasság: 6 képpont: 50% átlátszatlanság: 0,5 s-before (balra: 5 képpont); után (jobbra: 5px;) .menu-main a. current:before, .menu-main a.current: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. Adaptív menü a szalagon @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margó: 0 60px; pozíció: relatív; háttér: #5A394E; box-shadow: beszúrás 1px 0 0 rgba(255,255,255,.1), beillesztés -1px 0 0 rgba(255,255,255,1,1), pxbeállítás 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); .top-menu:before, .top-menu: "after" z-index: 2; magasság: 3px ) .top- menü: után -stílus: nincs; margó: 0. menü-fő: után ; felső: 18px, szilárd # 5A394E: forgatás (360 fok); border-left: 12px solid rgba(255, 255, 255, 0 ) .menu- main:after (jobb: -30px; border-right: 12px solid rgba(255, 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ő: bal;) .jobb-elem (lebegés: jobb;).navbar-logo ( pozíció: abszolút; bal: 50%; tetejére : 50%; transzformáció: fordítás(-50%,-50%) .menu-main a ( text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; betűköz: 2px, szín: fehér: 0,0,3);) @media (max. szélesség: 830px; main ( padding-top: 90px; text-align: center; ) .navbar-logo ( pozíció: abszolút; balra: 50% ; felül: 10px; transzformáció: translateX(-50%) ) .menu-main li ( lebegés: nincs megjelenítve: inline-block; kijelző: 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: both; 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: #F73E24 átmenet: .menu-main a:before (tartalom: ""; szélesség: 9px; bal: 50% transform(45deg) translateX(6.5px) átmenet: .3s lineáris 20 képpont -6px);) ) @media (max. szélesség: 600px) ( .menu-main li (megjelenítés: blokk;) ) Jó napot
Gyakran szükség van egy vízszintes menü létrehozására, amely a szülőblokk teljes szélességében kiterjed, függetlenül attól, hogy hány elemet tartalmaz.
Ma szeretném megmutatni, hogyan készítsünk egy ilyen menüt.
Így az étlapunk a következő lesz:
Teljes szélességében ki van feszítve, és fölé húzva kiemelkedik. A menü oldalt lekerekített.
HTML MARKUP
|
|
...
|
A menü teljes szélessé tételéhez 100%-os szélességű táblázatokat használtam. Minden táblához tartozik egy menüpont div konténer. Attól függően, hogy az első, az utolsó vagy a közbenső menüpont div, a megfelelő osztály hozzárendelésre kerül.
Minden div konténernek 2 oldalszegélye van abszolút pozicionálással, amelyek szükségesek a helyes megjelenítéshez. Ha szabványos szegélyeket használsz, akkor a menüpontok váltásakor a szöveg 1-2 pixellel ugrik, ami jó.
Az aktív osztály felelős a kiválasztott menüpontért és kiemeli azt.
Minden tételben van kép és szöveg. Annak biztosítására, hogy mindez függőlegesen szigorúan középre igazodjon, egy táblázatot használunk. A függőleges igazítási tulajdonságnak köszönhetően menüpontjaink mindig zökkenőmentesen jelennek meg és nem mozdulnak el.
CSS SZABÁLYOK
Először állítsunk be stílusokat a menü általános megjelenítéséhez:
Menu_container ( padding-top: 40px; szélesség: 100%; magasság: 47px; border-spacing: 0px; ) .menu_container td ( függőleges igazítás: középen; /* függőleges igazítás */ ) .last_point_menu, .first_point_menu_point, .menu szélesség: 100%; szegély: 1 képpont. 150px; padding-left: 4px; .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img (szélesség: 40px!fontos; ) .inner_table_menu (magasság:1:0) ; függőleges-igazítás: nincs szegély: balra ) .belső_tábla (szélesség: 30 képpont! fontos; magasság: 30 képpont! fontos; kitöltés balra: 15 képpont; )
A szépség kedvéért kerekítsük le a sarkokat a menü oldalain:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-left-radius: 5px border-bottom-right: 1px solid #dadbda .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -; alsó-jobb-sugár: 5px -moz-border-radius-topright
Most szebb lett az étlapunk:
Eddig az első pontnak nincs bal oldali szegélye. Kicsit később javítjuk.
Most adjunk hozzá lebegtetési effektusokat a menühöz.
Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( háttérszín: #CAE285:-moz háttér-line-imagear5; gradient(top, #CAE285, #9FCB56, background-image: -webkit-gradient(lineáris, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); #9FCB56); -szín: #aec671 #9fbb62 #87ac4a border-left: nincs ) .last_point_menu ( border: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( border: 1px solid #9FCB56; border-left: nincs;
keretszín: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (szegély-bal: nincs; )
/* stílusok oldalszegélyekhez */ .borderLeftSecond, .borderRightSecond ( kijelző: nincs; pozíció: abszolút; szélesség: 1px; magasság: 47px; háttérszín: #9fbb62; felső: 0px; z-index: 1000; ) /* határok abszolút eltolásai */ .borderLeftSecond ( balra: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSe; block case-ek / displayRightSe). és utolsó elem */ .first_point_menu.active .borderLeftSecond ( kijelző: nincs; ) .last_point_menu.active .borderRightSecond ( kijelző: nincs; ) .last_point_menu:hover .borderLeftSecond ( kijelző: blokk; )
Ennyi!
Kiváló menüt kaptunk a szülőblokk teljes szélességében! Az elemek nem fedik egymást, amikor az egeret mozgatja, és az elrendezés nem ugrik.
Helló. Nagyon régóta nem írtam bejegyzéseket a html/css munka témájában. Nemrég kezdtem el új elrendezést készíteni, és közben rábukkantam egy érdekes trükkre, amivel a menüt gumiszerűvé teheted (új elemeket adhatsz hozzá és a méret nem nő, hanem mindig a szülő 100%-a lesz tömb). Tehát ma egy gumimenüt fogunk megvalósítani CSS használatával.
Ha túl lusta a cikk elolvasásához, megtekintheti ezt a videót. A szerző is nagyon jól elmagyaráz mindent:
Az első lépés mindig a html jelölés, hol lennénk nélküle? De a mi esetünkben minden egyszerű lesz:
Minden világos, itt van a jelölőkódom:
Minden szabványosnak tűnik, így:
Most mindent a kívánt formába helyezünk, a CSS munkába áll.
2. lépés – AlapstílusokEzután stílusokat adok a burkolóblokkhoz. Ugyanis a maximális szélességet 600 pixelre állítom (csak hogy könnyebb legyen képernyőképet készíteni, hogy illeszkedjen a menü), és a blokkot is középre állítom.
Betakar(
háttér: #fff;
maximális szélesség: 600 képpont;
margó: 0 auto;
}
Most nézzük magát a menüt. Eltávolítom róla a jelölőket (az ul tag), készítek egy háttér lineáris színátmenetet, és ami a legfontosabb, a display: table-row tulajdonságot használom, hogy a menü tárolója táblázatsorként viselkedjen. Ez fontos a további manipulációkhoz.
R-menu(
háttér: lineáris gradiens(jobbra, #b0d4e3 0%,#88bacf 100%);
kijelző: táblázat-sor;
lista-stílus: nincs;
}
Amint látja, a fenti kód csak mindent megoldott, amiről írtam. Egyébként kényelmes a színátmenetek generálása az Ultimate CSS Gradient generator eszközzel. Majd egyszer írok még róla.
R-menu(
függőleges igazítás: alsó;
kijelző: táblázat-cella;
szélesség: auto;
szöveg igazítása: középre;
magasság: 50px;
border-right: 1px solid #222;
}
Eddig csúnyán néz ki az étlap, de nem baj, ideje eszünkbe juttatni. 
Az utolsó teendő az elemeken belüli hivatkozások stílusának beállítása. Itt van ez a kódom:
R-menü li a(
szöveg-dekoráció: nincs;
szélesség: 1000px;
magasság: 50px;
függőleges igazítás: középen;
kijelző: táblázat-cella;
szín: #fff;
betűtípus: normál 14px Verdana;
}
És most így néz ki a menü:
Még egyszer hadd magyarázzam el néhány sort:
Például úgy, hogy a menüelem színe megváltozik, ha rámutat. Ez egyszerűen megvalósítható a hover pszeudoosztály használatával:
R-menü li:hover(
háttérszín: #6bba70;
}
Remek, az étlapok készen vannak, de a legfontosabbat még nem ellenőriztük – hogy mennyire gumis, ahogy ígértem. Nos, hozzáadok még 2 elemet a menühöz:
A menü szélessége 600 pixel marad. A fennmaradó elemeket egyszerűen zsugorították egy kicsit, hogy 2 újat helyezzenek el.
Hozzáteszek még egy hosszú pontot:
Amint látható, a menü egy kicsit összezsugorodott, és a hosszú elem teljesen normálisan jelenik meg. És ha nem lenne a függőleges igazítás: alsó tulajdonság, amiről beszéltem, a menü rosszabbul nézne ki.
A menüt háromra csökkentem.
A tételek sokkal szabadabbak lettek, de maga a menü szélessége nem változott. Így 100% gumi menüt készítettünk!
Elvileg, ha a burkolótömbnek egy maximális szélességet ad meg, nem pedig egy fixet, akkor nem is kell átalakítani. Az én esetemben a max-width tulajdonságom: 600 képpont, és amikor a szélesség 600 pixel alá csökken, a blokk egyszerűen zsugorodik a képernyővel együtt, anélkül, hogy vízszintes görgetést képezne.
Nos, ha valamilyen módon módosítani vagy javítani szeretné a menüt mobileszközökön vagy széles képernyőkön, akkor a médialekérdezések segítenek! Sok sikert a honlapkészítéshez!
A sorozatot a legördülő menükről szóló leckével folytatjuk. Következő egy barkácsolj vízszintes legördülő menü css használatával.
Ha véletlenül került ide, vagy a legördülő menü más megvalósítását kereste, azt tanácsolom, hogy lépjen a szülő rovatba.
Ez a rész egy vízszintes legördülő menüt ír le CSS-ben és HTML-ben.
Oldalnavigáció:
Így, feladatunk:
vízszintes menü készítése css legördülő listával (ul li listákon) jQuery és Javascript, valamint táblázatok használata nélkül
Rizs. 2 (vízszintes legördülő menü)
A jQuery fájljait úgy másoljuk, mint az előző példában. Úgy döntöttem, hogy elhagyom az elválasztókat, hogy legalább egy kicsit jobban nézzen ki a menü. Természetesen ezek nélkül is meg lehet csinálni.