Cómo entender código de menú desplegable: tutorial anterior

¡Hola!

En CBA pregunté qué es lo que les gustaría que explicara y Naty me pidió lo siguiente.

Era respecto a entender lo que significaba el código del menú desplegable con menú integrado

Como verán hay comentarios sobre qué es cada cosa en algunas líneas. Paso a explicar:

¿QUÉ SON LOS COMENTARIOS?
Es el texto que ven entre */(comienzo) */(salida)
Al estar entre esos caracteres (tomen el asterisco y la barra como si fuera uno solo), le están indicando al código que no tome en cuenta aquello. No afectará al código de ninguna manera. Pero deben tener cuidado y no borrar los */
Como si fuera solo una anotación que ustedes hacen. Es común que se haga esto ya que te facilita encontrar más rápido las cosas.

¿QUÉ ES PADDING?
El atributo padding es el que crea un espacio por dentro de la caja a la que se aplica, impiendo, por así decirlo, que se toque su borde. Se suele usar en el blockquote o cuando le colocan recuadro a sus comentario de forma agregada. Pero por predefinición, ya tiene este tipo de atributos el código html, caso contrario estaría todo amontonado. Se le suelen llamar valores de relleno. Puedes utilizarlos así:


De esta manera:

Esto creará una distancia de 1 píxel por arriba, de 2 píxeles por la derecha, de 3 píxeles por abajo y de 4 píxeles por la izquierda.

Por si no saben lo que es un atributo en código html, es aquello que define el comportamiento de un elemento. El padding le indica al código que el elemento tendrá una distancia determinada en cada uno de sus lados.

El background está puesto en código hexadecimal. Yo utilizo esta página cuando quiero averiguar qué color es determinado código: Color Hex

Ahora bien, border hace referencia a los bordes y si se coloca un guion al lado (border-...) es que se le hará una modificación a dicho borde. En este caso, border-radius indica que serán bordes redondeados y también señala el radio que tendrán. Eso es a gusto de cada uno, solo recuerden tener cuidado con no eliminar el caracter ;

¿QUÉ ES FLOAT?
Esto le indica al código que el elemento flota en determinada posición. Es decir, en este caso está flotando a la izquierda el menú. Esto se coloca ya que el menú estará compuesto de manera tal que del lado izquierdo estén las páginas y del derecho el buscador incluido.

font-family hace referencia a la fuente de letra que tendrá el menú y luego vienen las especificaciones del tipo: tamaño y si será negrita o itálica.

¿QUÉ ES LIST-STYLE?
Es el diseño que tendrá la lista, en este caso dice none por lo tanto no tendrá modificación alguna.

¿QUÉ ES UL Y LI?
Esto hace referencia a las listas, lo ven comunmente cuando modifican el código html con respecto a las páginas del menú. Verán que al al comienzo dice cada una <li>. Ahora bien, <ul> hace referencia a una lista anidado. ¿Eso qué quiere decir? Que es una lista dentro de otra y es eso lo que queremos del menú de este estilo, que tenga subcategorías.

A estos mismos se les puede aplicar atributos del tipo float, padding y otros más. Pero como notaran, en el código los valores que contienen "algo" son float y border-radius. Eso es porque no queremos ningún tipo de espaciado en este ejemplo.

¿QUÉ ES DISPLAY?
Aquí le estás indicando la orientación que tendrá la lista. El valor block indica que serán una bajo la otra.
Por ejemplo:

¿Qué pasaría si en lugar de ser block es inline?

¿QUÉ ES POSITION?
Positión (posición) tiene seis valores de salida: static, fixed, relative, absolute, initial y inherit.
Un elemento static(estático) es valor por defecto. Esto no está ofreciendo ninguna información de dónde está posicionado.
Un elemento fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página.
Relative se comporta de manera similar a static a menos de que le coloques atributos para modificarlo.

Saqué información de esta página para que lo entiendan mejor ya que aunque no lo parezca es una de las cosas más complicadas de CSS.

¿QUÉ ES HOVER?
El código tiene un comentario que lo indica, es lo que pasa cuando se pasa el mouse sobre el elemento. Hay muchos efectos que he visto en varios blogs y que son muy originales.

Como dejé en claro en los tutoriales de Modificando el diseño de una plantilla prediseñada, text-align hace referencia a la "posición" del texto, algo así como cuando escriben una entrada y le indican que quieren que el texto esté a la izquierda, centrado, a la derecha o justificado.

¿QUÉ ES TEXT-DECORATION?

En el menú que estamos analizando dice none por lo tanto no tiene ninguna modificación.

AHORA PASAMOS A LA CAJA DEL BUSCADOR

Verán que los tipos de valores no cambian demasiado.

Si tienen alguna duda me dejan un comentario.

¿QUÉ ES MARGIN?
Hay dos propiedades que establecen la separación de los elementos: margin y padding. Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no lo son. Podríamos decir que margin es la separación de un elemento de otro y padding es el relleno, la separación entre un elemento y aquel que lo contiene.