| « prev next » |
Avete notato il cambiamento nell'intestazione del mio blog? Sguardo a questo schermo sparato all'estremità di questo articolo.
Ieri, ho aggiunto un menu di navigazione globale al mio blog. Amo questo cambiamento molto e dà alla gente un senso tuffarsi più rapidamente in profondità in una categoria specifica - appena da tutta la pagina. Se li gradite il disegno e può domandarsi come potete generare la stessa cosa nel vostro luogo sostenuto MovableType? Qui è una guida di riferimento rapida.
HTML
Ciò è il codice che ho usato nella mia mascherina (la ho messa in un modulo dell'intestazione del seperate).
href= " <$MTCategoryArchiveLink$> " " del nav " del class= di <li><a del <ul><MTSubCategories> di ><$MTCategoryLabel$> </a> " del href= " <$MTCategoryArchiveLink$> " " della parte superiore del class= di ><a " della parte superiore " del class= di ><li " di nav_menu " del id= del <ul del ><MTTopLevelCategories> " del nav " del id= del <div > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
La chiave qui è di avere una divisione con il nav dell'identificazione ed allora parecchio l'UL con il nav_menu dell'identificazione, allora ha messo le voci di menu del livello superiore all'interno di questa modifica. Allora avere altra UL del fewl e mettere le voci di menu secondarie in esso. Quello è così semplice.
CSS
Nel vostro CSS (jianshuowangstyle.css nel mio caso), aggiungere il seguente codice. L'accreditamento va a Livid ed al suo V2EX per ispirazione ed il codice del campione.
div#nav {bordo: 1px #CC9900 solido; bordo-parte superiore: 0px; radura: entrambi; altezza: 21px; priorità-colore: #F0F8FF; margine-parte inferiore: 10px; priorità-colore: #EAEFF4; radura; entrambi; riempimento: 0px}
div#nav a: collegamento, div#nav a: visitato {colore: #000; testo-decorazione: nessun;}
div#nav a.top: librazione {priorità-colore: #F0F8FF}
#nav_menu a.top {esposizione: blocco; riempimento-parte superiore: 5px; riempimento-di sinistra: 15px; riempimento-parte inferiore: 0px;}
#nav_menu a, #nav_menu a: visitato {testo-decorazione: nessun; colore: 333}
#nav_menu, UL di #nav_menu {riempimento: 0; margine: 0; lista-stile: nessun;}
#nav_menu a.nav {esposizione: blocco; riempimento-parte superiore: 2px; altezza: 17px; larghezza: 14em;}
Li di #nav_menu {galleggiante: di sinistra;}
UL del Li di #nav_menu {esposizione: blocco; posizione: assoluto; larghezza: 14em; parte di sinistra: -999em;
opacità: .99; filtro: alfa (opacity=99); priorità-colore: #FFF;
riempimento-parte superiore: 3px; riempimento-parte inferiore: 3px;
bordo-parte inferiore: #CCC del solido 1px; bordo-di destra: #CCC del solido 1px; bordo-di sinistra: #CCC del solido 1px; z-indice: 99;}
div#nav a.nav: librazione {colore: #FFF; testo-decorazione: nessun; priorità-colore: #667;}
div#nav a.nav: attivo {colore: #FFF; testo-decorazione: nessun; priorità-colore: #333;}
Li di #nav_menu: UL di librazione, UL di #nav_menu li.sfhover {lasciata: automobile;}
Scritto?
Non ci è Javascript addetto a questo. Bizzarro? Il trucco è, regolato la proprietà di sinistra al em -999, che è lontano dalla parte di sinistra del bordo dello schermo e sulla librazione, la ha regolata all'automobile.
Se li gradite le funzioni, il tatto giusto libero usare il codice (CSS e HTML) ed ottenerlo.
Per i miei lettori, voi gradiscono questo miglioramento piccolo?