bootstrap3のデフォルトのtab、pillsクラスでナビメニューやサイドメニューを作成する

使用アドオンFree Simple Nav Menu Block

Free Simple Nav Menu Blockのアドオンをインストールして、Simple Navi Menuというブロックを任意のエリアにドラッグします。

スクリーンショット 2020-10-08 10.42.49.png

設定ウインドウで表示されます。

スクリーンショット 2020-10-08 11.08.21.png

Nav Menu StyleでデフォルトのLInksのまま保存すると単なるリンクのリストとして表示されます。

スクリーンショット 2020-10-08 11.10.42.png

この場合はコードは、シンプルは

<ul><li>リンク</li></ul>となります。

 

各スタイルはview.phpの以下のswitch caseで記述されています。

tab,pillsはbootstrap3のデフォルトのクラスでbreadcrumbはview.cssで定義されています。

<?php
    if ($pages) {
        switch ($menu_style) {
            case 0:
                $style = 'links';
                $tag_open = '<ul>';
                $tag_close = '</ul>';
                break;
            case 1:
                $style = 'breadcrumbs';
                $tag_open = '<ol class="breadcrumb">';
                $tag_close = '</ol>';
                break;
            case 2:
                $style = 'tabs';
                $tag_open = '<ul class="nav nav-tabs">';
                $tag_close = '</ul>';
                break;
            case 3:
                $style = 'pills';
                $tag_open = '<ul class="nav nav-pills">';
                $tag_close = '</ul>';
                break;
            case 4:
                $style = 'stacked';
                $tag_open = '<ul class="nav nav-pills nav-stacked">';
                $tag_close = '</ul>';
                break;
            case 5:
                $style = 'sidebar';
                $tag_open = '<ul>';
                $tag_close = '</ul>';
                break;
        }
        ?>

inline List

スクリーンショット 2020-10-08 11.15.35.png

Tabs

スクリーンショット 2020-10-08 11.16.50.png

Pills

スクリーンショット 2020-10-08 11.18.05.png

 

Stacked

スクリーンショット 2020-10-08 11.19.27.png

Sidebar

スクリーンショット 2020-10-08 11.21.12.png

となります。

各タグとも非常にシンプルな構造ですので、カスタムテンプレートで目的のスタイルにするための土台として活用しやすいでしょう。

オプション設定は

スクリーンショット 2020-10-08 11.24.16.png

Include Homeはホームリンクを表示するか否か?パンくずに使うときなどは必要ですね。

Show Childrenは、子ページを表示するかどうかです。

Parent Link No-Goは子ページを表示した際に、下図の黄色のメニュー。その親ページのリンクを生かすかどうかです。チェックすると、子ページが表示されますがリンクはしません。

スクリーンショット 2020-10-08 11.26.01.png

Show Pages Excluded from Nav

このアドオンは標準のナビブロックと同じく、ナビから除く属性が反映します。

スクリーンショット 2020-10-08 11.30.41.png

このチェックを入れると、ナビから除く属性を無視して表示します。

 

検索

concrete5の基本的な使い方や、コミュニティでのFAQなどの情報共有はhttp://concrete5-japan.org/をご覧ください。

追加テーマや拡張ブロック(アドオン)のインストール・アンインストール方法は5.6の記事ですが方法は同じですでのこちらを参照ください。