Menú con css y html

@charset "utf-8";
#menu{
 background:#f9f9f9;
 border:solid 1px #DEDEDE;
 border-radius:3px;
 width:180px;
 padding:5px;
 }
menu{
 color:#06F;
 margin:0px;
 background:linear-gradient(#fff 0%,#dedede 100%);
 background:-moz-linear-gradient(#fff 0%,#dedede 100%);
 background:-ms-linear-gradient(#fff 0%,#dedede 100%);
 background:-o-linear-gradient(#fff 0%,#dedede 100%);
 background:-webkit-linear-gradient(#fff 0%,#dedede 100%);
 border:solid 1px #f9f9f9;
 border-radius:5px;
 padding:5px;
 }
menu:hover{
 background:linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);
 border-radius:3px;
 border:solid 1px #333;
 color:red;
 }

Menú con css y html

En esta nueva entrada vamos a ver cómo crear menú con css y html para nuestro páginas web, el propósito de este pequeño tutorial es que aprendamos a crear menú con css y html con un aspecto dinámico y agradable para el público que visita nuestro sitio web, Tambien tenemos un menú con html5 y css3 que si te interesa puedes darle un vistazo.

Para crear el menú con css y html que necesitamos?

Es simple como siempre un editor de texto puede ser hasta el simple bloc de notas de Windows o cualquier otro editor que prefieras, también para nuestro menú es necesario que tenga ganas de aprender a crear algunos menú que aunque no te gusten pero puedes a prender a crearlo y así hacer los tuyos propios sin complicaciones.

Que aprenderemos en este pequeño tutorial de Menú con css y html?

  1. Aprenderemos entre otras cosas a:
  2. Crear menú vertical con css y html.
  3. Crear menú horizontal con css y html.
  4. Usar nuestra creatividad.
  5. Darle dinamismo a nuestro menú.
  6. Y lo más importante aprender a manipular el código html con css.

 Empezando a crear nuestro primer menú con html y css

Lo primero que vamos a crear son 2 archivos le puedes poner el nombre que quieras yo en lo particular les voy a llamar menú-con-css-y-html.html y para el archivo css también el mismo nombre menú-con-css-y-html.css entonces con esto claro empecemos con el código html.

Lo primero es crear nuestra estructura html y enlazar el archivo que contendrá nuestro código css y los div correspondiente para nuestro primer menu.

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Menu con css y html</title>
<link rel="stylesheet" href="menu-con-css-y-html-css.css" type="text/css" />
</head>
<body>
<h2>Menú con css y html</h2>
<div id="menu">
 <menu>menu 1</menu>
    <menu>menu 2</menu>
    <menu>menu 3</menu>
    <menu>menu 4</menu>
    <menu>menu 5</menu>
</div>
</body>
</html>

Si te fijas lo que hemos hecho es crear una etiqueta div con un identificador menú al cual llamaremos desde nuestro archivo css, y las etiquetas menú del propio html5 que vuelvo y te repito si no estás usando navegadores actualizados no podrás ver bien el menú.

Ahora nos dirigimos al archivo que contendra nuestro codigo css en este caso menú-con-css-y-html.css y escribimos el siguiente codigo css.

@charset "utf-8";
#menu{
 background:#f9f9f9;
 border:solid 1px #DEDEDE;
 border-radius:3px;
 width:180px;
 padding:5px;
 }
menu{
 color:#06F;
 margin:0px;
 background:linear-gradient(#fff 0%,#dedede 100%);
 background:-moz-linear-gradient(#fff 0%,#dedede 100%);
 background:-ms-linear-gradient(#fff 0%,#dedede 100%);
 background:-o-linear-gradient(#fff 0%,#dedede 100%);
 background:-webkit-linear-gradient(#fff 0%,#dedede 100%);
 border:solid 1px #f9f9f9;
 border-radius:5px;
 padding:5px;
 }
menu:hover{
 background:linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);
 border-radius:3px;
 border:solid 1px #333;
 color:red;
 }

Tal vez te estara preguntando pero y todo ese codigo css, jejeje bueno si te fijas hay una linea de codigo que esta repetida varias veces pero con atributos diferentes esto es para los diferentes navegadores o sea los que mas se utilizan para que nuestro codigo pueda verse bien en cada uno de ellos como son Firefox,Chrome,IE,Opera para eso colocamos esas lineas de codigo que son las que hacen mas voluminoso nuestro codigo css.

background:linear-gradient(#fff 0%,#dedede 100%);
background:-moz-linear-gradient(#fff 0%,#dedede 100%);
background:-ms-linear-gradient(#fff 0%,#dedede 100%);
background:-o-linear-gradient(#fff 0%,#dedede 100%);
background:-webkit-linear-gradient(#fff 0%,#dedede 100%);

El resultado de este menu tiene que ser el siguiente en caso de que no lo veas bien entonces cambia de navegador yo estoy utilizando forefox 18 y Chrome en su ultima version.

Aspecto de nuestro primer menu con css y html.

Ahora imagínate que quieres ese mismo menú pero en modo Horizontal que puede servir para una botonera, para eso vamos modificar el código del archivo menú-con-css-y-html.css el cual contiene nuestro código css.

Con la modificación correspondiente para conseguir el efecto que queremos quedaría el código css de esta forma.

#menu{
 background:#f9f9f9;
 border:solid 1px #DEDEDE;
 border-radius:3px;
 width:600px;
 padding:5px;
 }
menu{
 color:#06F;
 display:inline-block;
 margin:0px;
 background:linear-gradient(#fff 0%,#dedede 100%);
 background:-moz-linear-gradient(#fff 0%,#dedede 100%);
 background:-ms-linear-gradient(#fff 0%,#dedede 100%);
 background:-o-linear-gradient(#fff 0%,#dedede 100%);
 background:-webkit-linear-gradient(#fff 0%,#dedede 100%);
 border:solid 1px #f9f9f9;
 border-radius:5px;
 width:100px;
 padding:5px;
 }
menu:hover{
 background:linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);
 border-radius:3px;
 border:solid 1px #333;
 color:red;
 }

Y el menu cambiaria entonces y ahora estara de forma Horizontal y su apariencia es la misma pero en forma horizontal como aparece aqui.

Y ahora tal vez te estará preguntando pero y como lo hiciste si esta el mismo código css jejeje bueno si te fijas hemos modificado 2 línea de código y agregamos una línea más a las etiquetas menú, lo primero que hicimos fue cambiar el tamaño del div contenedor antes era de 180px ahora lo pusimos de 600px, también le pusimos un tamaño a los botones que antes no tenía, y por ultimo le decimos que se alinea todo horizontalmente con display:inline-block y asi estaría nuestro código css completo.

En otra próxima entrada vamos a ver cómo crear menú con lista y aprenderemos a darle vida para que se oculten y vuelva a aparecer, en este pequeño tutorial usamos la etiqueta <menu> &lt/menu> para hacerlo. Y aunque no es recomendable vimos como se pueden hacer lo importante es aprender a manupularla con css y tener la idea de como hacer un menu.

Gracias por leer el tutorial y hasta la proxim..

Comments

  1. By Anónimo

  2. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.