Menu Vetical con subpestañas y efecto de desvanecimiento

Ya se había publicado un menú similar, pero en forma horizontal (ir al tutorial menú horizontal), este maneja las mismas características. Este es un menu vertical, con subpestañas y efecto de desvanecimiento de los items al pasar el cursor sobre ellos. Este mismo puede instalarse en cualquier plataforma, no solamente en blogger, también lo probé en un HTML y en WordPress así que siéntase con la confianza de utilizarlo fuera de blogger, esto debido a que el código de este menú lo acomode de modo que solo lo insertas y ya esta funcionando!.

Ademas de eso  hice el menu de dos formas una donde el submenu se despliega a la derecha y otra a la izquierda solo tendrás que escoger cual de los necesitas!

Puedes verlo en funcionamiento solo da clic al botón de abajo.

¿ Te gusta ? Entonces vamos al tutorial!

IMPORTANTE: Si usas una plantilla hecha por Blogger o personalizada a través del Diseñador de Plantillas, primero debes seguir estos 4 simples pasos de esta entrada.

1.- Nos vamos a  Diseño estando ahí agregamos un Gadget tipo HTML/JavaScript, en Título lo dejamos en blanco y luego en Contenido agregamos lo siguiente.

Para el menu con el submenu alineado a la derecha usaremos este codigo

Item 1

Item 2

Sub Item 1
Sub Item 2
Sub Item 3


Item 3
Item 4

Sub Item 1
Sub Item 2
Sub Item 3


Item 5

Para el menu con el submenu alineado a la izquieda usaremos este codigo

Item 1

Item 2

Sub Item 1
Sub Item 2
Sub Item 3


Item 3
Item 4

Sub Item 1
Sub Item 2
Sub Item 3


Item 5

2.- Ahora solamente cambiaremos valores que empiezan desde la linea 77 cambiaremos los Items y sub items por el texto que queramos y donde esta el # lo cambiaremos por el enlace (link) a donde queremos mandar.

PERSONALIZACION

A.- Para agregar un nuevo Item agregamos el siguiente código en cualquier parte después de la etiqueta  <ul id="Soldier-Vertical-Menu"> (linea 77) segun se requiera el orden,  pero sin salirnos de </ul> (linea 96) :

Nombre del Item

B.- Para agregar un nuevo Item con Sub Pestaña agregamos el siguiente código en cualquier parte después de la etiqueta  <ul id="Soldier-Vertical-Menu"> (linea 77) segun se requiera el orden,  pero sin salirnos de </ul> (linea 96) :

Item
 Sub Item

C.- Para agregar otro submenu al mismo solo agregamos un <a href="#">Sub Item</a> entre las etiquetas <span>  </span> . Ejemplo:

Item
Sub Item 1 Sub Item 2Sub Item 3

Podemos ver un ejemplo mas claro de esto en el codigo de el menu en la linea 80 a 86

COLORES

A.- Para cambiar el color de fondo del menu nos vamos a la linea  5 en el menu veremos algo asi:

 background: rgb(18, 94, 196);

Aca tenemos dos opciones

1.- La primera es usar colores rgb y si es asi solo cambiaríamos lo que esta entre paréntesis en este caso el valor "18, 94, 196" y pondriamos el nuevo.

2.- La segunda es usar colores hexadecimales si es asi quitaríamos la parte "rgb(18, 94, 196)" y lo cambiaremos por el color que queramos por ejemplo rojo "#FF0000" quedando asi:

 background: #FF0000;

B.- Si queremos cambiar el color de fondo de los item del menu al pasar el cursor cambiaríamos los valores de la linea 41 encontraremos lo siguiente

background:  #1F1E1C;

 Lo mismo que en lo anterior podemos usar colores RGB o EXADECIMALES

C.- Si queremos cambiar el color de fondo de el sub menu cambiarimos los valores en la linea 52

 background:  #1F1E1C;

 Lo mismo que en los anteriores podemos usar colores RGB o EXADECIMALES

D.- Para los colores de letras los tenemos asi:

Linea 29 Color de las letras del menu
Linea 37 Color de las letras del menu al pasar el cursor sobre este
Linea 66 Color de las letras del Submenu
Linea 71 Color de las letras del Submenu al pasar el cursor sobre este


Eso seria todo el tutorial espero y les sea de ayuda, asi mismo los invito a exponer sus dudas si llegan a tenerlas en la caja de comentarios y las sugerencias o agradecimientos todo es bienvenido.