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
jQuery for WP Apple sidebar

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

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

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

PHP:
  1. <script type="text/javascript">
  2. <!--
  3. $(function () {
  4.   $('UL.drawers').accordion({
  5.     // the drawer handle
  6.     header: 'H2.drawer-handle',
  7.  
  8.     // our selected class
  9.     selectedClass: 'open',
  10.  
  11.     // match the Apple slide out effect
  12.     event: 'mouseover'
  13.   });
  14. });
  15. -->
  16. </script>

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

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

PHP:
  1. <div id="sidebar">
  2.     <div class="drawers-wrapper">
  3.     <div class="boxcap captop"></div>
  4.     <ul class="drawers">
  5.         <li class="drawer">
  6.              <h2 id="toc-recent-posts" class="drawer-handle open">Recent posts</h2>
  7.             <ul class="alldownloads">
  8.        <?php recent_posts(); ?>
  9.             </ul>
  10.         </li>
  11.         <li class="drawer">
  12.             <h2 id="toc-comments" class="drawer-handle">Comments</h2>
  13.        <?php recent_comments(); ?>
  14.         </li>
  15.         <li class="drawer">
  16.             <h2 id="toc-tags" class="drawer-handle">Tags</h2>
  17.             <ul>
  18.             <?php st_tag_cloud(); ?>
  19.             </ul>
  20.         </li>
  21.         <li class="drawer">
  22.             <h2 id="toc-categories" class="drawer-handle">Categories</h2>
  23.             <ul>
  24.             <?php wp_list_categories('show_option_all=HOME&title_li=&show_count=1&feed=<abbr title="Rich Site Summary または Really Simple Syndication">RSS</abbr>'); ?>
  25.             </ul>
  26.         </li>
  27.         <li class="drawer">
  28.             <h2 id="toc-peges" class="drawer-handle">Peges</h2>
  29.             <ul>
  30.                <?php wp_list_pages("title_li="); ?>
  31.             </ul>
  32.         </li>
  33.     </ul>
  34.     <div class="boxcap"></div>
  35.     </div>
  36. </div>

スタイルシート

CSS:
  1. #sidebar h2{ margin: 0;padding: 0;}
  2.       .drawers-wrapper {
  3.             position: relative;
  4.             width: 188px;
  5.         }
  6.         .drawer {
  7.             background:transparent url(http://images.apple.com/downloads/images/sideboxlight_bg20070611.gif) repeat-y scroll 0pt;
  8.             color:#76797C;
  9.             font-size:11px;
  10.             line-height:1.3em;
  11.         }
  12.         .boxcap {
  13.             height:5px;
  14.             left:0pt;
  15.             position:absolute;
  16.             width:100%;
  17.             z-index:100;
  18.             background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
  19.             margin-top:-5px;
  20.         }
  21.         .captop {
  22.             background-image:url(http://images.apple.com/downloads/images/box_188captop.png);
  23.             bottom:auto;
  24.             top:0pt;
  25.             margin-top:0;
  26.         }
  27.         .drawers {
  28.             margin-bottom:15px;
  29.             color:#76797C;
  30.             font-size:11px;
  31.             line-height: 18px;
  32.         }
  33.         .drawers A {
  34.             color:#666666;
  35.             text-decoration:none;
  36.             font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
  37.             font-size-adjust:none;
  38.             font-style:normal;
  39.             font-variant:normal;
  40.             font-weight:normal;
  41.         }
  42.  .drawer li {
  43.             border-bottom:1px solid #E5E5E5;
  44.             line-height:16px;
  45.             padding:6px 0pt;
  46.         }
  47.  
  48.  .drawer li ul { list-style-type: decimal; list-style-position: inside;}
  49.  .drawer li ul li{border-bottom: none; }
  50.  
  51.  UL {
  52.             list-style: none;
  53.             padding: 0;
  54.         }
  55.  UL.drawers {
  56.             margin: 0;
  57.         }
  58.         .drawer-handle {
  59.             background:#939393 url(http://images.apple.com/downloads/images/slider_handlebg188.png) no-repeat scroll 0pt;
  60.             color:#333333;
  61.             cursor:default;
  62.             font-size:12px;
  63.             font-weight:normal;
  64.             height:25px;
  65.             line-height:25px;
  66.             margin-bottom:0pt;
  67.             text-indent:15px;
  68.             width:100%;
  69.         }
  70.         .drawer-handle.open {
  71.             background-color:#72839D;
  72.             background-position:-188px 0pt;
  73.             color:#FFFFFF;
  74.         }
  75.         .drawer UL {
  76.             padding: 0 12px;
  77.             padding-bottom:0pt;
  78.         }
  79.         .drawer-content UL {
  80.             padding-top: 7px;
  81.         }
  82.         .drawer-content LI A {
  83.             display:block;
  84.             overflow:hidden;
  85.         }
  86.         .alldownloads li {
  87.             border:0pt none;
  88.             line-height:18px;
  89.             padding:0pt;
  90.         }

紹介には、Appleから直接画像にリンクしてました。

  • 上記設定だと、一番長いliに長さが統一されるようです。
  • 他の使用プラグイン、JavaScript によって変わります。
  • サイドバー単体なら、スタイルシートは変わりますがjQuery UIでも簡単に導入できました。

関連する投稿

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.