Dock Menu
普段は隠れているけど、マウスを近づけるとするするーっと表示されるJavaScriptのmemuを導入しました。
ヘッダー右左上に”M”の小さなアイコンを表示していますが、on mouseoverの領域は広く設定されているので、アイコンに気が付かなくてもタブを閉じる等の行為でマウスが通るのでメニューが表示されます。
マウスを遠ざけると勝手に隠れてくれます ;):
Dock Menu
Download: 2210media—Dock Menu
上記サイト自体がDomoで、使用JavaScriptとメニュー画像、CSSなど丸ごとダウンロードできます。
また、詳しく導入方法が書かれています。（英語）
導入例
index.htmlに書かれている以下の部分を＜body＞のすぐ後に入れる
<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="hit_area2" onmouseover="toggleUp();">
＜/body＞のすぐ手前に＜/div＞を入れる。
＜ul＞～＜/ul＞の間のリンクは5件だとサンプルのCSSと画像がぴったりです。
WPなら通常は
<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=id&depth=1&title_li='); ?>
bodyのCSSのmargin, paddingは0にして、あとは自サイトに合わせてCSSや画像を調整します。
そのまま使っても全然ステキ。
you may want to subscribe to my RSS feed. Thanks for visiting!
