Menü egy oldal, gombok weboldalak
A blog a szép
A jó hír az, hogy szinte mindig ugyanaz. Kivétel. talán az egyik eset: ha a legördülő menüből az oldalon. Például, vannak „órák” gomb, ami arra utal, hogy kiesik egy listát a „tanulságok photoshop”, „Lessons villogni», «3D Max Lessons”, stb Mert polzovatelyatakoe menü online nagyon kényelmes, de a keresőprogramok, mint tervezési bonyolítaná és lassítja az indexelés.
De a mai lecke lesz a példa a menü, amely együtt a többi tervezési tettem egy másik helyszínen. Bár nem tudok mondani, hogy ezen az oldalon van egy másik ütőkártyája a pakliban munkám. De remélem, hogy a tulajdonos még kitöltésével, és ez nem lesz egy halott projekt, de tudom az idő, hogy büszke lehet, hogy a kezét neki.
Elég szó, hogy a lényegre;)
Ez a kód kerül egy CSS (CSS). Ha még mindig nem tudom, mi ez, olvassa el a könyvet „Block Layout” a tartalmát, amely összegyűjti a sok hasznos információt.
#nav szélesség: 990px;
/ * Szélessége a teljes navigációs menü * /
magasság: 50px;
/ * És, persze, a magassága * /
background: url (img / nav.jpg) no-repeat # 374f37;
/ * Itt állítsa be a paramétereket a háttérben; csak meg az utat, hogy a kép, a háttérben volt szolgálja, miután rámutatnak, hogy a kép nem ismétlődik a végén jelzik a színét a menü az esetre, ha letiltja a menetrend * /
font-size: 18px;
float: left;
/ * Teszi, hogy a mi blokkot a menü a jobb oldalon található; Tény, hogy a menü bővül a teljes hossza a helyszínen, és ha tetszik, ha nem kell, de ez a beállítás van szükség, hogy ne „kosyachit” elrendezést a menüben a „barátkozni” más egység * /
#nav ul árrés: 4px 25 képpont 0 0;
/ * Megváltoztatása ezeket a paramétereket, I „mozogni” gombot, hogy a háttérben * /
list-style: none;
#nav li display: inline;
/ * A mi gombok sorakoznak, és nem egy oszlop * /
#nav a float: left;
/ * Azt jelzi, hogy a gombok sorakoznak balról jobbra * /
display: block;
szélesség: 98px;
/ * Hossza ennek a „keret” * /
magasság: 50px;
background: url ( «img / key.png») no-repeat;
/ * Minden, mint ahogy az a háttér a menüben; aki nem érti meg, hadd jöjjön vissza egy kicsit magasabb, és ismételje meg * /
text-align. központ;
/ * Pozíció belül a szöveg a „keret” * /
text-decoration: none;
/ * A szöveg, hogy tiszta, anélkül, hogy hangsúlyozza, hogy a navigációs menü, akkor nem kell teljesen * /
padding: 10px 10px 0px 2px;
/ * Ezek tsiferkami korrigálható a helyzet a feliratot belül a „keret”, ha nem tetszik valami: áthelyezés, stb * /
szín: #fff;
/ * Színes címke, amikor a gomb nem aktív * /
#nav egy: hover háttér-helyzetben: 0% -50px;
color: # 66ff66;
/ * A szöveg színe, ha a kurzor a gomb * /
Ez minden, mint látható, nem bonyolult. Továbbra is csak a meséljek a lehetőséget «background-position» és miért van szükség rá. Tulajdonképpen akkor tud nélküle, hanem egyszerűen regisztrálni «háttér» és az utat, hogy a kép (vagy színes), amelynek meg kell változtatni a háttérben, ha lebeg felette. De ebben az esetben, ha a felhasználó rossz internet sebessége, fékezés fog bekövetkezni, ha a kurzor, először háttérben eltűnik, akkor, amikor még csak teher egy új kép, átvált a helyes.
Annak érdekében, hogy ez nem történik meg, akkor meg kell felhívni mind a háttérben egy kép: a felső egyik, hogy lesz egy gomb inaktív állapotban, az alábbi, az jelenik meg, ha fölé viszi azt. Attól függően, hogy milyen magas a gombot, rámutatunk, hogy hány pixel van szüksége, hogy vegye fel a háttérben.
Ahhoz, hogy megjelenjen a menü a honlapon, meg kell adni ezt a darabot a kódot az oldalon:
Ha egy sablont WordPress, a kód így kell kinéznie: