11.6.12

Menú vertical con CSS y jquery, efecto acordeón


Cómo poner en nuestro blog un menú vertical con CSS y jquery, efecto acordeón:

1.- Vamos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head>, poiéndola dentro del rectángulo de búsqueda (Search) y, antes de la misma, pegamos el siguiente código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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.


PLantillas nuevas

En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús pueden presentar problemas para su funcionamiento, ya que esas plantillas tienen estilos predefinidos. Si tenemos ese problema sigamos el siguiente procedimiento:

1.- Vamos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Localizamos, poniendo dentro del rectángulo de búsqueda (Search) algunos caracteres de la misma, la siguiente línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

...y eliminamos la parte resaltada; si aparece en otras líneas también la eliminamos.

3.- Localizamos la siguiente sección:

/* Tabs
----------------------------------------------- */
.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
  overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;

  border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
  bottom: 0;
}

.tabs-inner .widget li a {
  display: inline-block;

  margin: 0;
  padding: .6em 1.5em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
  border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
  color: $(tabs.selected.text.color);
}

...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado:

/* Tabs
----------------------------------------------- */

4.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

5.- Vista previa y Guardar plantilla.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

2 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Anónimo #

gracias mi buen amigo por compartir este conocimiento.

Comentario escrito por Anónimo #

Buenas, es gran idea y estan buenos los datos, el problema es que los botones para compartir que uno agrega en las entradas se bugean y se duplican :/

No hay algun codigo que no edite toda la plantilla?

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.