jQuery for WP Apple sidebar
過去幾度無くAppleサイトのサイドバーの再現に挑戦したのですが、中々思うようにできなかったのですが、jQueryを使用して再現するチュートリアルを参考にしてやってみたら、やっと私も当ブログのサイドバーに導入できたー！の導入メモ。
ダウンロードしたjQueryとDimensions, accordion plugin をjsフォルダにアップロードし、下記CodeをWordpress theme のヘッダーにに読み込みます。
<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>
<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は実際はプラグインのオプション設定で記入しておく
<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>
スタイルシート
#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;
}
紹介には、Appleから直接画像にリンクしてました。
- 上記設定だと、一番長い
liに長さが統一されるようです。 - 他の使用プラグイン、JavaScript によって変わります。
- サイドバー単体なら、スタイルシートは変わりますがjQuery UIでも簡単に導入できました。
you may want to subscribe to my RSS feed. Thanks for visiting!
