|
Este tutorial fue actualizado: Ir a la actualizacion.
Del menú vertical con CSS y jquery, efecto acordeón, podemos ver un ejemplo aquí:
...y para ponerlo en nuestro blog, procedemos así:
1.- Vamos a Edición de HTML: Página principal ► Diseño ► Edición de HTML ►  2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código: <script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/> |
3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código: <script type="text/javascript" charset="utf-8">
$(function(){
$('#menu li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
</script> |
4.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS: #menu{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 3px #888;
-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #fff;}
#menu ul li, #menu li:last-child{border:none}
a{
display:block;
color:#fff;
text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:13px;
padding:3px 5px;
text-shadow:1px 1px 1px #000000;
}
#menu a:hover{
color:#ffffff;
-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#088a85;}
#menu ul a:hover{
background-color:#04b4ae;
color:#0b3b39;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}
ul{
display:block;
background-color:#0B3B39;
margin:0;
padding:0;
width:130px;
list-style:none;
}
#menu ul{background-color:#6594d1;}
#menu li ul {display:none;} |
En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas. 5.- Guardamos plantilla. 6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código: <ul id="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
<li><a href="#">Submenu 9</a></li>
<li><a href="#">Submenu 10</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 7</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 8</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 9</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 10</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li></ul> |
En todos los <a href="#"> reemplazamos # por los enlaces correspondientes, y, a los menús y submenús les ponemos los títulos de los enlaces. El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog.
Este tutorial fue actualizado: Ir a la actualizacion.
|
14 comentarios :
antes que nada gracias por el aporte. le comento que he realizado unas modificaciones para auto generar el menu de modo dinámico desde una bd. sin embargo, se me han presentado algunos problemas al momento de ejecutar el código javascript. apenas me inicio en el uso de este lenguje por lo que le pido una asesoria para saber por que podría ser el problema.
tratare de explicar, el html generado lo envio a un label del tipo asp net. todo bien, muestra datos y liks. esto lo he integrado dentro de una master page. al momento de reacargar el link me genera un error al momento de cargar los elementos hijos. no identifico claramente el por que.
de antemano agradezco su atencion y compresension
Estimado Anonimo: Le presento disculpas por no tener respuesta para su inquietud.
No tengo conocimientos de ASP.NET que, hasta donde entiendo, es un Framework para aplicaciones web, usado por programadores para construir sitios web dinámicos.
Cordial saludo.
solucionado!!!, de todos modos le agradezco la atención.
Solo para conocimiento general para aquellos que les pueda ser de utilidad, los eventos generados por el jscript no son heredables desde la master page, por lo que se debera de incluir en cada pág. el punto 3 expuesto por el autor (Pedro Pablo).
Estoy tratando de hacer pero no me funciona no le reconoce el shadown en el css
Buenas
primero gracias por el aporte, es lo que andaba buscando, lo he implementado en mi blog y funciona de perlas, aunque me gustaria que el menu se quedara siempre desplegado por la opción elejida, ¿alguna idea?
Un saludo
Anónio: No conozco un código que logre el efecto que a usted le gustaría.
Saludos.
Estimado estoy buscando la manera de hacer un acordeon de 3 nuvlese a partir del site map ¿Donde puedo encontrar algo que me oriente?,
saludos
sanchez_chavezr@yahoo.es
Estimado anónimo, El site map lo puede adaptar al menú efecto acordeón explicado een este tutorial.
Saludos.
Estimado Pedro Pablo:
Gracias por la respuesta, pero igual no me queda claro, ¿me puede ayudar siendo más explicito?, o facilitarme algún código de ejemplo de un sitemap de más de dos niveles, de hecho estoy empezando en estas lides e igual no se como registrarme para no ser anonimo, mi nombre es Rubén
Rubén: Los códigos necesarios para este menú están en el tutorial. Siguiendo el orden lógico en el código del punto seis del tutorial actualizado puede agregar más niveles. La actualización del tutorial está aquí:
http://bloguermast.blogspot.com/2012/06/menu-vertical-con-css-y-jquery-efecto.html
Saludos.
Estimado Pedro Pablo:
Revisé la nueva versión, pero parece que no me expliqué bien, mi menú responde al siguiente esquema
Item A
Item A.1
Item A.1.1
Item A.1.2
Item A.2
Item A.2.1
Item A.2.2
Item B
Item B.1
Item B.1.1
Item B.1.2
Item B.2
Item B.2.1
Item B.2.2
Item C
Item C.1
Item C.1.1
Item C.1.2
Item C.2
Item C.2.1
Item C.2.2
y se recupera desde un AspNetSqlSiteMapProvider
¿Tienes algún ejemplo que me ilustre como implementarlo?
Muchas gracias nuevamente, y que la buena suerte esté junto a ti,
Rubén
Rubén, desafortunadamente este menú no se adapta a ese esquema. Habría que crear un mennú por cada ítem principal (A, B, C) y ponerlos, uno al lado del otro, en una tabla, con la limitación que no se puede llegar sino hasta el primer sub-item (A1, B1, C1).
Este es un tutorial sobre tablas:
http://bloguermast.blogspot.com/2009/12/tablas-basicas.html
Saludos.
Don Pedro:
Muchas gracias por la respuesta y la paciencia,
saludos
Rubén
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.