| « prev next » |
Hast du die änderung in der überschrift meines blog beachtet? Blick auf diesen Schirm geschossen auf das Ende dieses Artikels.
Gestern fügte ich ein globales Navigationsmenü meinem blog hinzu. Ich liebe diese änderung sehr, und sie gibt Leuten eine Weise, in eine spezifische Kategorie - gerade von jeder möglicher Seite tief schneller zu tauchen. Wenn du das Design magst und dich kann sich wundern, wie du die gleiche Sache in deinem MovableType unterstützten Aufstellungsort verursachen kannst? Ist hier eine schnelle Richtlinie.
HTML
Dieses ist der Code, den ich in meiner Schablone verwendete (ich setzte sie in ein seperate überschriftmodul).
<div id= " nav " ><MTTopLevelCategories> <ul id= " nav_menu " ><li class= " Oberseite " ><a class= " Oberseite " href= " <$MTCategoryArchiveLink$> " ><$MTCategoryLabel$> </a> <ul><MTSubCategories> <li><a class= " nav " href= " <$MTCategoryArchiveLink$> " > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
Der Schlüssel hier ist, eine Div. mit Kennzeichnung nav zu haben, und dann setzen einige ul mit Kennzeichnung nav_menu, dann die erste Seite Menüeinzelteile innerhalb dieses Umbaus. Eine anderen fewl ul dann haben und Unterprogrammeinzelteile in ihn einsetzen. Das ist so einfach.
CSS
In deinem CSS (jianshuowangstyle.css in meinem Fall), den folgenden Code hinzufügen. Gutschrift geht zu fahlem und zu seinem V2EX für Inspiration und Beispielcode.
div#nav {Rand: 1px festes #CC9900; Randoberseite: 0px; freier Raum: beide; Höhe: 21px; Hintergrundfarbe: #F0F8FF; Seitenrandunterseite: 10px; Hintergrundfarbe: #EAEFF4; freier Raum; beide; Auffüllen: 0px}
div#nav a: Verbindung, div#nav a: besucht {Farbe: #000; Textdekoration: keine;}
div#nav a.top: Schwebeflug {Hintergrundfarbe: #F0F8FF}
#nav_menu a.top {Anzeige: Block; Auffüllenoberseite: 5px; Auffüllen-link: 15px; Auffüllenunterseite: 0px;}
#nav_menu a, #nav_menu a: besucht {Textdekoration: keine; Farbe: 333}
#nav_menu, #nav_menu ul {Auffüllen: 0; Seitenrand: 0; Listeart: keine;}
#nav_menu a.nav {Anzeige: Block; Auffüllenoberseite: 2px; Höhe: 17px; Breite: 14em;}
#nav_menu Li {Hin- und Herbewegung: link;}
#nav_menu Liul {Anzeige: Block; Position: absolut; Breite: 14em; links: -999em;
Opazität: .99; Filter: Alpha (opacity=99); Hintergrundfarbe: #FFF;
Auffüllenoberseite: 3px; Auffüllenunterseite: 3px;
Randunterseite: Körper 1px #CCC; Rand-recht: Körper 1px #CCC; Rand-link: Körper 1px #CCC; Zindex: 99;}
div#nav a.nav: Schwebeflug {Farbe: #FFF; Textdekoration: keine; Hintergrundfarbe: #667;}
div#nav a.nav: aktiv {Farbe: #FFF; Textdekoration: keine; Hintergrundfarbe: #333;}
#nav_menu Li: Schwebeflugul, #nav_menu li.sfhover ul {gelassen: Automobil;}
Index?
Es gibt kein Javascript, das diesbezüglich mit einbezogen wird. Sonderbar? Der Trick ist, stellte die linke Eigenschaft auf EM -999, das auf der linken Seite des Schirmrandes und auf Schwebeflug weit ist, einstellte ihn auf Automobil ein.
Wenn du die Funktionen, gerechte fühlen, das frei sind, den Code (CSS und HTML) zu benutzen magst und dich es erhalten.
Für meine Leser du mögen diese wenig Verbesserung?