かれこれ数ヶ月前から、空き時間に制作している裏自社サイト。
Movable Type4実験、日本語ドメイン実験、SEO実験のために制作していますが、前々からやってみたかった事が・・・。
それは、Movable Type で小カテゴリー追加したら自動でカテゴリードロップダウンメニューに反映 ＆ カテゴリーによっては小カテゴリーではなくエントリーを反映。
とりあえず、カテゴリーに小カテゴリー追加したときのメニューは問題なく完成。
ただ、それだけでは芸がないので、またしても半透明プルダウンに。
ただ、メニューが読みにくい・・・。透明率の数値を色々触っているが、まだしっくりこない。
でも、マウスオーバー次には読めないことも無さそうなので、しばらくはこのまま行ってみるか。
自分用に記録を残しておきます。
参考になるか分からないけど、興味のある方は読んでください。
ソースの参考にはJavaScript + Ajax 実践サンプル集さんのドロップダウンメニューを使用させていただきました。
Movable Type ソースは下記になります。
<div id="menu">
<ul id="dd">
<li>
<a href="<$MTBlogURL$>web-consulting/index.html" class="menu" id="mmenu1" onMouseOver="mopen(1);" onMouseOut="mclosetime();">表示するカテゴリー名1</a> <div class="submenu" id="menu1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="descend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries></div>
</li>
<li><a href="<$MTBlogURL$>production/index.html" class="menu" id="mmenu2" onMouseOver="mopen(2);" onMouseOut="mclosetime();">表示するカテゴリー名2</a> <div class="submenu" id="menu2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>results/index.html" class="menu" id="mmenu3" onMouseOver="mopen(3);" onMouseOut="mclosetime();">表示するカテゴリー名3</a> <div class="submenu" id="menu3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>profile/index.html" class="menu" id="mmenu4" onMouseOver="mopen(4);" onMouseOut="mclosetime();">表示するカテゴリー名3</a> <div class="submenu" id="menu4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"><a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a></MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>fqa/index.html" class="menu" id="mmenu5" onMouseOver="mopen(5);" onMouseOut="mclosetime();">表示するカテゴリー名3</a> <div class="submenu" id="menu5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>column/index.html" class="menu" id="mmenu6" onMouseOver="mopen(6);" onMouseOut="mclosetime();">表示するカテゴリー名4</a> <div class="submenu" id="menu6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div> </li>
</ul>
</div>
参考になるか分からないけど、興味のある方は読んでください。
ソースの参考にはJavaScript + Ajax 実践サンプル集さんのドロップダウンメニューを使用させていただきました。
Movable Type ソースは下記になります。
<div id="menu">
<ul id="dd">
<li>
<a href="<$MTBlogURL$>web-consulting/index.html" class="menu" id="mmenu1" onMouseOver="mopen(1);" onMouseOut="mclosetime();">表示するカテゴリー名1</a> <div class="submenu" id="menu1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="descend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries></div>
</li>
<li><a href="<$MTBlogURL$>production/index.html" class="menu" id="mmenu2" onMouseOver="mopen(2);" onMouseOut="mclosetime();">表示するカテゴリー名2</a> <div class="submenu" id="menu2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>results/index.html" class="menu" id="mmenu3" onMouseOver="mopen(3);" onMouseOut="mclosetime();">表示するカテゴリー名3</a> <div class="submenu" id="menu3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>profile/index.html" class="menu" id="mmenu4" onMouseOver="mopen(4);" onMouseOut="mclosetime();">表示するカテゴリー名3</a> <div class="submenu" id="menu4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"><a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a></MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>fqa/index.html" class="menu" id="mmenu5" onMouseOver="mopen(5);" onMouseOut="mclosetime();">表示するカテゴリー名3</a> <div class="submenu" id="menu5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div>
</li>
<li><a href="<$MTBlogURL$>column/index.html" class="menu" id="mmenu6" onMouseOver="mopen(6);" onMouseOut="mclosetime();">表示するカテゴリー名4</a> <div class="submenu" id="menu6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <MTEntries sort_order="ascend" category="カテゴリータイトル"> <a href="<$MTEntryLink$>"><$MTEntryTitle remove_html="1"$></a> </MTEntries> </div> </li>
</ul>
</div>
コメントする