jQuery for WP Apple sidebar

2008/06/16 0 コメント カテゴリ: WORDPRESS

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

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

PLAIN TEXT
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>

PLAIN TEXT
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は実際はプラグインのオプション設定で記入しておく

PLAIN TEXT
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>

スタイルシート

PLAIN TEXT
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でも簡単に導入できました。

関連する投稿

コメントをどうぞ

Commenter Gravatar