| « prev next » |
Você observou a mudança no encabeçamento de meu blog? Olhar nesta tela disparada na extremidade deste artigo.
Ontem, eu adicionei um menu navegacional global a meu blog. Eu amo esta mudança muito muito, e dá a povos uma maneira mergulhar profundamente mais rapidamente em uma categoria específica - apenas de toda a página. Se você gostar do projeto, e de você pode querer saber como você pode criar a mesma coisa em seu local suportado MovableType? Está aqui um guideline rápido.
HTML
Este é o código que eu me usei em meu molde (eu o pus em um módulo do encabeçamento do seperate).
href= " <$MTCategoryArchiveLink$> " do " nav " do class= do <li><a do <ul><MTSubCategories> de ><$MTCategoryLabel$> </a> " do href= " <$MTCategoryArchiveLink$> " do " alto do class= do ><a do " alto " do class= do ><li do " nav_menu " do id= do <ul do ><MTTopLevelCategories> do " nav " do id= do <div > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
A chave aqui é ter um div com nav da identificação, e então diversos ul com nav_menu da identificação, põem então os artigos de menu do nível superior dentro deste Tag. Então ter uns outros ul do fewl e pôr artigos de menu secundários nele. Isso é assim simples.
CSS
Em seu CSS (jianshuowangstyle.css em meu caso), adicionar o seguinte código. O crédito vai a Livid e a seu V2EX para a inspiração e o código da amostra.
div#nav {beira: 1px #CC9900 contínuo; beira-alto: 0px; espaço livre: ambos; altura: 21px; fundo-cor: #F0F8FF; margem-fundo: 10px; fundo-cor: #EAEFF4; espaço livre; ambos; estofamento: 0px}
div#nav a: ligação, div#nav a: visitado {cor: #000; texto-decoração: nenhuns;}
div#nav a.top: pairo {fundo-cor: #F0F8FF}
#nav_menu a.top {exposição: bloco; estofamento-alto: 5px; estofamento-esquerdo: 15px; estofamento-fundo: 0px;}
#nav_menu a, #nav_menu a: visitado {texto-decoração: nenhuns; cor: 333}
#nav_menu, ul do #nav_menu {estofamento: 0; margem: 0; lista-estilo: nenhuns;}
#nav_menu a.nav {exposição: bloco; estofamento-alto: 2px; altura: 17px; largura: 14em;}
li do #nav_menu {flutuador: esquerdo;}
ul do li do #nav_menu {exposição: bloco; posição: absoluto; largura: 14em; esquerda: -999em;
opacidade: .99; filtro: alfa (opacity=99); fundo-cor: #FFF;
estofamento-alto: 3px; estofamento-fundo: 3px;
beira-fundo: #CCC do sólido 1px; beira-direito: #CCC do sólido 1px; beira-esquerdo: #CCC do sólido 1px; z-índice: 99;}
div#nav a.nav: pairo {cor: #FFF; texto-decoração: nenhuns; fundo-cor: #667;}
div#nav a.nav: ativo {cor: #FFF; texto-decoração: nenhuns; fundo-cor: #333;}
li do #nav_menu: ul do pairo, ul do #nav_menu li.sfhover {deixados: automóvel;}
Certificado?
Não há nenhum Javascript envolvido neste. Estranho? O truque é, ajusta a propriedade esquerda ao em -999, que é distante no lado esquerdo da borda da tela, e no pairo, ajustou-o ao automóvel.
Se você gostar das funções, da sensação justa livre usar o código (CSS, e o HTML), e do você começá-lo.
Para meus leitores, você gostam desta melhoria pequena?