| « prev next » |
¿Has notado el cambio en el jefe de mi blog? Mirada en esta pantalla tirada en el extremo de este artículo.
Ayer, agregué un menú navegacional global a mi blog. Amo este cambio mucho, y da a gente una manera de zambullirse profundamente en una categoría específica más rápidamente - apenas de cualquier página. ¿Si tienes gusto el diseño, y de ti puede preguntarse cómo puedes crear la misma cosa en tu sitio movido hacia atrás MovableType? Aquí está una pauta rápida.
HTML
Éste es el código que utilicé en mi plantilla (la puse en un módulo del jefe del seperate).
href= " <$MTCategoryArchiveLink$> " del " nav " del class= del <li><a del <ul><MTSubCategories> de ><$MTCategoryLabel$> </a> " del href= " <$MTCategoryArchiveLink$> " de la " tapa del class= del ><a de la " tapa " del class= del ><li del " nav_menu " del id= del <ul del ><MTTopLevelCategories> del " nav " del id= del <div > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
La llave aquí es tener un div con el nav de la identificación, y entonces vario la UL con nav_menu de la identificación, entonces puso los artículos de menú del nivel superior dentro de esta etiqueta. Después tener otra UL del fewl y poner los artículos de menú secundarios en ella. Eso es tan simple.
CSS
En tu CSS (jianshuowangstyle.css en mi caso), agregar el código siguiente. El crédito va a lívido y a su V2EX para la inspiración y el código de la muestra.
div#nav {frontera: 1px #CC9900 sólido; frontera-tapa: 0px; claro: ambos; altura: 21px; fondo-color: #F0F8FF; margen-fondo: 10px; fondo-color: #EAEFF4; claro; ambos; acolchado: 0px}
div#nav a: acoplamiento, div#nav a: visitado {color: #000; texto-decoración: ningunos;}
div#nav a.top: libración {fondo-color: #F0F8FF}
#nav_menu a.top {exhibición: bloque; acolchado-tapa: 5px; acolchado-izquierdo: 15px; acolchado-fondo: 0px;}
#nav_menu a, #nav_menu a: visitado {texto-decoración: ningunos; color: 333}
#nav_menu, UL del #nav_menu {acolchado: 0; margen: 0; lista-estilo: ningunos;}
#nav_menu a.nav {exhibición: bloque; acolchado-tapa: 2px; altura: 17px; anchura: 14em;}
li del #nav_menu {flotador: izquierdo;}
UL del li del #nav_menu {exhibición: bloque; posición: absoluto; anchura: 14em; izquierda: -999em;
opacidad: .99; filtro: alfa (opacity=99); fondo-color: #FFF;
acolchado-tapa: 3px; acolchado-fondo: 3px;
frontera-fondo: #CCC del sólido 1px; frontera-derecho: #CCC del sólido 1px; frontera-izquierdo: #CCC del sólido 1px; z-índice: 99;}
div#nav a.nav: libración {color: #FFF; texto-decoración: ningunos; fondo-color: #667;}
div#nav a.nav: activo {color: #FFF; texto-decoración: ningunos; fondo-color: #333;}
li del #nav_menu: UL de la libración, UL del #nav_menu li.sfhover {dejada: automóvil;}
¿Escritura?
No hay Javascript implicado en esto. ¿Extraño? El truco está, fijó la característica izquierda al em -999, que es lejano en el lado izquierdo del borde de la pantalla, y en la libración, la fijó al automóvil.
Si tienes gusto las funciones, la sensación justa libre utilizar el código (CSS, y el HTML), y de ti conseguirlo.
¿Para mis lectores, tú tienen gusto de esta pequeña mejora?