Menus: menu horizontal (html, css)
Hola ya tenia tiempo que no posteaba, hoy les dejo un ejemplo básico de menu simple horizontal en html, este ejemplo es con puro css , este será el primero de varios ejemplos que les voy a compartir para crear menus.Espero que les sea de utilidad, yo se que actualmente hay muchisimos estilos y hasta algunas páginas donde puedes crear tus menus y exportarlos para agregarlos a tu web, pero la mayoria de las veces entre más simple más profesional y hces menos pesada tu página, así que manos a la obra.
El resultado final será algo como la siguiente imagen:
Bueno comensaremos por hacer una lista co la etiqueta ul -> li la cual pondremos dentro de un div al que le pondremos las clase "menu1" la cual crearemos más adelante, el código sería el siguiente:
<html>
<head>
<title>Ejemplo de menu: Menu horizontal</title>
<style>
body{
width:100%;
margin:0;
heigth:100%;
}
</style>
</head>
<body>
<div class="menu1">
<ul>
<li>Opcion1</li>
<li>Opcion2</li>
<li>Opcion3</li>
<li>Opcion4</li>
</ul>
</div>
</body>
</html>
Si corremos nuestro código la ista se verá como la siguiente imagen.
Ahora vamos a darle el estilo, dentro del <style> vamos a crear la clase menu1 ponemos . (el punto indica class y el # indica el id) y el nombre de la clase ".menu1" despues ponemos ul que indica que el ul que encuentre dentro del div con la clase va a tener las siguiente caracteristicas:
un width del 100% y 0 de margen al top y automatico para los demás sentidos.
Despues pondremos .menu il {} que indica que todos los il dentro de la clase menu1 tendran las siguietes caracteristicas: display:inline (hará que se visualicen en linea horizontal), le pondremos un padding de 10px; y un border en color violeta obscuro y un borde de un grosor de 1px;
El código quedaría así:
<html>
<head>
<title>Ejemplo de menu: Menu horizontal</title>
<style>
body{
width:100%;
margin:0;
heigth:100%;
}
.menu1 ul{
margin:0 auto;
width:100%;
}
.menu1 li{
display:inline;
padding:10px;
border-right: 1px solid #A10051;
}
</style>
</head>
<body>
<div class="menu1">
<ul>
<li>Opcion1</li>
<li>Opcion2</li>
<li>Opcion3</li>
<li>Opcion4</li>
</ul>
</div>
</body>
</html>
Podemos ver que ya va tomando forma, ahora solo le aplicamos un poco más de diseño para que se vea más bonito y listo.
al .menu1 ul {} le agregamos un padding:de 10px; y un color de fondo violeta obscuro como el del borde del "li" al .menu1 li {} le agregamos el color del texto en blanco con un grosor normal de 400 y adeás agregamos una nueva case .menu1 li:hover {} esta clase se activará cuando el usuario pase el mouse por alguna de las opciones. A esta clase le ponemos de fondo un tono violeta más claro, el texto más grueso y le agregamos el efecto de subrayado(text-decoration:underline), tambien le ponemos el efecto cursor:pointer para que el puntero del mouse cambie a una manita.
El código quedaría de la siguiente forma:
<html>
<head>
<title>Ejemplo de menu: Menu horizontal</title>
<style>
body{
width:100%;
margin:0;
heigth:100%;
}
.menu1 ul{
background-color:#A10051;
margin:0 auto;
width:100%;
padding:10px;
}
.menu1 li{
display:inline;
border-right: 1px solid #A10051;
color:#FFFFFF;
font-weight:400;
padding: 10px;
}
.menu1 li:hover{
background-color:RGB(198,0,99);
border-right: 1px solid RGB(225,0,113);
font-weight:600;
text-decoration:underline;
cursor:pointer;
}
</style>
</head>
<body>
<div class="menu1">
<ul>
<li>Opcion1</li>
<li>Opcion2</li>
<li>Opcion3</li>
<li>Opcion4</li>
</ul>
</div>
</body>
</html>
Sería todo, trataré de subir pronto un ejemplo con imagenes de fondo o sombreado, en realidad es muy fácil es cuestion de ir jugando con los efectos que css nos ofrece.
Cabe mencionar que hay muchas maneras de hacer menus pero esta es de las más sencillas y que además se visualiza igual para cuaquier navegador . Practicalo cambia el grosor, los colores, etc, verás que es muy sencillo.
Espero que este sencillo menu te sirva, no te olvides de dejar tus comentarios
"Programar no tiene que ser tan difícil como parece...."
Your Affiliate Money Making Machine is waiting -
ResponderEliminarAnd making money online using it is as simple as 1--2--3!
Here are the steps to make it work...
STEP 1. Input into the system what affiliate products you intend to promote
STEP 2. Add some PUSH BUTTON TRAFFIC (this LITERALLY takes 2 minutes)
STEP 3. Watch the affiliate products system explode your list and sell your affiliate products all by itself!
Are you ready to start making money???
You can test-drive the system for yourself risk free...