Chrome-Menú drop down

Podéis verlo, desplegando y replegando, en Main, mi página "principal".
Ha sido bastante complicado de insertar... sobre todo porque los tutoriales que hasta hoy había leído sobre el tema, se habían "comido" un "pequeño" detalle... tan "pequeño" que sin él no se despliega el menú.
Ahora no tengo tiempo pero, cuando pueda, os cuento el "secreto" (que no lo es tanto... puesto que es obra y gracia de una de las webs que visito con asiduidad).
Y sigue sin gustarme este tipo de drop down menú... pero tengo que reconocer que es utilísimo.

Bueno: Vamos con la explicación (qué perezaaaaaa).

Lo primero: examinad el link original, de dynamicdrive. Sobre todo porque, al final de los códigos e instrucciones, configura la forma de los menús ("div").

Si ya tenéis a mano esta página, vamos a otra: la de Nonstop Nonsens.

Alli nos muestra:

a).- un código para insertar justo antes del cierre /head de la plantilla (antes de nada, la expandimos)

b).- Insertamos el CSS en justo antes del cierre /skin, eligiendo cualquiera de los estilos que se nos ofrecen (podéis examinar estos estilos en la muestra que ofrece la página de dynamicdrive que os he dado antes).

c).- Ahora tenemos varias posibilidades para colocar el menú (y, claro, el HTML):

1.- Bajo el título de nuestro blog, en cuyo caso colocaremos esta pieza de código justo antes de la tag "content-wrapper":

<div class='chromestyle' id='chromemenu'><br /><ul><br /><li><a href='http://YOURBLOG.blogspot.com/'>Home</a></li><br /><li><a href='#' rel='dropmenu1'>Content 1</a></li><br /><li><a href='#' rel='dropmenu2'>Content 2</a></li><br /><li><a href='#' rel='dropmenu3'>Content 3</a></li><br /><li><a href='#' rel='dropmenu4'>Content 4</a></li><br /></ul><br /></div><br /><br /><script type='text/javascript'><br />cssdropdown.startchrome("chromemenu")<br /></script><br />
Recordad poner la URL de vuestro blog y de rellenar las direcciones y sus nombres.

2.- Ocultando la nabvar, sobre el título del blog.Hay que añadir esta pieza de código al /skin:
#navbar-iframe {display:none<br />}<br />
Luego te vas a la apertura del body y justo detrás, se coloca el código de HTML que puse antes (o en el mismo /skin... que puede quedar bien)

d).- Y ahora... el "relleno": Se pueden colocar los widgets en el menú (feeds, blogroll, categorías...). Parapoder insertarlos necesitamos algo ESENCIAL; y es esta pieza de código, a insertar detrás de la tag b: includable id=main
<div class='dropmenudiv' id='dropmenu1'><br />
y cerrad el div (/) antes del b: includable y el b: widget.
El menu principal, cada URL, tiene su ID... de forma que no podemos repetir en el menú [2] la del [1], etc... y tendremos que asegurarnos de que los submenus se correspoden con la ID del menú principal al que los asignamos.
Además, si queremos que funcione el menú, debemos quitar de los widgets que incluyamos esta pequeña parte:

<h2 class='title'><data:title/></h2><br />


Si quieres insertar CATEGORÍAS EN EL MENÚ-que fue mi elección- hay que insertar un nuevo widget (ir a la sidebar... detrás del post line footer 3). Lo colocaremos entre dos widgets. Y si ya tenemos un elemento "Label1", la plantilla nos dará error,por duplicar la ID... en ese caso, dejaremos la Label sin numerar o con un "2", por ejemplo.

<b:widget id='Label1' locked='false' title='Categories' type='Label'><br /><b:includable id='main'><br /><div class='dropmenudiv' id='dropmenu1'><br /><div class='widget-content'><br /><b:loop values='data:labels' var='label'><br /><b:if cond='data:blog.url == data:label.url'><br /><data:label.name/> (<data:label.count/>)<br /><b:else/><br /><a expr:href='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</a><br /></b:if><br /></b:loop><br /><br /><b:include name='quickedit'/><br /></div><br /></div><br /></b:includable><br /></b:widget><br />

INSERTAR EN EL MENÚ FEEDS-LINKS:

Otra "Label" que debemos incluir como widget en nuestra plantilla. Esta vez será una "Label2":

<b:widget id='Label2' locked='false' title='Newsfeeds' type='Label'><br /><b:includable id='main'><br /><div class='dropmenudiv' id='dropmenu2'><br /><div class='widget-content'><br /><a href='http://YOURBLOG.blogspot.com/feeds/posts/default/-/' target='_blank' title='Subscribe to Posts'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Posts</a><br /><a href='http://YOURBLOG.blogspot.com/feeds/comments/default/-/' target='_blank' title='Subscribe to Comments'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Comments</a><br /><br /><b:loop values='data:labels' var='label'><br /><a expr:href='"http://YOURBLOG.blogspot.com/feeds/posts/default/-/" + data:label.name' target='_blank'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> <data:label.name/></a><br /></b:loop><br /><br /></div><br /><br /><b:include name='quickedit'/><br /></div><br /></b:includable><br /></b:widget><br />

No olvidéis, de nuevo, examinar el código para incluir vuestra URL de feeds.

Y ésto es todo... aunque también se pueden incluir en el menú las ENTRADAS RECIENTES... cosa que se muestra en el blog de Vivek Sanghi. Aquí os contarán, por ejemplo, que si queréis un elemento más en el menú principal (hay tres) sólo tenéis quecopiar esa parte de apertura del menú y cambiar el número: "dropmenú4", copiar el "div" para los submenús y añadir también el "4" al div.

Y creo que no se me olvida nada... uf...