| « prev next » |
私のblogのヘッダーの変更に気づいたか。 この記事の端をこのスクリーンショットを見なさい。
昨日、私は私のblogに全体的な運行メニューを加えた。 私はこの変更を非常に愛し、人々にあらゆるページから特定の部門に-ちょうどすぐに深く潜る方法を与える。 設計および好めばあなたをあなたのMovableTypeによって支持される場所で同じ事をいかに作成できるか疑問に思うかもしれないか。 速い指針はここにある。
html
これは私が私の型板(私はseperateヘッダーモジュールにそれを入れた)で使用したコードである。
<divのid=の" nav "の><MTTopLevelCategories>の<ulのid=の" nav_menu "の><liのclass=の"上"の><aのclass=の"上"のhref= " <$MTCategoryArchiveLink$> " ><$MTCategoryLabel$> </a>の<ul><MTSubCategories>の<li><aのclass=の" nav "のhref= " <$MTCategoryArchiveLink$> " > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
次にここのキーはidのnavとのdiv、およびidのnav_menuの複数のULを持つことそしてこの札の中のトップレベルメニュー項目を置いた。 そして別のfewlのULを持ち、それに補助的なメニュー項目を置きなさい。 それはとても簡単である。
css
あなたのcss (私の場合のjianshuowangstyle.css)では、次のコードを加えなさい。 信用はインスピレーシヨンおよびサンプルコードのための青黒いそして彼のV2EXに行く。
div#nav {ボーダー: 1px固体#CC9900; ボーダー上: 0px; ゆとり: 両方; 高さ: 21px; 背景色: #F0F8FF; 差益底: 10px; 背景色: #EAEFF4; ゆとり; 両方; パッディング: 0px}
div#nav a: リンク、div#nav a: 訪問される{色: #000; テキスト装飾: どれも;}
div#nav a.top: 彷徨い{背景色: #F0F8FF}
#nav_menu a.top {表示: ブロック; パッディング上: 5px; パッディング左: 15px; パッディング底: 0px;}
#nav_menu aの#nav_menu a: 訪問される{テキスト装飾: どれも; 色: 333}
#nav_menu、#nav_menuのUL {パッディング: 0; 差益: 0; リスト様式: どれも;}
#nav_menu a.nav {表示: ブロック; パッディング上: 2px; 高さ: 17px; 幅: 14em;}
#nav_menuのリチウム{浮遊物: 左;}
#nav_menuのリチウムのUL {表示: ブロック; 位置: 絶対; 幅: 14em; 左: -999em;
不透明: .99; フィルター: アルファ(opacity=99); 背景色: #FFF;
パッディング上: 3px; パッディング底: 3px;
ボーダー底: 1px固体#CCC; ボーダー右: 1px固体#CCC; ボーダー左: 1px固体#CCC; z索引: 99;}
div#nav a.nav: 彷徨い{色: #FFF; テキスト装飾: どれも; 背景色: #667;}
div#nav a.nav: 能動態{色: #FFF; テキスト装飾: どれも; 背景色: #333;}
#nav_menuのリチウム: 彷徨いのUL、#nav_menu li.sfhoverのUL {残っている: 自動;}
原稿か。
これにかかわるジヤバ・スクリプトがない。 不可解か。 トリックはあったり、左を置いたスクリーンの端のと彷徨いで左側に遠い自動車に-999 emへの特性はそれを置いた。
コード(css、およびhtmlを)使用すること自由な機能、公正な感じおよび好んだらあなたをそれを得なさい。
私の読者のために、好むこの小さい改善をか。