Blog Tecnología fácil.: Como crear un menú desplegable en tu Blog

viernes, 22 de abril de 2016

Como crear un menú desplegable en tu Blog

Para ello tenemos que añadir un nuevo gadget HTML/Javascript en la cabecera estando en Diseño del Blog.

Entramos en el modo de edición pulsando el botón editar de gadget:

Aquí insertamos el código para el nuevo menú de nuestro blog que tendrá este aspecto:

<li><a href='search/label/Presentación'>Inicio</a></li>

<ul>

<ul>

<li><a href='search/label/Contenidos_Tecnología_2ºESO'>Contenidos 2ºESO</a></li>

<li><a href='search/label/Tema01_2ºESO'>Tema01-El proyecto técnico</a></li>

<li><a href='search/label/Tema02_2ºESO'>Tema02-Dibujo</a></li>

<li><a href='search/label/Tema03_2ºESO'>Tema03-Materiales y madera</a></li>

<li><a href='search/label/Tema04_2ºESO'>Tema04-Los metales</a></li>

<li><a href='search/label/TEC-2ºESO_Tema5'>Tema05-Estructuras</a></li>

<li><a href='search/label/TEC-2ºESO_Tema6'>Tema06-Electricidad</a></li>

</ul>

<ul>

<li><a href='search/label/Contenidos_Tecnología_4ºESO'>Contenidos 4ºESO</a></li>

<li><a href='search/label/Tema01_4ºESO'>Tema01-Electrónica</a></li>

<li><a href='search/label/Tema02_4ºESO'>Tema02-Electrónica digital</a></li>

<li><a href='search/label/Tema03_4ºESO'>Tema03-Tecnología de la comunicación</a></li>

<li><a href='search/label/Tema04_4ºESO'>Tema04-Control y robótica</a></li>

<li><a href='search/label/Tema05_4ºESO'>Tema05-Control por ordenador</a></li>

<li><a href='search/label/TEC-4ºESO_Tema06'>Tema06-Neumática e hidráulica</a></li>

</ul>

</li></li></ul>

</li>

<li><a href='search/label/Bachillerato'>Bachillerato</a>

<ul>

<li><a href='1ºBachillerato'>1º Bachillerato</a></li>

<li><a href='2ºBachillerato'>2º Bachillerato</a></li>

<li><a href='Proyectointegrado'>Proyecto Integrado</a></li>

<li><a href='Selectividad'>Selectividad</a></li>

</ul>

</li>

<li><a href='search/label/Tecnología'>Tecnología</a>

<ul>

<li><a href='search/label/Mecánica'>Mecánica</a></li>

<li><a href='search/label/Estructuras'>Estructuras</a></li>

<li><a href='search/label/Electricidad'>Electricidad</a></li>

<li><a href='search/label/Electrónica'>Electrónica</a></li>

<li><a href='search/label/Neumática'>Neumática</a></li>

<li><a href='search/label/Hidráulica'>Hidráulica</a></li>

<li><a href='search/label/Informática'>Informática</a></li>

<li><a href='search/label/Proyectos'>Proyectos</a></li>

</ul>

</li>

<li><a href='search/label/Física y Química'>Física y Química</a>

<ul>

<li><a href='search/label/Física y Química 4º ESO'>Física y Química 4ºESO</a>

<ul>

<li><a href='search/label/Contenidos_FyQ_4ºESO'>Contenidos FyQ 4ºESO</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema01'>Tema01-Estudio del movimiento</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema02'>Tema02-Interacciones entre los cuerpos</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema03'>Tema03-Movimiento circular uniforme y gravitación</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema04'>Tema04-Fuerzas en los fluidos</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema05'>Tema05-Trabajo y energía mecánica</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema06'>Tema06-CALOR Y ENERGÍA TÉRMICA</a></li>

<li><a href='search/label/FyQ-4ºESO_Tema07'>Tema07-EL ENLACE QUÍMICO</a></li>

</ul>

<li><a href='search/label/Estática'>Estática</a></li>

<li><a href='search/label/Dinámica'>Dinámica</a></li>

<li><a href='search/label/Gravedad'>Gravedad</a></li>

<li><a href='search/label/Hidráulica'>Hidráulica</a></li>

<li><a href='search/label/Cinemática'>Cinemática</a></li>

</li></ul>

</li>

<li><a href='search/label/Varios'>Varios</a>

<ul>

<li><a href='search/label/Dibujo'>Dibujo</a></li>

<li><a href='search/label/Simuladores'>Simuladores</a></li>

<li><a href='search/label/Robótica'>Robótica</a></li>

<li><a href='search/label/Informática'>Informática</a></li>

<li><a href='search/label/Examenes'>Examenes</a></li>

<li><a href='search/label/Mapas mentales'>Mapas mentales</a></li>

</ul>

</li>

<li><a href='search/label/Galería'>Galeria</a>

<ul>

<li><a href='search/label/Imágenes'>Imágenes</a></li>

<li><a href='search/label/Vídeos'>Vídeos</a></li>

<li><a href='search/label/Libros'>Libros</a></li>

<li><a href='search/label/Mapas'>Mapas</a></li>

<li><a href='search/label/Planos'>Planos</a></li>

<li><a href='search/label/Esquemas'>Esquemas</a></li>

<li><a href='search/label/Fotos'>Fotos</a></li>

</ul></li>

<li><a href='search/label/Sobre mi'>Sobre mi</a>

<ul>

<li><a href='search/label/Trabajos'>Trabajos</a>

<li><a href='search/label/Publicaciones'>Publicaciones</a>

<ul>

<li><a href='search/label/Máster Secundaria'>Trabajo Fin de Máster</a></li>

<li><a href='search/label/Proyecto Fin de Carrera'>Proyecto Fin de Carrera</a></li>

<li><a href='http://fdiazuceda.blogspot.com.es/2016/04/de-ciencia-tecnologia-la-interfase.html'>De Ciencia a Tecnología</a></li>

</ul>

<li><a href='search/label/Vídeos'>Vídeos</a></li>

<li><a href='search/label/Libros'>Libros</a></li>

<li><a href='search/label/Conferencias'>Conferencias</a></li>

<li><a href='search/label/Presentaciones'>Presentaciones</a></li>

<li><a href='search/label/Esquemas'>Esquemas</a></li>

<li><a href='search/label/Fotos'>Fotos</a></li>

</li></li></ul>

<li><a href='search/label/Contacto'>Contacto</a>

</li>

</li></ul></div>

</div>

Una vez introducido el código HTML de nuestro menú, guardamos y ahora tenemos que hacer otra cosa importante para que funciones correctamente este código.

Entramos en el modo de plantilla y pulsamos el botón personalizar:

Una vez que nos aparece el menú seleccionamos la opción "Avanzadas" y luego "Anadir CCS"

y en el cuadro de texto tenemos que introducir el siguiente código:

/* Menu desplegable
----------------------------------------------- */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #ffffff; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}

#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 1px solid #333333; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 1px solid #333333; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #333333; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 930px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:transparent;}

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
font: normal normal 14px Arial; /*Tamaño y tipografías de las pestañas */
color: #FFFF00; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
}
#nav li a:hover, #nav li a:active {
color: #0033FF ; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/
background: #000000; /*Color del fondo de las subpestañas*/
width: 150px; /*Tamaño de éstas*/
color: #FFFF00; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #FF9900; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #222222; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }

--------------------------------------------------------------------------------------------------------------------------

Este código lo podemos personalizar para cambiar el aspecto de los menús desplegables.

Espero que os haya servido.