JMiur [E]

La idea de tutorialzine.com no es sólo minimalista proque así llaman a este tipo de menú sino porque permite entender cómo funcionan determinadas propiedades CSS y cómo podemos combinarlas.

El HTML es sencillo y no tiene diferencias con tantos otros; es una lista a la que identificamos con un ID y en la que en cada item incluimos un enlace cuyo texto está dentro de otra etiqueta:
<ul id="navigationMenu">
  <li>
    <a class="home" href="#">
      <span>Home</span>
    </a>
  </li>
  .......
</ul>
¿Por qué usar la etiqueta SPAN y no poner directamente el texto? Justamente para poder combinar propiedades.

Necesitamos una imagen que usaremos de fondo y que será un sprite es decir, una serie de botoncitos todos iguales que se unen en una sola imagen; de esa manera, la carga será más rápida, usamos una sola imagen en lugar de varias. Para aplicarles un fondo a cada item de la lista, estos deben estar dimensionados y se deben tener  la propiedad overflow:hidden


En este caso, de izquierda a derecha, el primer botón estará en la posición 0, el segundo comienza en el pixel 38, el tercero en el 76, el cuarto en el 114 y el último en el 152; para calcular eso, simplemente vamos sumando anchos. Lo mismo ocurre cono los de abajo así que podemos usar background-position para posicionar el fondo y de ese modo, mostrar solo un pedacito de la imagen, basta usar esos valores colocándolos como negativos lo que desplazará la imagen original:


