Ordinadors, Programari
Com fer una menús desplegables CSS
Avui anem a examinar la qüestió de "Com puc crear un CSS menús desplegables?". Ha de dir alhora que aquest article serà fet sense necessitat de connectar tots els fons addicionals. És a dir, el menú es crea només amb CSS i HTML.
formació
Per entendre completament el que és en ella en l'article, que necessita una mica de familiaritzar-se amb el material teòric. Però si vostè està familiaritzat amb les pseudo-classes, pot saltar aquest paràgraf. Per tant, per crear un menú desplegable CSS vertical, necessitem un element com «: vol estacionari». El pseudo «: vol estacionari» pot ser assignat a qualsevol etiqueta HTML. Se li permet definir el moment en què un element passa el ratolí. Per exemple, hem designat a la propietat: «a: hover {color: red;}». Aquesta entrada vol dir que quan es passa el ratolí es converteix en vermell en els continguts dels etiqueta. Val la pena assenyalar que aquest pseudo-element també s'inactiva. Per cert, «: vol estacionari» s'ha relacionat amb elements similars. Però a partir d'això anem a crear el menú desplegable pseudo CSS.
instrucció
En primer lloc, anem a entendre el que és un menú desplegable. Sota aquesta definició per crear una gran quantitat de diferents mètodes de construcció de diferents dissenys. En aquest cas, anem a analitzar una estructura que consta de diversos elements constantment visibles i diverses addicionals (ocults). Anem a acabar amb la teoria i comencen a practicar.
- Creem el disseny del nostre menú. Per a això, l'etiquetatge de codi HTML. Crear una llista imbricada:
-
- < / ul>. Una cosa com això ha de ser similar al seu menú desplegable. CSS per intervenir més tard. En aquest cas, la llista principal es compon de tres àrees principals i dos tancats.
- Amaga el submenú. Per a això s'utilitzen un full d'estil, definir les següents propietats: ul ul {display: none;} Això eliminarà els elements de la segona llista de la pantalla.
- Crear un menú CSS, baixa de la llista principal. Els fulls d'estil en cascada escriure la següent regla: li ul: hover ul {display: block;}. Aquesta entrada vol dir que quan el ratolí està sobre l'li element, que es troba a la llista de ul apareix a la pantalla ul (adjunta). A primera vista, aquest esquema pot semblar complicat i confús. Però, en realitat, tot és molt simple.
- Utilitza la disposició a si mateix mitjançant la inserció de les etiquetes
- seu contingut. Es pot canviar el nombre d'elements de la llista.
canvis decoratius
Tan aviat com el disseny del menú principal està a punt, es pot procedir al registre. Probablement, molts en primer lloc disposats a desfer-se dels marcadors que indiquen l'element de la llista. Això es fa usant un sol CSS propietat, és a dir, l'estil de tipus llista. Cal afegir la següent entrada: li {list-style-type: none;}. A continuació, pot inserir el marc i fer que el fons. La vora i el fons l'ajuden amb això. Potser alguns no els agradarà el menú desplegable apareixerà com una llista addicional, empenyent als mateixos elements bàsics. Per solucionar aquest problema, es pot col·locar. Per a això, els fulls d'estil en cascada escriure la següent entrada: ul ul {position: absolute; esquerra: 15px; dreta: 15px; top: 15px; part inferior: 15px;}. Per descomptat, els valors que es van a utilitzar el seu propi. Depenent d'on vostè vol veure els menús desplegables, CSS oferirà moltes més característiques que poden afegir diversos efectes i decorar les nostres llistes.
conclusió
Un cop més, val la pena destacar la construcció de la disposició del menú. Per assignar les regles CSS s'utilitzen en aquest cas el valor incorporat, per exemple, ul ul. Si es troba en el document de conèixer altres estructura similar, pot haver grans problemes. En aquestes situacions, cal utilitzar un propòsit específic, per exemple, selectors o aneu-IDs. El menú desplegable Disseny d'article anterior està dissenyat per familiaritzar al disseny general. La resta de l'obra descansa sobre les seves espatlles.
Similar articles
Trending Now