Informática, Software
Como facer un menú CSS desplegable
Hoxe imos considerar a cuestión de "como fago para crear un menú CSS desplegable?". Debe dicir inmediatamente que este elemento farase sen chamar calquera fondos adicionais. É dicir, o menú será creado só con CSS e HTML.
formación
Para entender completamente o que está nel no artigo, precisa un pouco de familiarizarse co material teórico. Pero se está familiarizado con pseudo-clases, pode saltar este parágrafo. Así, para crear un menú CSS desplegable vertical, necesitamos un elemento como «: hover». O pseudo «: hover» pode ser atribuído a calquera etiqueta HTML. Permite que para definir o momento en que un elemento Pase o rato. Por exemplo, temos nomeado propiedade: «a: hover {color: red;}». Esta entrada significa que cando pasa o rato queda vermello sobre o contido de calquera tag. É importante ter en conta que este pseudo elemento tamén é inativada. By the way, «: hover» relacionou elementos semellantes. Pero a partir deste crearemos menú desplegable pseudo CSS.
instrución
En primeiro lugar, imos entender o que é un menú desplegable. Baixo esta definición fica unha morea de diferentes métodos de construción de diferentes esquemas. Neste caso, imos analizar unha estrutura composta de varios elementos constantemente visibles e varios adicionais (oculto). Imos acabar coa teoría e comezar a practicar.
- Creamos o esquema do noso menú. Para iso, etiquetaxe código HTML. Crear unha lista aniñada:
-
- < / ul>. Algo así debe parecer co seu menú desplegable. CSS para intervir despois. Neste caso, a lista principal consiste en tres áreas principais e dous pechados.
- Agochar o submenú. Para iso, utiliza unha folla de estilo, definir as seguintes propiedades: ul ul {display: Ningún;} Isto eliminará os elementos da segunda lista de pantalla.
- Crear un CSS menú desplegable da lista principal. As follas de estilo en cascada escribir a seguinte regra: ul li: hover ul {display: block;}. Esta entrada significa que cando o rato está sobre o elemento lin, que está situado na lista ul aparece na pantalla ul (anexo). A primeira vista, este esquema pode parecer complicado e confuso. Pero, en realidade, todo é moi simple.
- Use esta disposición se inserindo as etiquetas
- o seu contido. Pode cambiar o número de elementos da lista.
cambios decorativas
Así que o deseño do menú principal está listo, pode proceder ao rexistro. Probablemente, moitos primeiro disposto a se librar dos marcadores que indican o elemento da lista. Isto faise mediante un único CSS propiedade, é dicir, o list-style-type. Debe engadir a seguinte entrada: li {list-style-type: none;}. Logo, pode introducir o marco e facer o fondo. A bordo e fondo axudar con iso. Quizais algúns non van gusta do menú desplegable aparecerá como unha lista adicional, empurrando os mesmos elementos básicos. Para solucionar isto, pode posiciona-lo. Para iso, follas de estilo en cascada escribir a seguinte entrada: ul ul {position: Absolute; left: 15px; dereita: 15px; superior: 15 píxeles; bottom: 15px;}. Por suposto, os valores que vai empregar o seu propio. Dependendo de onde queres ver os menús desplegable, CSS ofrecerá máis recursos que poden engadir varios efectos e decorar as nosas listas.
conclusión
Unha vez máis, paga a pena observar a construción do esquema do menú. Para asignar as regras CSS utilizados neste caso incorporado valor, por exemplo, ul ul. Se no documento para atender outra estrutura análoga, pode haber grandes problemas. Nesas situacións, ten que usar un propósito específico, por exemplo, selectores ou id-IDs. O menú desplegable Esquema artigo anterior é designado para familiarizarse o deseño xeral. O resto do traballo repousa sobre os seus ombreiros.
Similar articles
Trending Now