過去幾度無くAppleサイトのサイドバーの再現に挑戦したのですが、中々思うようにできなかったのですが、jQueryを使用して再現するチュートリアルを参考にしてやってみたら、やっと私も当ブログのサイドバーに導入できたー！の導入メモ。
ダウンロードしたjQueryとDimensions, accordion plugin をjsフォルダにアップロードし、下記CodeをWordpress theme のヘッダーにに読み込みます。
<br />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js" type="text/javascript"></script><br />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.dimensions.js" type="text/javascript"></script><br />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.accordion.js" type="text/javascript"></script><br />
<br />
<script type="text/javascript">
<!--
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',</p>
<p> // our selected class
selectedClass: 'open',</p>
<p> // match the Apple slide out effect
event: 'mouseover'
});
});
-->
</script><br />
sidebar.php(例: 下記のプラグインを使用した場合）
※UL classは実際はプラグインのオプション設定で記入しておく
</p>
<div id="sidebar">
<div class="drawers-wrapper">
<div class="boxcap captop"></div>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Recent posts</h2>
<ul class="alldownloads">
<?php recent_posts(); ?>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Comments</h2>
<p> <?php recent_comments(); ?>
</li>
<li class="drawer">
<h2 class="drawer-handle">Tags</h2>
<ul>
<?php st_tag_cloud(); ?>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Categories</h2>
<ul>
<?php wp_list_categories('show_option_all=HOME&title_li=&show_count=1&feed=<abbr title="Rich Site Summary または Really Simple Syndication">RSS</abbr>'); ?>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Peges</h2>
<ul>
<?php wp_list_pages("title_li="); ?>
</ul>
</li>
</ul>
<div class="boxcap"></div>
</p></div>
</div>
<p>
スタイルシート
<br />
#sidebar h2{ margin: 0;padding: 0;}<br />
.drawers-wrapper {<br />
position: relative;<br />
width: 188px;<br />
}<br />
.drawer {<br />
background:transparent url(http://images.apple.com/downloads/images/sideboxlight_bg20070611.gif) repeat-y scroll 0pt;<br />
color:#76797C;<br />
font-size:11px;<br />
line-height:1.3em;<br />
}<br />
.boxcap {<br />
height:5px;<br />
left:0pt;<br />
position:absolute;<br />
width:100%;<br />
z-index:100;<br />
background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;<br />
margin-top:-5px;<br />
}<br />
.captop {<br />
background-image:url(http://images.apple.com/downloads/images/box_188captop.png);<br />
bottom:auto;<br />
top:0pt;<br />
margin-top:0;<br />
}<br />
.drawers {<br />
margin-bottom:15px;<br />
color:#76797C;<br />
font-size:11px;<br />
line-height: 18px;<br />
}<br />
.drawers A {<br />
color:#666666;<br />
text-decoration:none;<br />
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;<br />
font-size-adjust:none;<br />
font-style:normal;<br />
font-variant:normal;<br />
font-weight:normal;<br />
}<br />
.drawer li {<br />
border-bottom:1px solid #E5E5E5;<br />
line-height:16px;<br />
padding:6px 0pt;<br />
}</p>
<p> .drawer li ul { list-style-type: decimal; list-style-position: inside;}<br />
.drawer li ul li{border-bottom: none; }</p>
<p> UL {<br />
list-style: none;<br />
padding: 0;<br />
}<br />
UL.drawers {<br />
margin: 0;<br />
}<br />
.drawer-handle {<br />
background:#939393 url(http://images.apple.com/downloads/images/slider_handlebg188.png) no-repeat scroll 0pt;<br />
color:#333333;<br />
cursor:default;<br />
font-size:12px;<br />
font-weight:normal;<br />
height:25px;<br />
line-height:25px;<br />
margin-bottom:0pt;<br />
text-indent:15px;<br />
width:100%;<br />
}<br />
.drawer-handle.open {<br />
background-color:#72839D;<br />
background-position:-188px 0pt;<br />
color:#FFFFFF;<br />
}<br />
.drawer UL {<br />
padding: 0 12px;<br />
padding-bottom:0pt;<br />
}<br />
.drawer-content UL {<br />
padding-top: 7px;<br />
}<br />
.drawer-content LI A {<br />
display:block;<br />
overflow:hidden;<br />
}<br />
.alldownloads li {<br />
border:0pt none;<br />
line-height:18px;<br />
padding:0pt;<br />
}<br />
紹介には、Appleから直接画像にリンクしてました。
- 上記設定だと、一番長い
liに長さが統一されるようです。 - 他の使用プラグイン、JavaScript によって変わります。
- サイドバー単体なら、スタイルシートは変わりますがjQuery UIでも簡単に導入できました。
