Mi primer Menú
Buenas que tal, despues de varios dias sin poder publicar nada por cuestiones laborales vengo a traerles este pequeño tutorial de un menu muy basico
Les voy a enseñar como crear un menu para su sitio web este menu va a ser basico no sera muy complicado asi que no se desesperen, este menu no tendra submenus asi que no habra problema
El por que esta catalogado sobre HTML es por que los efectos que modificaremos seran directamente o con classes espesificas a cada etiqueta
en esta ocacion utilizaremos hojas de estilo (o CSS3) por aparte del documento con la regla @import 'nombre.css';
lo primero que tenemos que hacer es crear un documento o un archivo de texto con la exrtencion "nombre.css" para que lo pueda reconocer o utilizar la plantilla descargable de HTML5 en la seccion de descargas, editaran el documento que esta dentro de la carpeta css, para poder ver los resultados tendran que dar doble clic en el archivo "index.html" y darle F5 para actualizar los cambios, tambien tienen que editar el archivo index.html que biene en el archivo
El primer paso es definir la lista que se va a utilizar y el contenedor, todo va entre la etiqueta body que es el cuerpo de nuestra pagina.
<li><a href= "#">Inicio</a></li>
<li><a href= "#">Prueba 1</a></li>
<li><a href= "#">Prueba 2</a></li>
<li><a href= "#">Prueba 3</a></li>
</ul>
list-style :none;/* Primero desaparesemos las viñetas */
}
list-style :none;
position :relative;
display :flex;
text-style :none; /* le quitamos la configuracion de los links */
}
list-style :none;
position :relative;
display :flex;
text-style :none;
}
ul.menu li {
float :left; /* los ponemos de forma horizontal */
margin-left :10px;/* controla el espacio entre el menu */
}
Hasta Aqui terminarian las configuraciones para un menu sencillo pero si ustedes quieren algo mas avanzado tendrian que agregarle las propiedades :hover y las modificasiones para que se vea mucho mas interactivo.
list-style :none;
position :relative;
display :flex;
text-style :none;
text-decoration :none;
}
ul.menu li {
float :left;
margin-left :10px;
}
ul.menu li a {
color :#000; /* Maneja el color de las letras */
margin-left :10px;/* controla el espacio entre el menu */
text-decoration :none;/* le quitamos la decoracion a las letras */
padding :10px 12px;/* la primera maeja el largo y la segunda maneja el ancho de nuestro menu */
display :block;
}
ul.menu li a:hover {
background :#000; /* Maneja el color del fondo del menu */
border-radius :0 35px 0 35px;/* maneja el borde redondiado del menu */
color :#fff;/* maneja el color de las letras del menu */
}