| « prev next » |
Avez-vous noté le changement de l'en-tête de mon blog ? Regard à cet écran tiré à la fin de cet article.
Hier, j'ai ajouté un menu de navigation global à mon blog. J'aime ce changement beaucoup, et il donne aux gens une manière de plonger profondément dans une catégorie spécifique plus rapidement - juste de n'importe quelle page. Si vous aimez la conception, et toi peut se demander comment vous pouvez créer la même chose dans votre emplacement soutenu par MovableType ? Voici une directive rapide.
HTML
C'est le code que j'ai employé dans mon calibre (je l'ai mis dans un module d'en-tête de seperate).
href= " <$MTCategoryArchiveLink$> " de " nav " de class= de <li><a de <ul><MTSubCategories> de ><$MTCategoryLabel$> </a> du href= " <$MTCategoryArchiveLink$> " de " dessus " de class= de ><a de " dessus " de class= de ><li de " nav_menu " d'id= de <ul de ><MTTopLevelCategories> de " nav " d'id= de <div > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
La clef ici est d'avoir une division avec le nav d'identification, et puis plusieurs l'UL avec le nav_menu d'identification, a alors mis les articles de menu de niveau supérieur à l'intérieur de cette étiquette. Alors avoir une autre UL de fewl et mettre les articles de sous-menu dans elle. C'est si simple.
CSS
Dans votre CSS (jianshuowangstyle.css dans mon cas), ajouter le code suivant. Le crédit va à blème et à son V2EX pour l'inspiration et le code d'échantillon.
div#nav {frontière : 1px #CC9900 plein ; frontière-dessus : 0px ; espace libre : tous les deux ; taille : 21px ; fond-couleur : #F0F8FF ; le marge-fond : 10px ; fond-couleur : #EAEFF4 ; espace libre ; tous les deux ; remplissage : 0px}
div#nav a : lien, div#nav a : visité {couleur : #000 ; texte-décoration : aucun ;}
div#nav a.top : vol plané {fond-couleur : #F0F8FF}
#nav_menu a.top {affichage : bloc ; remplissage-dessus : 5px ; remplissage-gauche : 15px ; le remplissage-fond : 0px ;}
#nav_menu a, #nav_menu a : visité {texte-décoration : aucun ; couleur : 333}
#nav_menu, UL de #nav_menu {remplissage : 0 ; marge : 0 ; liste-modèle : aucun ;}
#nav_menu a.nav {affichage : bloc ; remplissage-dessus : 2px ; taille : 17px ; largeur : 14em ;}
Li de #nav_menu {flotteur : gauche ;}
UL de Li de #nav_menu {affichage : bloc ; position : absolu ; largeur : 14em ; gauche : -999em ;
opacité : .99 ; filtre : alpha (opacity=99) ; fond-couleur : #FFF ;
remplissage-dessus : 3px ; le remplissage-fond : 3px ;
le frontière-fond : #CCC du solide 1px ; frontière-droit : #CCC du solide 1px ; frontière-gauche : #CCC du solide 1px ; z-index : 99 ;}
div#nav a.nav : vol plané {couleur : #FFF ; texte-décoration : aucun ; fond-couleur : #667 ;}
div#nav a.nav : actif {couleur : #FFF ; texte-décoration : aucun ; fond-couleur : #333 ;}
Li de #nav_menu : UL de vol plané, UL du #nav_menu li.sfhover {laissée : automobile ;}
Manuscrit ?
Il n'y a aucun Javascript impliqué en cela. Étrange ? Le tour est, a placé la propriété gauche à la fin de support -999, qui est lointaine du côté gauche du bord d'écran, et sur le vol plané, l'a placé à l'automobile.
Si vous aimez les fonctions, le sentir juste libre pour employer le code (CSS, et le HTML), et toi l'obtenir.
Pour mes lecteurs, vous aiment cette petite amélioration ?