WP CSS pulldown menu test

WordPress template tag のページリストタグ “wp_list_pages()” とカテゴリ一覧表示タグ “wp_list_categories()” とアーカイブ一覧タグ “wp_get_archives()” を利用したCSSのみで作るプルダウンメニューを色々試したので、ひとつづつご紹介します。

IE6 対策

1. Whatever:hoverから Version 3.00.081222 (:hover, :active and :focus) をダウンロード
2. ie6用スタイルシートに ie6hoverfix のパスを読み込む

<br />
body{ behavior:url(<?php bloginfo('template_url'); ?>/css/ie6hoverfix.htc); }<br />

サンプル　1

ページリスト “wp_list_pages()” だけの超シンプルバージョン

</p>
<ul id="pulldown-menu">
<li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a class="home" href="<?php&phpMyAdmin=TmY6iB0UDgsijA973HYzLL4CTUd echo get_settings('home'); ?>/" title="Home">Home</a></li>
<p><?php wp_list_pages('title_li='); ?>
</ul>
<p>

display none を使う方法

<br />
　/*--sumple1--*/<br />
　ul#pulldown-menu a {<br />
	color: #FFFFFF;<br />
	text-decoration: none;<br />
　}<br />
　ul#pulldown-menu a:link, ul#pulldown-menu a:visited {<br />
	background: #000000;<br />
	color: #FFFFFF;<br />
　}<br />
　ul#pulldown-menu a:focus {<br />
	background: #6600FF;<br />
	color: #FFFFFF;<br />
　}<br />
　ul#pulldown-menu a:hover {<br />
	background: #FF6600;<br />
	color: #000000;<br />
　}<br />
　ul#pulldown-menu a:active {<br />
	background:#FF0099;<br />
	color: #FFFFFF;<br />
	}<br />
　ul#pulldown-menu li {<br />
	float: left;<br />
	position: relative;<br />
	margin: 0;<br />
	width: 11em;<br />
	height: 2em;<br />
	font-weight: bold;<br />
	line-height: 2em;<br />
　}<br />
　ul#pulldown-menu li a {<br />
	display: block;<br />
	width: 11em;<br />
	height: 2em;<br />
	text-align: center;<br />
　}<br />
　ul#pulldown-menu li ul {/* display none で下層のメニューを隠す */<br />
	display: none;<br />
　}<br />
　ul#pulldown-menu li:hover ul {/*hover で下層のメニューを表示 */<br />
	display: block;<br />
	position: absolute;<br />
	z-index: 100;<br />
　}<br />
　ul#pulldown-menu li ul li {<br />
	float: none;<br />
	margin: 0;<br />
	font-weight: normal;<br />
　}<br />

DEMO 1

サンプル 1
link, visited, focus, hover, active の色をサンプルページの一番下に表示してあります。リンクはすべてこのブログのページ内に繋がります。