Glossy Horizontal Menuを使う

PloneのIRCでGlossy Horizontal Menuを使いたいという人がいたので教えていたら途中でどっかにいってしまったので、悔しさのあまりここに書いておくことにします。

基本的には他のメニューも同じように使えるはずです。

マークアップの確認と変更

サンプルとPloneの間でマークアップが異なっていると適用できませんので、サンプルと同じようなマークアップになるようにHTMLを確認しておきます。

Ploneのglobalnavは下記のようになっています。

<tal:tabs tal:condition="view/portal_tabs"
          i18n:domain="plone">
    <h5 class="hiddenStructure" i18n:translate="heading_sections">Sections</h5>

    <ul id="portal-globalnav">
        <tal:tabs tal:repeat="tab view/portal_tabs"><li tal:attributes="id string:portaltab-${tab/id};
                            class python:view.selected_portal_tab==tab['id'] and 'selected' or 'plain'">
            <a href="" 
               tal:content="tab/name"
               tal:attributes="href tab/url;
                               title tab/description|nothing">
                Tab Name
            </a></li></tal:tabs>
    </ul>
</tal:tabs>

talで書かれているので見にくいかもしれませんが、レンダリングされると下記のようになります。

    <ul id="portal-globalnav">
        <li id="portaltab-index_html" class="selected">
            <a href="http://nagosui.org/PloneSkin" title="">ホーム</a></li>
        <li id="portaltab-Members" class="plain">
            <a href="http://nagosui.org/PloneSkin/Members" title="ユーザのホームディレクトリ">ユーザ</a></li>
        <li id="portaltab-news" class="plain">
            <a href="http://nagosui.org/PloneSkin/news" title="このサイトのニュース">ニュース</a></li>
        <li id="portaltab-events" class="plain">
            <a href="http://nagosui.org/PloneSkin/events" title="このサイトのイベント">イベント</a></li>
        <li id="portaltab-test" class="plain">
            <a href="http://nagosui.org/PloneSkin/test" title="">test</a></li>
    </ul>

一方今回のサンプルでは下記のようになっています。

<ul class="glossymenu">
    <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
    <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
    <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>    
    <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>    
    <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>    
    <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>    
</ul>

両者の間で異なっているのは、サンプルの方ではタブの名前が<b>でマークアップされている点です。そこでPloneのtalを、タブの名前が<b>でマークアップされるように変えてやります。

「ZMI→portal_view_customizations→plone.global_sections」を下記のように変更します。

<tal:tabs tal:condition="view/portal_tabs"
          i18n:domain="plone">
    <h5 class="hiddenStructure" i18n:translate="heading_sections">Sections</h5>

    <ul id="portal-globalnav">
        <tal:tabs tal:repeat="tab view/portal_tabs"><li tal:attributes="id string:portaltab-${tab/id};
                            class python:view.selected_portal_tab==tab['id'] and 'selected' or 'plain'">
            <a href="" 
               tal:attributes="href tab/url;
                               title tab/description|nothing">
                <b tal:content="tab/name">
                    Tab Name
                </b>
            </a></li></tal:tabs>
    </ul>
</tal:tabs>

※<b>を使いたくない人もいるかと思いますが、とりあえずここではそのまま使うことにします。

CSSのカスタマイズ

CSSの方の変更は、

• 画像のアップロード
  
• 既存のglobalnavスタイルの削除
• サンプルCSSの適用

という3点を行います。

画像のアップロード

メニューで使う画像をアップロードしておきます。今回のサンプルでは3枚の画像を使うことになっています。ここでは青色のメニューを適用するために、サンプルサイトから「menub_bg.gif」「menub_hover_left.gif」「menub_hover_right.gif」をダウンロードしておきます。

「ZMI→portal_skins→plone_styles→custom」フォルダへ行き、右上のドロップダウンメニューから「Image」を選び、各画像をアップロードします。

既存のglobalnavスタイルの削除

既存のスタイルはpublic.cssに記述されています。「ZMI→portal_skins→plone_styles→public.css」をクリックし、「customize」ボタンを押します。

/* The global section tabs. */
#portal-globalnav {...

という部分を探して、「#portal-globalnav」で始まるスタイルをすべて削除します。削除が完了したら「Save Changes」ボタンを押します。

サンプルCSSの適用

サンプルのスタイルはploneCustom.cssに記述することにします。「ZMI→portal_skins→plone_styles→ploneCustom.css」をクリックし、「customize」ボタンを押します。

サンプルCSSをコピペして、「.glossymenu」を「#portal-globalnav」に、「.current」を「.selected」に、（画像名の）「menur」を「menub」に変更します。すると下記のようになります。

#portal-globalnav{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(menub_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

#portal-globalnav li{
    float:left;
}

#portal-globalnav li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;    
}

#portal-globalnav li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

#portal-globalnav li.selected a, #portal-globalnav li a:hover{
    color: #fff;
    background: url(menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

#portal-globalnav li.selected a b, #portal-globalnav li a:hover b{
    color: #fff;
    background: url(menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

最後に「Save Changes」ボタンを押せばOK。

サイトを確認してみると下記のように見えるはずです。

Happy Skinning :p