cómo añadir menu desplegable
TRANSCRIPT
-
7/26/2019 Cmo Aadir Menu Desplegable
1/5
Si utilizas plantillas pre diseadas o dinmicas, es muy probable este tutorial NO
te funcione
Si quieres aplicarlo, ves al men plantilla y cambia tu plantilla actual a
sencilla
Si no encuentras en el html de tu plantilla el cdigo ]]> busca slo
/b:skin
Revisa este tutorial y as entenders porqu ocurre
Para buscar cdigo dentro de la plantilla html debes utilizar
Ctrl y F a la vez si tienes un PC
Command y F a la vez si tienes un Mac
Si quieres cambiar el tipo de fuente, sustituye lo marcado en color rojo
font:normal 12px Helvetica, sans-serif; margin: 0;
por la fuente que t elijas, por ejemplo
font:normal 12px century gothic; margin: 0;
Eso s, debes de tener instalada previamente la tipografa que hayas elegido,
mira este tutorial
Si quieres crear una pestaa donde queden agrupadas todas los posts con una
etiqueta determinada, por favor, mira este y este tutorial
Si quieres cambiar el color de la barra, cambia el valor all donde dice
background: #bdbfbf;
por el color que necesites
background: #949494;
Este tutorial te averiguar el cdigo de color que quieres
Si te queda la barra muy pegada a la cabecera haz lo siguiente, cambia
-
7/26/2019 Cmo Aadir Menu Desplegable
2/5
border-top: 0px solid;
por el valor que necesites, por ejemplo
border-top: 10px solid;
Sigue las instrucciones tal cual las explico en el vdeo, si no te sale por favor,
borra y vuelve a empezar
Si necesitas un diseo ms personalizado de lo que en el vdeo tutorial te
muestro, por favor, escribe a [email protected] y pdele presupuesto.
Ella es diseadora grfica profesional e informtica y seguro, podr ayudarte
Recuerda SIEMPRE antes de empezar hacer una copia de seguridad
Descrgate este documento en tu ordenador para as, poder seleccionar el cdigo
que ves aqu abajo
Paso 1
Paso 2
Pagina Principal
Sobre mi
Categoria 1
Categoria 1.1
Categoria 1.2
-
7/26/2019 Cmo Aadir Menu Desplegable
3/5
Categoria 2
Categoria 2.1
Categoria 2.2
Paso 3
]]>
Paso 4
/**MBW Navgation bar**/
#mbwnavbar {
background: #bdbfbf;width: 850px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {list-style: none;
-
7/26/2019 Cmo Aadir Menu Desplegable
4/5
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #028490;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav
li.sfhover ul ul ul { left: -999em;
}#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav
-
7/26/2019 Cmo Aadir Menu Desplegable
5/5
li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #028490;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;}