Html css rozbalovací nabídka. Jednoduché horizontální menu napříč prohlížeči. Jak vytvořit horizontální menu pomocí html5

Menu li( float:left; )

Celé naše menu je nyní horizontální.

Pokud nerozumíte tomu, co se přesně stalo a co to dělá float vlastnost Doporučuji vygooglovat informace o tuto vlastnost a důkladně si to prostudujte, protože
Bez toho se neobejde ani jedna stránka layoutu, to vám můžu s jistotou říct. No dobře, pokračujme!

Menu li а( display:block;/* Udělejte z odkazu blokový prvek*/ padding:12px 20px;/* Nastavte odsazení */ text-decoration: none; /* odstraňte podtržení */ color:#fff;/* nastavit barvu odkazů na bílou */ background:#444;/* ztmavit barvu pozadí */ font:14px Verdana, sans-serif;/* nastavit velikost a název písma */ )

Zde je jeden z nejvíce důležitá pravidla- display:blok;. Faktem je, že ve výchozím nastavení jsou odkazy vložené prvky a na inline prvky odsazení v různé prohlížeče se používají různými způsoby, proto je vhodné udělat z odkazu blokový prvek a teprve poté na něj aplikovat vlastnosti spojené s vnějšími nebo vnitřními odsazeními. Nechci tě teď zatěžovat zbytečné informacečasem skutečné příklady sami pochopíte, proč je zde kladen takový důraz.

Podívejme se, co máme, obnovte stránku prohlížeče a je to!:

Jak vidíte, nevypadá to špatně, můžeme říci, že v zásadě je naše menu hotové. Jediné, co je ještě potřeba udělat, je nastavit světlo odkazů při najíždění a zdá se mi, že menu bude vypadat lépe s oddělovači mezi položkami.

Začněme oddělovači:

Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

Co jsme tady udělali? Ano, vše je velmi jednoduché, stanovíme si body (

Pojďme se znovu podívat, co jsme dostali:

Podle mě je to s oddělovači mnohem lepší.

Menu li a:hover( background:#888; )

Opět pomocí speciální pseudotřídy, tentokrát hover, nastavíme barvu odkazu při najetí na něj, podívejte se:

Myslím, že je to cool :) Doufám, že skončíte se stejným menu jako já.

Tady skončím tuto lekci, opravdu doufám, že to pro vás bylo užitečné a nyní víte, jak vytvořit jednoduché horizontální menu na čisté html a css. Samozřejmě jsme vytvořili jednoúrovňové menu, s dvouúrovňovým menu (s vnořeným seznamem) to bude trochu složitější, ale to je téma na jinou lekci, to je pro mě vše. Přijďte zas, budu ráda!!!

Už dlouho jsem chtěl napsat článek o tom, jak vytvořit podnabídku pomocí CSS. Mnoho lidí to dělá v JQuery a dopadá to docela dobře, ale jako celek základní princip Zde nastíním, jak vytvořit podnabídky pomocí CSS. A poté, počínaje tímto základem, můžete podnabídku dále vylepšovat.

Zde je hned kód CSS:

* html ulli (
plovák: vlevo;
}
* html ulli a (
výška: 1 %;
}
ul (
border-bottom: 1px solid #000;
styl seznamu: žádný;
okraj: 0;
výplň: 0;
šířka: 100px;
}
ulli (
poloha: relativní;
}
ulli a (
displej: blok;
ohraničení: 1px plný #000;
border-bottom: 1px;
výplň: 5px;
text-dekorace: žádná;
}
li ul (
displej: žádný;
vlevo: 99px;
pozice: absolutní;
nahoře: 0;
}
li:hover ul (
displej: blok;
}

Nejdůležitější je zde volič „li:hover ul“. Ve skutečnosti zobrazuje obsah nabídky. Ve výchozím nastavení je to "zobrazit: žádné" a když najedete na položku nabídky, podnabídka se změní na "zobrazit: blok", to znamená, že bude viditelná. To je nejdůležitější. Také v prvních dvou selektorech (těch s * ) je CSS hack pro IE, jinak bez něj v tomto prohlížeči nic nebude fungovat. Všechno ostatní je vzhled, který lze samozřejmě změnit.

Zde je HTML kód:

• 
  Domov


• 
  Nabídka 1
  
  
  
  • 
    Podnabídka 1
    
  
  
  • 
    Podnabídka 2
    
  
  
  • 
    Podnabídka 3
    
  
  
  
  


• 
  Nabídka 2
  
  
  
  • 
    Podnabídka4
    
  
  
  • 
    Podnabídka 5
    
  
  
  • 
    Podnabídka 6
    
  
  
  • 
    Podnabídka7
    
  
  
  • 
    Podnabídka 8
    
  
  
  
  

Pokud se nad touto strukturou pečlivě zamyslíte, vše bude velmi jasné. Značka ul vytváří nabídku. Pokud je ul uvnitř jiné ul, pak se již jedná o podnabídku. A značka li je zodpovědná za konkrétní položku nabídky.

Menu je samozřejmě nejjednodušší, jak z hlediska logiky a struktury, tak z hlediska designu. Samozřejmě můžete s pomocí JQuery udělat hladký otvor. Změnit můžete i design, ale celý princip zůstane stejný jako v této podnabídce napsané v CSS a HTML.

Vytvořme jednoduché horizontální navigační menu pro web. K tomu použijeme jednoduché techniky, což bude mít za následek správné zobrazení naší nabídky ve všech prohlížečích.

Tak začněme. Vytvořme seznam s názvy našeho menu. Nechte názvy položek: „Domů“, „Novinky“, „Produkty“, „Služby“, „Partneři“, „Kontakty“. tvoříme nový soubor s názvem menu.html, například pomocí Dreamweaweru nebo pomocí běžného poznámkového bloku. V něm mezi značky těla umístíme náš jídelníček. Toto je běžný seznam ul s odrážkami s prvky li. Z každé položky menu samozřejmě uděláme odkaz, kam místo URL vložíme hash #. Použití Program Photoshop vytvořit obrázek o velikosti 3x30 px, s přechodová výplň jak je znázorněno na obrázku níže. Soubor bude uložen do formát GIF. Říkejme tomu bg.gif. Tato kresba bude fungovat jako obrázek na pozadí naší nabídky.

Zde je obsah souboru menu.html:

Jednoduché horizontální menu napříč prohlížeči

• Domov
• Zprávy
• Produkty
• Služby
• Partneři
• Kontakty

Nyní samostatně vytvořte soubor stylu s názvem main.css. Jeho úplný seznam je uveden níže.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*zarovnat seznam doleva*/ width:auto;/*nastavit šířku automatického nastavení podle typ a obsah seznamu */ background-image: url(bg.gif /*set). obrázek na pozadí*/ background-repeat:repeat-x; /*opakujte náš obrázek vodorovně*/ list-style:none; /*odstranit značky seznamu*/ background-color:#4778c3; /*nastavit barvu pozadí obrázku*/ font-size:13px; /*nastavit velikost písma*/ font-family:Arial, Helvetica, sans-serif; /*nastavit písmo*/ ) ul li ( float:left; /*zarovnat prvky seznamu doleva*/ ) ul a ( display:block; /*reprezentovat odkazy nabídky jako prvky bloku*/ width:100px; /* nastavit velikost bloku*/ výška:30px /*a výška bloku*/ text-align:center;/*text na střed*/ výška-řádku: 2.1em; řádkování*/ text-decoration:none; /*odstranit podtržení z odkazů*/ color:#fff; /*barva textu odkazu - bílá*/ border-right:#fff solid 1px; /*pohraniční pravá strana blok (1px bílá čára)*/ ) ul a:hover ( color:#ccc; /*odkaz změní barvu, když na něj najedete myší*/ )

Myslím, že na obsah souboru main.css by neměly být žádné dotazy Tipy jsem napsal do komentářů dostatečně podrobně a srozumitelně, takže se nebudu opakovat. Nezapomeňte jej připojit k naší stránce menu.html pomocí

Pojďme si to shrnout. V důsledku toho jsme obdrželi horizontální menu zcela napříč prohlížeči, které vypadá stejně nejen ve všech moderní prohlížeče, ale také v takových raritách jako IE 5.5 a IE 6.0. Všechny prvky nabídky jsou prezentovány jako blokové prvky a mají stejné rozměry 100 px šířka a 30 px výška. Návrh prvku bloku pomocí pravého okraje se používá jako oddělovač položek nabídky. bílý tloušťka 1px. Jedná se prakticky o nejjednodušší způsob implementace horizontálního menu. Samozřejmě, pokud si to přejete, můžete jej upravit, učinit ho krásnějším a funkčnějším pomocí vaší fantazie, vlastnosti css a doplňkové grafické prvky. Naše horizontální menu vypadá asi takto:

Výhody tohoto řešení:
Snadno proveditelné
Jednoduchý kód
Žádné tabulky ani javascript
Kompatibilita mezi prohlížeči: nabídka vypadá ve všech prohlížečích stejně
Je použit pouze jeden výkres
Minimální kód na stránce menu.html
Minimální kód pro implementaci stylů v main.css

Soubory používané v v tomto příkladu, lze stáhnout v archivu

Od autora: Ahoj všichni. Z nějakého důvodu webmasteři spojují rozbalovací nabídky se skripty, ale po dlouhou dobu lze takovou navigaci provádět naprosto bezpečně na čistý css. Navíc takové menu nebude o nic horší. Dnes vám ukážu, jak vytvořit rozbalovací nabídku v css. Podělím se takříkajíc o recept.

Obecně se nejprve rozhodneme, jak budeme tvořit samotné menu. V html5 standardním způsobem považuje se za jeho vytvoření v kontejneru navigace pomocí seznam s odrážkami. Pojďme to udělat. Značky později odstraníme pomocí css, v nabídce je vůbec nepotřebujeme.

Vlastně hned napíšu html označení s vnořenými seznamy. To znamená, že náš seznam bude dvouúrovňový – bude obsahovat další seznamy. Totiž pro každou položku je 1 seznam, který bude tvořit rozbalovací nabídku.

Existuje důležitý bod, což znamená, že možná nebudete muset rozbalovat všechny položky, ale jen některé. Žádný problém, pak v položkách bez rozevíracího seznamu jednoduše nevytváříme vnořené seznamy.

Vlastně tady to je, všechny značky:

• bod 1
  • Dílčí klauzule
  • Dílčí klauzule
  • Dílčí klauzule
• bod 2
  • Dílčí klauzule
  • Dílčí klauzule
  • Dílčí klauzule
• bod 3
  • Dílčí klauzule
  • Dílčí klauzule
  • Dílčí klauzule
• bod 4
  • Dílčí klauzule
  • Dílčí klauzule
  • Dílčí klauzule

Chápu, že je to obrovské. To je problém s vnořenými seznamy, že musíte napsat hodně kódu. Ale mějte na paměti, že děláme 4 hlavní body a pro každý bude rozbalovací nabídka.

Vlastně jsem dal celé navigaci identifikátor nav a všechny vnořené seznamy - stylová třída za druhé, aby pochopili, že jsou vnořená.

Skvělé, značkování máme připraveno, můžete se podívat na výsledek:

Jo, vypadá to hrozně. Ale teď to zahrneme css práce a během několika minut se naše navigace změní. Pojďme pracovat.

První věc, kterou udělám, je resetování všech výplní na výchozí pro všechny prvky. Pouze nám budou překážet; je lepší nastavit odrážky sami později, kde je to potřeba.

*( okraj: 0; odsazení: 0; )

#nav( výška: 70px; ) #nav ul( styl seznamu: žádný; )

Nyní se musíme skutečně rozhodnout, jaké bude naše menu. Horizontální nebo vertikální? Navrhuji nejprve udělat horizontální a vidět vše na jeho příkladu. Chcete-li to provést, musíte napsat následující styly:

#nav > ul > li( plovoucí: vlevo; šířka: 180px; pozice: relativní; )

Všimněte si, že pomocí znaku > odkazujeme na položky seznamu, které jsou přímo vnořeny do ul, které jsou přímo vnořeny do nav. To je velmi důležité, protože to zabraňuje použití stylů na vnořené položky seznamu. Faktem je, že podle mé představy budou položky v hlavním seznamu umístěny vodorovně a ve vnořených svisle.

Ale můžete to samozřejmě udělat jinak, v souladu se svou představou. Můžete se ujistit, že všechny body jsou na jedné přímce.

Každopádně výše uvedenému kódu doufám rozumíte. Vynutí posunutí položek hlavního seznamu doleva, takže se všechny zobrazí na stejném řádku, i když jsou blokové prvky. Dal jsem jim také výslovně šířku a relativní umístění.

Proč polohování? Je to nutné k tomu, aby bylo možné absolutně umístit vnořené seznamy. Pokud jste studovali polohování v CSS, pak pravděpodobně víte, že pokud dáte bloku relativní umístění, pak všechny prvky v něm mohou být umístěny absolutně uvnitř tohoto konkrétního bloku a ne v celém okně prohlížeče.

Mezitím zde je to, co zatím máme:

Z tohoto snímku obrazovky si již můžete představit přibližný výsledek. Položky samozřejmě musíme ještě krásně navrhnout, aby oči při prohlížení navigace neprosily o slitování.

#nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( pozadí: #2F718E )

Nejprve je třeba zablokovat samotné odkazy. To je nutné, aby to fungovalo vycpávka a všechny vlastnosti byly použity správně. Dále specifikuji barvy pozadí, text, parametry rámečku, vnitřní výplň a zarovnání textu na střed. Nakonec zruším podtržení odkazů.

Všechny tyto parametry nemusí být specifikovány tak, jak jsem to udělal já. Barvy si můžete vybrat libovolně, vyrobit jiný rámeček nebo jej nepoužívat vůbec, odsazení lze zmenšit nebo zvětšit.

Vezměte prosím na vědomí, že v v tomto případě Nepoužili jsme znak >, takže zadaná pravidla budou platit pro všechny odkazy, včetně těch umístěných ve vnořených odstavcích. Nyní tedy máme následující:

Skvělé, ale chápete, že podpoložky by neměly být viditelné, měly by se otevřít, když na ně najedete myší požadovanou položku. Bez toho vypadá naše menu jako stůl. No, je čas skrýt vnořené položky.

#nav li .second( display: none; position: absolute; top: 100%; )

Nejprve skryjeme zcela vnořené seznamy. Zadruhé se jich ptáme absolutní umístění a horní souřadnice: 100 %. To znamená, že rozbalovací nabídka se zobrazí jasně pod hlavní položkou, ke které patří, jasně ve 100 % výšky této položky.

Nyní na webové stránce vidíme pouze hlavní menu, což je to, co potřebujeme.

Co nám zbývá udělat, je to nejdůležitější – uvědomit si samotný pád. Není na tom nic složitého, podívejte se na tento kód:

#nav li:hover .second( display: block; )

Tento kód bude fungovat bezchybně. Když najedete na položku hlavní nabídky, zobrazí se podseznam. Navíc pouze seznam, který je vnořen v položce, nad kterou se pohybuje kurzor.

Je tu jen jeden menší problém – šířka vnořených položek neodpovídá šířce hlavních. Ale to lze velmi snadno vyřešit přidáním vhodných stylů:

#nav li li( šířka: 180px; )

To je vše, problém vyřešen:

Všechno funguje skvěle. Když najedete na hlavní položku, zobrazí se rozbalovací nabídka odpovídající této položce. Pokud přesunete kurzor do strany, zmizí. Pokud přesunete kurzor na samotné vnořené položky, můžete na ně kliknout a přejít na požadovaný úsek místo. Proto jsme pro vás vytvořili velmi jednoduché a lehké rozbalovací menu s absolutně žádnými skripty.

Dobře, úplně jsme přišli na horizontální navigaci, ale kromě toho se na webových stránkách velmi často vyskytuje vertikální navigace a může to být také rozbalovací. Ve skutečnosti je změna nabídky z horizontální na vertikální velmi snadná, stačí změnit jen pár řádků kódu.

Nejprve budete muset odstranit float:left z položek hlavního seznamu. Je to tato vlastnost, která zajišťuje, že se naše položky zobrazují na jednom řádku, ale proč to potřebujeme, když navigace musí být vertikální?

Teď už zbývá jen změnit pravidla pro selektor #nav li .second, tedy pro vnořené seznamy, totiž je potřeba je umístit trochu jinak. Takhle:

#nav li .second( display: none; position: absolute; left: 100%; top: 0; )

To znamená, že je nutné zaregistrovat dvě souřadnice místo jedné. Za prvé, v případě horizontální navigace jsem řekl, že podle plánu by se položky podnabídky měly zobrazovat pod hlavními položkami. V případě vertikálního menu to není vhodné – položky by se měly zobrazovat na boku.

Proto změníme horní: 100 % na levé: 100 %. Kromě toho potřebujeme také horní souřadnici. Nastavíme ji na 0, aby podnabídka byla na stejné úrovni jako položka, které odpovídá.

To je vše, nyní vše funguje jak má. Můžete to otestovat. Jak vidíte, nelhal jsem, když jsem řekl, že budu muset přepsat jen pár řádků kódu.

Pomocí téměř stejného přístupu můžete v případě potřeby vytvořit více úrovní nabídky. Vytvořme si například seznam pro čtvrtou položku hlavního menu, která bude vnořena do jedné z dílčích položek.

Každý, kdo se rozhodne vytvořit si vlastní webovou stránku, se potýká s potřebou vytvořit pěkné menu pro váš web. V tomto článku vám řeknu, jak pomocí běžného kódu HTML a jednoduchých pravidel CSS můžete vytvořit vynikající rozevírací nabídku, kterou lze snadno měnit a rozšiřovat. A nepotřebujeme k tomu žádný JavaScript kód!

První a nejvíce důležitá etapa Při vytváření rozbalovací nabídky je prvním krokem vytvoření její struktury. To se nejlépe provádí pomocí nečíslovaných seznamů. Vytvoříme jednoduché menu takto:

• Domov
• články
  • HTML
  • CSS
  • PHP
  • MySQL
• knihy
  • Propagace a propagace
  • E-Business
  • Web Design
  • Platební systémy
• O nás

Ukázalo se, že html kód je docela jednoduchý a není složitý. Tento seznam bude vypadat takto.

Na další etapa přineseme naše menu na více krásný výhled. To lze snadno provést pomocí CSS.
Nejprve odstraníme značky nečíslovaný seznam, odsazení, a také nastavit šířku naší nabídky.

#nav ul ( margin: 0px; padding: 0px; list-style:none; width:200px; )

Nyní musíme nastavit polohu prvků seznamu. Jelikož naše nabídka bude vertikální, usnadní nám to práci. Pro vlastnost však musíme nastavit hodnotu "pozice", Jak "relativní". To je nezbytné pro absolutní umístění podnabídky vzhledem k hlavní nabídce. Nastavíme také podtržítko pro položky nabídky.

#nav ul li ( pozice: relativní; border-bottom:1px solid #ccc; )

Nyní musíme opravit naše podnabídka. Protože chceme, aby se naše nabídka objevila napravo od hlavní nabídky v okamžiku, kdy je kurzor nad touto položkou, potřebujeme vlastnost vnořeného seznamu "pozice" nastavená hodnota "absolutní". Musíme také nastavit jeho polohu. To se provádí následovně

#nav li ul ( pozice: absolutní; vlevo: 200 pixelů; nahoře: 0; zobrazení: žádné; )

Použití atributů vlevo A nahoře nastavíme absolutní umístění naší podnabídky vzhledem k nadřazené položce nabídky. Také jsem přiřadil atribut "zobrazit" význam "žádný", protože při otevírání stránky nechceme vidět podnabídku.

Nyní tedy naše menu vypadá takto.

Nyní se podívejme na naše odkazy. Nejprve, aby každý odkaz zabíral veškerý prostor pro něj přidělený uvnitř prvku seznamu, který jej obsahuje, přiřadíme atribut "zobrazit" význam "blok". Odebereme také podtržení a nastavíme barvu pozadí a barvu textu odkazů.

#nav ul li a ( display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; )

#nav li:hover ul ( display: block; )

Nyní naše menu již funguje a vypadá takto.

Nezbývá než mu dodat atraktivnější vzhled.

Nejprve se přesvědčme, že když najedete na naše položky nabídky, změní se pozadí a barva textu. Chcete-li to provést, přidejte následující kód

#nav li:hover a ( barva:#FFFFFF; pozadí: url(img/fone-tr.png); )

Zde používám tento obrázek jako pozadí, ale můžete použít výplň jakoukoli jinou barvou (například: background-color:#0000ff; ).

#nav li:hover ul a:hover ( background-color:#cccccc; background-image:none; color:#FFFFFF; )

Tak a je to! Náš rozbalovací nabídka v html a css připraveno. Můžete vidět, na co jsme přišli.

Zdálo by se, že to může být konec, ale ne. Bohužel rané verze Internet Explorer rozumět pseudotřídě :vznášet se pouze pro značku - Takže li:hover, který má na svědomí vzhled podnabídek a změnu barvy pozadí, mu nic neříká.