Kompjûters, Software
Hoe meitsje in dellûk- CSS menu 's
Hjoed sille wy beskôgje de fraach fan "Hoe meitsje ik in dellûk CSS menu 's?". It moat sizze tagelyk dat dit item sil makke wurde, sûnder it ferbinen gjin ekstra middels. Dat is, it menu sil oanmakke wurde allinne mei CSS en HTML.
training
Om folslein begripen wat dêryn is yn it artikel, moatst in bytsje om 'e kunde komme mei de teoretyske materiaal. Mar as jo binne bekend mei pseudo-klassen, kinne jo gean dit lid. Dus, it meitsjen fan in fertikale dellûk CSS menus, wy moatte in elemint as «: Hover». De pseudo «: Hover» kin tawiisd oan eltse HTML tag. It kinne jo beskiede hokker momint doe't in item Beweech mei de mûs jo mûs. Bygelyks, wy hawwe beneamd eigendom: «a: Hover {color: red;}». Dizze ynfier betsjut dat as jo de mûs op de mûs it draait read op de ynhâld fan eltse tag . It is de muoite wurdich opskriuwen dat dizze pseudo-elemint wurdt ek inactivated. Troch de wei, «: Hover» hat besibbe ferlykbere eleminten. Mar út dit wy sille meitsje pseudo CSS dellûk menu.
ynstruksje
As earste, litte wy begripe wat is in dellûk menu. Under dizze definysje krijt in soad ferskillende metoades oanlizzen ferskillende opmaak. Yn dit gefal, we sille analysearje in struktuer dat bestiet út ferskate hieltyd sichtber items en ferskate ekstra (ferburgen). Litte wy einigje mei de teory en begjinne te oefenjen.
- Wy meitsje de opmaak fan ús menu. Om dit HTML-koade Labeling. Meitsje in briede list:
-
- < / ul>. Sokssawat moat útsjen jo dellûk menu. CSS te gripen letter. Yn dit gefal de wichtichste list bestiet út trije wichtichste gebieten en twa omsletten.
- Hide de sub-menu. Foar dit brûke wy in stylblêd, define de folgjende eigenskippen: ul ul {display: none;} Dit sil de eleminten fan de twadde list fan it skerm.
- Meitsje in menu CSS, falle ôf it wichtichste list. De cascadearjende stylblêden skriuwe de folgjende regel: ul li: mûs ul {display: blok;}. Dizze ynfier betsjut dat as de mûsoanwizer is oer de elemint li, dy't leit yn ul list ferskynt op it skerm ul (taheakke). Op it earste each, sa'n regeling kin liket yngewikkeld en betiizjend. Mar yn feite, alles is hiel simpel.
- Brûk dizze opmaak sels troch it ynstekken fan de tags
- jo ynhâld. Jo kinne it oantal list eleminten.
decorative feroarings
Sa gau as de wichtichste menu opmaak is klear, kinne jo trochgean nei registraasje. Nei alle gedachten, in protte op it earste plak ree en reitsje stiften oanjout de list item. Dat wurdt dien mei help fan in inkele eigendom CSS, nammentlik de list-styl-type. Jo moatte heakjen de folgjende yngong: li {list-style-type: none;}. Dan kinne jo ynfoegje it frame en meitsje de eftergrûn. De grins en eftergrûn helpe jo mei dizze. Miskien guon sille net leuk it pull-del menu sil ferskine as in ekstra list, triuwe op deselde basis eleminten. Dit te reparearjen, kinne jo posysje is. Om dit te cascadearjende stylblêden skriuwe de folgjende yngong: ul ul {posysje: absolute; lofts: 15px; rjochts: 15px; top: 15px; bottom: 15px;}. Fansels, de wearden jo brûke jo eigen. Ôfhinklik fan wêr't jo wolle sjoch de dellûk menu, CSS sil biede folle mear funksjes dy't kinne ferskate effekten en versieren ús listen.
konklúzje
Ek hjir is it wurdich opskriuwen fan de oanlis fan de menu-yndieling. Om tawize de CSS regels brûkt yn dit gefal ynsletten wearde, bygelyks, ul ul. As jo binne yn it dokumint te moetsjen oare ferlykbere struktuer, der kin grutte problemen. Yn dizze situaasjes, moatte jo brûke in spesifyk doel, bygelyks, selectors of ID-IDs. It boppesteande artikel opmaak dellûk menu is ûntwurpen om fertroud de algemiene design. De rest fan it wurk leit op dyn skouders.
Similar articles
Trending Now