Siguiendo los pasos tendremos nuestro menú realizado con HTML y CSS
1. Se recomienda hacer una copia de seguridad de tu blog, en caso de no saber que parte del código se modificó se podría restaurar.
Como hacer una copia de seguridad de nuestro blog
2. Para empezar copiamos el siguiente código
<div id=’NavMenuleft’>
<ul id=’nav’>
<li><a href=’#’>Menu</a></li>
<li>
<a href=’#’>Seccion desplegable N1</a>
<ul>
<li><a href=’#‘>submenu 1</a></li>
<li><a href=’#’>submenu 2</a></li>
<li><a href=’#’>submenu 3</a></li>
</ul>
</li>
<li>
<a href=’#’>Seccion desplegable N2</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>
</div>
</div>
3. Vamos a la sección de diseño y agregamos un nuevo gadget
Seleccionamos HTML/JavaScript y pegamos el código dentro
4. Añadimos un titulo "Menu" al gadget y editamos el código adentro, se recomienda editar el código antes en un editor de texto como "note pad ++ o sublime", si no tienes conocimientos de estas herramientas no hay problema. Dentro del código cambiaremos principalmente los "#" por los enlaces a donde debe redireccionar estos. Ejemplo
<li><a href=’#’>submenu 4</a></li> por <li><a href=’doingblogger.blogspot.com/submenu4’>submenu 4</a></li>
Hacemos lo mismo con todos y estructuramos el menú según nuestras preferencias
5. Añadiremos el código CSS el cual le da el estilo al menú
Nos ubicamos en Plantilla --> Personalizar --> avanzado --> Añadir CSS, aquí dentro pegamos el siguiente código
/* Menu desplegable inicio —————- */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: left !important;}/*Posición del texto del menu*/
.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: 1px solid #333333; /*Borde del menú*/
background: #333333; /*Color de fondo del menú*/
}
#NavMenuleft {
width: 923px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:#fff;}/*Color del fondo del menu*/
#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 16px Arial; /*Tamaño y tipo de fuente de las pestañas */
color: #666666; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
}
#nav li a:hover, #nav li a:active {
color: #cccccc; /*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 16px Arial; /*Tamaño y tipo de fuente de los submenus*/
background: #eeeeee; /*Color del fondo de las subpestañas*/
width: 150px; /*Ancho de los submenus*/
color: #333333; /*Color del texto de los submenus*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff; /*Color del fondo de los submenus al pasar el ratón por encima*/
color: #222222; /*Color del texto de los submenus 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; }
/* Menu desplegable fin —————- */
6. Como ven, el código CSS esta comentado para que sepan que linea modifica exactamente que parte de nuestro menú, después de esto no queda sino probarlo
Falta algo?.....Comentalo...!!!
0 comentarios: