Rekenaars, Sagteware
Hoe om 'n drop-down CSS spyskaarte maak
Vandag sal ons die vraag van "Hoe kan ek 'n drop-down CSS spyskaarte te skep?" Oorweeg. Dit moet in 'n keer sê dat hierdie item sal gemaak word sonder die koppeling van enige addisionele fondse. Dit wil sê, die spyskaart sal geskep word net met CSS en HTML.
opleiding
Om ten volle te verstaan wat is in dit in die artikel, wat jy nodig het 'n bietjie om kennis te maak met die teoretiese materiaal. Maar as jy vertroud is met pseudo-klasse is, kan jy hierdie paragraaf slaan. So, 'n vertikale drop-down CSS spyskaarte te skep, moet ons 'n element as «: hover». Die pseudo «: hover» kan na enige toegeskryf HTML tag. Dit laat jou toe om die oomblik wanneer 'n item Beweeg jou muis te definieer. « 'N:: hover {: rooi kleur;}» byvoorbeeld, het ons eiendom aangestel. Hierdie inskrywing beteken dat wanneer jy die hang muis dit rooi op die inhoud van enige tag . Dit is opmerklik dat hierdie pseudo-element ook geïnaktiveer. By the way,: het «hover» soortgelyke elemente wat verband hou. Maar uit hierdie ons sal pseudo CSS aftrekkieslys te skep.
opdrag
Eerstens, laat ons verstaan wat is 'n drop-down menu. Onder hierdie definisie kry 'n baie verskillende metodes bou verskillende uitlegte. In hierdie geval, sal ons analiseer die struktuur wat bestaan uit 'n hele paar voortdurend sigbaar items en verskeie bykomende (verborge). Kom ons klaar met die teorie en begin om te oefen.
- Ons skep die uitleg van ons spyskaart. Om dit te doen, HTML-kode etikettering. Skep 'n sub-lys:
-
- < / ul>. Iets soos hierdie moet lyk jou aftrekkieslys. CSS om later in te gryp. In hierdie geval is die belangrikste lys bestaan uit drie hoof areas en twee ingeslote.
- Steek die sub-menu. Vir hierdie ons 'n stylblad gebruik, definieer die volgende eienskappe: ul ul {display: none;} Dit sal die elemente van die tweede lys van die skerm te verwyder.
- Skep 'n spyskaart CSS, drop down van die belangrikste lys. Die Cascading Style Sheets skryf die volgende reël: ul li: Beweeg ul {vertoon: blok;}. Hierdie inskrywing beteken dat wanneer die muis is oor die element li, wat is geleë in ul lys verskyn op die skerm ul (aangeheg). Met die eerste oogopslag, kan so 'n skema ingewikkeld en verwarrend lyk. Maar in werklikheid, alles is baie eenvoudig.
- Gebruik hierdie uitleg jouself deur die invoeging van die tags
- jou inhoud. Jy kan die aantal lys elemente te verander.
dekoratiewe veranderinge
Sodra die hoof spyskaart uitleg is gereed, kan jy voortgaan om registrasie. Waarskynlik, baie in die eerste plek bereid is om ontslae te raak van merkers dui die lys item. Dit word gedoen met behulp van 'n enkele eiendom CSS, naamlik die lys-styl-tipe. Jy moet die volgende inskrywing voeg: li {lys-styl-tipe: geen;}. Dan kan jy die raam te voeg en maak die agtergrond. Die grens en agtergrond jy help met hierdie. Miskien 'n paar sal nie graag die hangkieslys sal verskyn as 'n addisionele lys, stoot op dieselfde basiese elemente. Om dit op te los, kan jy dit posisioneer. Om dit te doen, Cascading Style Sheets skryf die volgende inskrywing: ul ul {posisie: absolute; links: 15px; reg: 15px; top: 15px; onder: 15px;}. Natuurlik, die waardes wat jy sal jou eie gebruik. Afhangende van waar jy wil hê dat die drop-down menu sien, sal CSS bied baie meer funksies wat verskeie effekte kan byvoeg en versier ons lyste.
gevolgtrekking
Weereens is dit die moeite werd om te let op die konstruksie van die spyskaart uitleg. Om die CSS reëls wat in hierdie geval ingeslote waarde toeken, byvoorbeeld, ul ul. As jy in die dokument na ander soortgelyke struktuur voldoen, kan daar groot probleme. In hierdie situasies, moet jy 'n spesifieke doel te gebruik, byvoorbeeld keurders of id-ID's. Die bogenoemde artikel uitleg aftrekkieslys is ontwerp om die algemene ontwerp vergewis. Die res van die werk rus op jou skouers.
Similar articles
Trending Now