Empezamos entonces con las definiciones básicas; a los items de la lista se les da un tamaño fijo y se los separa un poco entres si; como las etiquetas LI son etiquetas de bloque, se verán una debajo de la otra:
#navigationMenu li {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}
Cada item contiene un enlace que siempre usa la misma imagen y al que transformamos en bloque para poder dimensionarlo :
#navigationMenu a {
  background:url(URL_imagen) no-repeat;
  display:block;
  height:39px;
  position:relative;
  width:38px;
}
Ahora, definiremos el SPAN es decir el texto en si mismo al que posicionaremos de manera absoluta dentro del enlace y usando left, lo pondremos justo donde termina el botón pero, lo mantendremos oculto colocándole cero a su ancho:
#navigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  /* le agregamos cualquier propiedad para las fuentes */
  color: #FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px #000;
}
Y ahora los efectos hover que funcionarán cuando ponemos el cursor encima:
#navigationMenu a:hover {
  text-decoration:none;
}
Le indicamos que, cuando pones el cursor sobre la etiqueta A, se muestre el contenido del SPAN que está adentro de ella:
#navigationMenu a:hover span {
  overflow: visible;
  padding: 0 20px;
  width:auto;
}
Sólo falta ubicar los botones de cada item que hemos identificado con clases así que:
#navigationMenu .home { background-position:0 0; }
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span { background-color:#7DA315; }

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{ background-color:#1E8BB4; }

#navigationMenu .services { background-position:-76px 0; }
#navigationMenu .services:hover { background-position:-76px -39px; }
#navigationMenu .services span{  background-color:#C86C1F; }

#navigationMenu .portfolio { background-position:-114px 0; }
#navigationMenu .portfolio:hover{ background-position:-114px -39px; }
#navigationMenu .portfolio span{ background-color:#D0A525; }

#navigationMenu .contact { background-position:-152px 0; }
#navigationMenu .contact:hover { background-position:-152px -39px; }
#navigationMenu .contact span{ background-color:#AF1E83; }


En el ejemplo original puede verse que también hay alguna propeidad de animación que sólo funcioanrá en Chrome/Safari así que por ahora, hasta que algunos otros navegadores comiencen a utilizarla, me abstengo de ella pero, puede agregarse sin problemas.

12 comentarios:

Unknown  

Hola jmiur que tal ,primero que nada muy feliz año ,apenas se lo digo porque ya tenia tiempo que no pasaba poraqui;y bueno pues una duda que me esta dificultando mucho mis trabajos de hacer blogs,porfavor si tiene la amabilidad de ayudarme.....Este es mi problema:
Resulta que hace ya algunos dias ,he tratado de agregar o editar un gadget en firefox y en primera no se habre la miniventana con click izquierdo para crear editar gadget,entonces tengo que darle al enlace click derecho y abrirlo en otra pestaña,y solo asi funcionaba ,pero como le digo ya hace algunos dias trato de abrir el gadget en otra pestaña y me aparece esto:

bX-y67gro
Información adicional
blogID: 4178465820961809241
host: www.blogger.com
uri: /rearrange
y pues si me molesta ,aunque si habre bien estas miniventanas y enlaces en Internet explorer y crome ,pero la verdad ,me gusta trabajar con firefox ,pues porque es un poco mas rapido
porfavor ayudame ,gracias y saludos
http://mexico-greenzoner.blogspot.com

Responder
JMiur  

No tengo idea qué puede ser. Borra la caché del explorador y prueba otra vez; si eso no lo resuelve, revisa si hay alguna extensión que estés utilizando que pueda causar problemas; para verificar eso último, utiliza el Modo Seguro de Firefox.

Responder
Unknown  

Original Jmiur :P

Responder
Unknown  

Jmiur vaya eres increible¡lo ejecute en modo seguro y todo funciona bien pero ahora que configuro o borro ,estos son mis complementos
greasemonkey
conduit engin
Avg safe search
adblock plus
autofill forms
tenchis tv toolbar
gracias espero tu respuesta

Responder
Gon  

Muy bueno Jmiur, sencillo pero elegante.

Responder
Matías Aravena  

Muy bien JMiur, todo bien explicado. Se ve fácil, cuando tenga un poco de tiempo veré qué tal es para aplicarlo en mi blog.

Saludos!

Responder
JMiur  

mexico:
Pués lo que yo haría entonces es entrar en Firefox de modo normal, deshabilitar las extensiones y verificar que todo funciona bien, esto, luego de borrar la caché.
Si todo anda bien (debería andar) habría que ir habilitando las extensiones una por una hasta verificar cual es la que está "molestando"
Si usas un tema, también es posible que sea el tema el que perturbe, en ese caso, deshabilitalo tambien y comienza desde cero habilitando cada cosa paso a paso.
Recuerda que es muy importante que borres la cache del navegador para evitar que el error se repita aunque ya no exista.

Responder
Unknown  

grandioso jmiur ,perdona tantas connsultas pero , parece que me llueve sobre mojada,je pues ahora mira en una parte de mi header y en unos como rectangulos que se hayan debajo de las entradas(que no son los anuncios)
aparece al navegar con internet explorer unos como textos o imagenes que dicen interntet explorer no puede mostrar la pagina;y la verdad es que no he puesto ningun codigo ,y como te digo solo es en internet explorer ;gracias jmiur y espero tu respueta ;saludos ;-)
http://mexico-greenzoner.blogspot.com

Responder
Andres  

Me parece muy interesante ese menú.
Tengo una duda: es posible convertir ese menú vertical en uno horizontal?

Responder
Karla Castañeda  

Hola JMiur

Ooh si, me gusta...ya lo había visto y me parecío interesante, incluso lo probé en un blog de pruebas, solo que solo utilicé tres íconos en lugar de los 5; en Chrome se vé mucho mejor por las propiedades CSS3 que tiene...me gustó para implementarlo con los íconos de las redeas sociales...

Que tengas un estupendo día JMiur!

Responder
JMiur  

mexico:

Lo que te está mostrando IE es lo mismo que ocurre con otros navegadores aunque no lo muestren. Eso de no poder cargar se trata de algún tipo de aviso de Adsense que está en el header.
Lo que se ve es que saltan varios errores y es posible que uno de ellos genere la catarata de errores posteriores.

El primero es que hay un script que no existe:
http://www.revolutiontwo.com/demo/church/wp-content/themes/church_10/javascript/date.js
no sé qué está intentando ejecutar; sea lo que sea, habra un error, deberías buscar el archivo origianl, subirlo a otro lado o bien eleimnar eso que se supone que hace.

Luego, hay una funcion llamada function agregar(){ que está mal escrita o a quedado mal escrita; no sé que dice en el gadget porque sólo veo el codigo fuente.

Se ven otros errores pero puede ser que sean el resultado de esos dos; empieza tratando de corregir esos y lo vemos otra vez.

m3nd3z:
Posible es, no sé si tiene sentido porque deberías cambair muchas cosas.

Responder
Unknown  

hOLA Jmiur gracias por tu ayuda parece que se soluciono el problema
,ya no elimine ningun script ni nada ,pero en efecto eran unos codigos planos de adsense que los habia puesto en mi antigua plantilla pero se quedaron en esta.Muchas gracias y saludos ;nos estamos comunicando :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR