JMiur [E]

Menu Descriptions es otro gran experimento de Mike Cherim. Sólo requiere CSS y se adapta bien a cualquier navegador.

Se trata de dos columnas, la de la izquierda es un menú y la de la derecha cierto contenido. Al colocar el cursor sobre cada item del menú, este se expande superponiéndose al contenido. Pero, mejor es verlo en acción:

Ejemplo Contenido

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et velit in ipsum convallis sagittis. Nunc eu ipsum. Nullam eget velit. Sed molestie erat in turpis. Aenean adipiscing elit interdum elit. Integer lobortis sollicitudin odio. Maecenas augue eros, blandit non, ultrices non, blandit quis, pede. Nullam tempus, velit eu pharetra rhoncus, odio ligula venenatis neque, eu ornare nisi mauris nec ligula.

Morbi convallis consequat dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lorem orci, sodales at, ornare eu, tristique sed, enim. Curabitur placerat faucibus velit. Quisque dui sapien, fringilla nec, iaculis ut, consequat eget, libero. Praesent tempor metus nec enim. Duis mollis vehicula nisi. Donec ornare.


El HTML lo construimos con este modelo:
<div id="exp_content">
<div id="cmd_wrapper">
<div id="cmd_content">
<h2>Contenido</h2>
<p>Lorem ipsum dolor sit amet ...</p>
</div>
<div id="cmd_sidebar">
<h2>Menú</h2>
<ul id="cmd">
<li><a href="#"><strong>Enlace 1</strong> <span>Aquí va un texto explicativo del enlace 1 ...</span></a></li>
<li><a href="#"><strong>Enlace 2</strong> <span>Aquí va un texto explicativo del enlace 2 ...</span></a></li>
<li><a href="#"><strong>Enlace 3</strong> <span>Aquí va un texto explicativo del enlace 3 ...</span></a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
Todo está incluido en en dos DIVs, uno externo exp_content y otro interno cmd_wrapper que es la mejor forma de lidiar con las flotaciones y evitar problemas en Internet Explorer.

Dentro de ellos hay otros dos DIVs que flotan, uno a la derecha (cmd_content) y otro a la izquierda (cmd_sidebar). El primero es un bloque normal con cualquier contenido y el segundo es el que tendrá las propiedades para expandirse y que serán las que se definan para la lista (cmd).

Este es el CSS necesario:
<:style type='text/css'>:

#exp_content {
height: auto;
margin: auto;
}
#cmd_wrapper { /* el contenedor centrado y con un ancho fijo */
margin: 0 auto;
width: 610px;
}

#cmd_content { /* el bloque derecho con un contenido cualquiera */
background-color: #color;
display: inline;
float: right;
width: 450px;
}
#cmd_content h2, #cmd_sidebar h2 { /* los títulos */
margin: 5px;
[... cualquier otra propiedad ...]
}
#cmd_content p { /* los párarfos */
margin: 15px;
[... cualquier otra propiedad ...]
}

#cmd_sidebar { /* el bloque izquierdo con el menú */
display: inline;
float: left;
width: 150px;
}

ul#cmd { /* el bloque con la lista expandible */
list-style-type: none;
margin: 5px 0;
}
ul#cmd li { /* cada item de la lista */
background: none;
list-style-type: none;
padding: 0;
margin-bottom: 5px;
}

ul#cmd a { /* cada item de la lista es un enlace que permite expandirla */
display:block;
cursor:pointer;
height: 4em;
padding: 5px;
position:relative;
width:140px;
text-decoration:none;
[... propiedades de las fuentes, colores, fondos, etc ...]
}
ul#cmd a span { /* los items expandidos */
cursor: pointer;
display: block;
height: 4em;
left: -9000px;
padding: 5px 0;
position: absolute;
top: -9000px;
width: 400px;
[... propiedades de las fuentes, colores, fondos, etc ...]
}
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {
[... propiedades optativas del efecto hover ...]
}

/* esto es lo que hace que se expanda cada item */
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
left :100px;
top:-1px;
}

</style>

35 comentarios:

Mon  

Genial. Pero... ¿como conseguiste esas pestañitas que hay al final de la pagina ? Lo de estadisticas...enlaces, directorios.... Me encantan!!!!

Responder
Gem@  

Que maravilla...

Responder
Christopher  

Que puedo decir, solo que es genial.

Responder
Usuario10  

Wuau muy bueno, estoy pensando como implementarlo en mi blog.

Saludos JMiur.

Responder
Sr. D. Javier de García  

Hola, JM! Por lo general, tus posts me parecen de lo más interesante. Incluso en alguna ocasión me han sido de utilidad a la hora de tunear mi blog (te estaré eternamente agradecido!!!:D). Pero tengo un problemilla: me suelo quedar atascado a la hora de insertar los modelos de html que nos facilitas... ¿Hay alguna regla general o algo por el estilo? ¿O cada cosa tiene su lugar concreto?

Gracias!!!

Responder
Anónimo  

:P qué bello ohhh por ahora juro que no intentaré hacerlo, iré buscando mejoras...besitos!!!

Responder
Anónimo  

Juaaa. Esto si que se ve bein. Me gusta mucho!.

Responder
Anónimo  

Bravo!!!!!!!!

Justo era lo que estaba buscando, ahora veré como las uso para un site... e incluiré algo de 'Moo Tools' :D

Gracias Master

Responder
Javier Cercas Rueda  

Hola JMiur, tengu un problema importante. No se me carga bien la plantilla. No aparecen los títulos de los elementos de las barras laterales ni el recuadro de la fecha. Queda muy fea, justo ahora que he personalizado un poco el dominio.

Hace poco cambié a www.pasenylean.com pero no veo lógico que pueda ser por esto.

En fin, si se te ocurre algo. Gracias de antemano.

Responder
Prof. Cristian E. Moyano  

Simplemente im..pre..sio..nan..te!! sos un capo!

Responder
Gem@  

Veo que el problema de los seguidores es generalizado :o

Responder
Salvator  

Saludos Jmiur, te escribo para despejarme un inconveniente que no puedo solucionar en mi blog, estuve intento implementar las modificaciones a la fecha de las entradas tal cual lo explicas tu aquí en tu blog y tomando también alguans cosas del blog de Gem@ pero no he podido hacer que se vean del todo bien. Estos son mis problemas: En firefox logro que la fecha se visualize como quiero pero no logro que se vean en todas las entradas, solo aparece la primera. En IE tuve inconvenientes a la hora de mostrar la fecha como quería.

Te pido disculpas si posteo esto y no tiene mucho que ver con esta entrada, tu ayuda me sería de mucha ayuda porque estuve renegando toda la mañana y no puede solucionarlo.

Saludos
Diego

PD: la dir de mi blog es:
http://www.legiochristi.blogspot.com/

Responder
JMiur  

Es una idea extraordinaria y muy sencilla. No sé si será sencillo de aplicar pero vale la pena experimentar un poco.

ZonZo:
No hay reglas proque cada caso es particular. En términos generales, el CSS va entre <b:skin> y </b:skin>, los scripts antes de </head> y el HTML en un post aunque allí, siempre debe ser escrito en una sola línea.

Gem@:
Es así. Parece ser algo general y Blogger ha informado del tema. Están de cambios . Ya sabes como es eso, tocan algo y se desarma todo :D

Didacvs:
Por lo que se ve en en el código fuente, el script no se ejecuta la segunda vez. El problema no puedo verlo online pero, antes que nada, fijate en este post a ver si esa idea funciona. Sino, debería ver la plantilla.

Javier Cercas Rueda:
Lo de los títulos es extraño porque tampoco veo la imagen en Firefox. Está allí, puedeo descargarla pero no se muestra. El código de es aparentemente correcta. Yo, probaría subir esa imagen a ImageShack aunque sea provisoriamente para ver si se resuelve el tema. Para la fecha, te diría lo mismo que que a Didacvs. Fíjate en este post.

Responder
JMiur  

Me olvidaba :$ Para el calendario, pueden ver este otro post.

Responder
Salvator  

Hola Jmiur, lamento tener que molestarte nuevamente pero estuve viendo el post que me dijiste e intente aplicar el script que allí aparece pero no pude lograrlo, la fecha no aprace en todos los post y encima me sale "undefined". Te envio la plantilla para que cuando tengas tiempo la veas un poco a ver si me podes ayudar. Desde ya muchas gracias por tu tiempo.

Saludos

Responder
Salvator  

PD: Cambie la direccion del blog a http://www.legioncristo.blogspot.com/

Responder
Christopher  

Hola JMiur me gustaria saber si estas utilizando una librería de scrip como Prototipe o Mootools para lograr ese efecto en la estadisticas para visualizarla cuando uno da clik en la estadisticas y con otro clik desaparecerla y si haz posteado algo al respecto.

Responder
Ivan Rodriguez  

Excelente entrada, cómo no...

JMiur me gustaría invitarte a ti y a todos tus lectores a visitar una nueva idea que hemos puesto en marcha unos amigos:
Blogs con EÑE
A ver si el Twitter de Blogger se da por aludido y ve que también existimos!!
AH! y no te pierdas la nube, que te gustará.

Saludos!!

Responder
Anónimo  

Vaya, me ha parecido genial la idea. El problema es que en mi cutre-bitácora da vergüenza poner algo tan sofisticado. :P

Responder
Anónimo  

Estuve tratando de acomodar un poco el calendario pero solo me sigue apareciendo en las entradas que son de diferentes fechas, aparte en IE se ve medio mal.

Saludos

Responder
Unknown  

Hola JMIUR, dime que parte de la plantilla de mi blog de pruebas 2, tengo que manipular para cambiar la distancia entre los elementos que se encuentran en la sidebar.

y en el mismo blog cuales son los bordes que rodean el blog... bueno gracias amigo

Responder
JMiur  

Didacvs:
Recibí el mail. Veré qué puedo hacer.

Christopher:
Es Prototype + Scriptaculous. El efecto Toggle que uso en otros sectores. Es muy simple de implementar.

Solidaridad:
La distancia está en:
sidebar .widget, .main .widget {
border-bottom:1px dotted #808080;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Ahí también esta el borde que se agrega a cada elemento.

Responder
Javier Cercas Rueda  

JMiur, muchas gracias por tu ayuda. Encontré una solución más sencilla: borrar cookies y caché. Un saludo

Responder
JMiur  

Javier:
Esa es la solución mágica para la mayoría de los problemas :D

Responder
Salvator  

(ex Didacvs)

Hola Jmiur y mil GRACIAS por tu ayuda, ahora puedo ver la fecha en todos los post :D Solo que en IE la fecha del ultimo post me aparece mas arriba, sabes como puedo solucionarlo?

Bueno, espero no tener que seguir molestandote más con este tema pero espero que no te moleste tenerme por aquí de vuelta con alguna otra inquietud :$

Saludos y GRACIAS nuevamente por tu ayuda

Responder
JMiur  

No se me ocurren soluciones encilla. Trata de colocarle al titulo un margen negativo:

.post h3 {
margin-top:-5px;

Es el margen del título el que produce eso.

Responder
squirrel  

Este menú me recuerda al menú con cajas de información del blog diversas y variadas.

Muy bueno :)

Responder
JMiur  

Aunque ambos utilizan el onmoseover, no funcionan bajo el mismo principio. El que muestras es un menú típico donde los items de la lista están ocultos y en este caso, lo que tiene de curioso es que se expanden superponiéndose a cualquier otro elemento y ocupando el mismo espacio vertical.

Responder
Paramatma  

Hola JMiur tiempos sin molestarte, mira lo intente colocar en mi blog de pruebas y aunque sale sale medio http://gocase-otroblogdepruebas.blogspot.com/

Me colaboras para que quede como en el tuyo? Mil gracias

Responder
JMiur  

No veo que haya ningún problema, todo funciona bien. en todo caso, lo que te faltaría es el estilo, es decir, ponerle colores de fondo o bordes a los diferentes sectores.

Un ejemplo cualquiera:

#cmd_content {border:1px dotted #9AB;background-color:#1E1E1E;}
ul#cmd a {border:1px solid #345;background-color:#567;
ul#cmd a span {background-color:#000;border:1px solid #345;border-left : 0;}
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {background:#000 url();}

Responder
Anónimo  

me encantó cómo quedo en mi blog, tienes que verlo, pasate y me cuentas si tegustó... mi perfil está habilitado.

Responder
Prof. Cristian E. Moyano  

JMiur m encanto éste Menú pero me gustaría adaptarlo un poco de ésta manera:
¿Cómo podría adaptarlo para que cuando haga click en cualquiera de los links, apareciera el contenido en "cmd_content" y no como un item, pero no al pasar el mouse sino al hacer click sobre él?...Y al hacer click en otro se superpusiera el contenido en el mismo lugar?

Responder
JMiur  

Cristian:
En ese caso, no podría usarse sólo CSS sino que habría que tener algún código en JAvaScript que lo hiciera. Una alternativa que podrías probar es cambiar esto:

ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {....... }
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {....... }

eliminado :hover y :focus pero dejando :active

ul#cmd a:active {....... }
ul#cmd a:active span {....... }

Responder
Prof. Cristian E. Moyano  

JMiur no te preocupes ya lo solucione reemplazandolo por un Tabview ! gracias igualmente

Responder
Anónimo  

muy buen menu!!!!

muy didactico !!!!

excelente post...

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