jQuery for WP Apple sidebar

DESIGN

Notes about the design on the Web

EC SITE

EC-SITE building and customization of CMS

FLASH

Practice Note for flash and action script

SERVER

Linux VSP and other Rental Server

WORDPRESS

Note the effective use and customization of WordPress

Home » WORDPRESS

jQuery for WP Apple sidebar

Submitted by Rika on 2008/06/16 – 23:53 No Comment

過去幾度無くAppleサイトのサイドバーの再現に挑戦したのですが、中々思うようにできなかったのですが、jQueryを使用して再現するチュートリアルを参考にしてやってみたら、やっと私も当ブログのサイドバーに導入できたー！の導入メモ。

参考サイト: Slide out and drawer effect | jQuery for Designers - Tutorials and screencasts
ダウンロード:

ダウンロードしたjQueryとDimensions, accordion plugin をjsフォルダにアップロードし、下記CodeをWordpress theme のヘッダーにに読み込みます。

PLAIN TEXT

PHP:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.dimensions.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.accordion.js" type="text/javascript"></script>

PLAIN TEXT

PHP:

<script type="text/javascript">
<!--
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
-->
</script>

sidebar.php(例: 下記のプラグインを使用した場合）

※UL classは実際はプラグインのオプション設定で記入しておく

PLAIN TEXT

PHP:

<div id="sidebar">
<div class="drawers-wrapper">
<div class="boxcap captop"></div>
<ul class="drawers">
<li class="drawer">
<h2 id="toc-recent-posts" class="drawer-handle open">Recent posts</h2>
<ul class="alldownloads">
　　　　　　　<?php recent_posts(); ?>
</ul>
</li>
<li class="drawer">
<h2 id="toc-comments" class="drawer-handle">Comments</h2>
　　　　　　　<?php recent_comments(); ?>
</li>
<li class="drawer">
<h2 id="toc-tags" class="drawer-handle">Tags</h2>
<ul>
<?php st_tag_cloud(); ?>
</ul>
</li>
<li class="drawer">
<h2 id="toc-categories" 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 id="toc-peges" class="drawer-handle">Peges</h2>
<ul>
<?php wp_list_pages("title_li="); ?>
</ul>
</li>
</ul>
<div class="boxcap"></div>
</div>
</div>

スタイルシート

PLAIN TEXT

CSS:

#sidebar h2{ margin: 0;padding: 0;}
.drawers-wrapper {
position: relative;
width: 188px;
}
.drawer {
background:transparent url(http://images.apple.com/downloads/images/sideboxlight_bg20070611.gif) repeat-y scroll 0pt;
color:#76797C;
font-size:11px;
line-height:1.3em;
}
.boxcap {
height:5px;
left:0pt;
position:absolute;
width:100%;
z-index:100;
background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
margin-top:-5px;
}
.captop {
background-image:url(http://images.apple.com/downloads/images/box_188captop.png);
bottom:auto;
top:0pt;
margin-top:0;
}
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawers A {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}
.drawer li ul { list-style-type: decimal; list-style-position: inside;}
.drawer li ul li{border-bottom: none; }
UL {
list-style: none;
padding: 0;
}
UL.drawers {
margin: 0;
}
.drawer-handle {
background:#939393 url(http://images.apple.com/downloads/images/slider_handlebg188.png) no-repeat scroll 0pt;
color:#333333;
cursor:default;
font-size:12px;
font-weight:normal;
height:25px;
line-height:25px;
margin-bottom:0pt;
text-indent:15px;
width:100%;
}
.drawer-handle.open {
background-color:#72839D;
background-position:-188px 0pt;
color:#FFFFFF;
}
.drawer UL {
padding: 0 12px;
padding-bottom:0pt;
}
.drawer-content UL {
padding-top: 7px;
}
.drawer-content LI A {
display:block;
overflow:hidden;
}
.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}