• MENU●●●●
  • シリウスにアコーディオンメニュー上下開閉式を取り付けカスタマイズ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    上下開閉式アコーディオンメニューの詳細取り付け手順のご案内です

    今回ご案内の上下開閉式アコーディオンメニューはシリウスの各所に
    配置が可能です

     

    メインコンテンツとしてサイトメニューを切り替え装備としておりますが
    記事カラム内での配置 フリースペースでの配置表示も可能
    更に メニュー構成も個別指定が出来る使いやすいスクリプトです

     

    オールラウンド型で配備頂けますのでフル活用ください

     

     

    作動は上からも 下からも緩やかにブラインドアウトする微妙な動き
    サイイトメニューへ取り付けてもフリースペースに入れても高度な動きを
    表現します

     

    アコーディオンメニュー設置の解説は お隣ページでもしておりますが
    ここではバージョンアップへカスタマイズしたスクリプトでご案内いたします

     


     

    2015 0222
    シリウスアコーディオンメニューカスタマイズ 上下ブラインド作動

     

    シリウスにアコーディオンメニューを取り付けることは然程難易なことでは
    ありませんが 綺麗な動き 柔らかな動き などの事情を踏まえますと
    いいものがありませんでしたが スクリプトをカスタマイズして
    良い表現ができるスタイルを構築できましたので公開いたします

     

    さて 作動スタイルなのですが
    文章では上手く説明できないもので下方のDEMOでご確認ください 
    フリースペース配置は 右サイドメニューの下方でも配置しております

     

    ただし 当サイトの場合 スタイルシートいじくりすぎているため 
    形は同じなんですけど 配色がどこかのスタイルシート指定が
    影響しているためか?
    通常配色とは異なっていますことをご了承ください

     

    通常のシリウスに取り付けた場合は 以下のスタイルで
    開いたときは シリウスアイコンが見られます 

     

    参考はオレンジテンプレートですがその際はオレンジ指定の
    メニューアイコンが表示されます

     

    最初に 注意ごとをお知らせします

     

    今回のスクリプトを実行した場合

     

    表示階層は一階層のみとなります

     

    でも リンク先はカテゴリーでもエントリーでも自由に記載できます

     

    開くメニューが多すぎると 開いたメニューが画面上からはみ出すと
    閲覧不可になりますので 一つのメニューへあまり詰仕込まないと
    お考えください

     

    シリウスに適合性があるためか

     

    ページに取り付けても フリースペースに取り付けても
    動いてくれますが

     

    メニューは異なっていてもOKですね

     

    又スタイルシートでフォントカーを指定してますが
    記述のテキストにシリウス機能で色図けもできます

     

     

    とりあえずですが 
    当サイトのトップページでサイトメニューをアコーディオンに
    切り換えて配置しておりますのでご覧ください
    トップページ

     

    また お隣ページでは異なるスタイルのアコーディオンメニューの
    解説がございます
    サイトメニューをアコーディオンへと切り換える際はこちらの
    解説を参考にしてください
    シリウスアコーディオンサイトメニュー導入カスタマイズ

     

    サイトメニューを切り替える事は 面倒な時間を費やします

     

    不安がある場合は 最初フリースペースで
    スタイルなし選択 で配置してみて下さい

     

    慣れてからでも良いと思います

     

     


     

    通常のサイトでは以下のように表示されます

     

     

     

    当サイトでの作動スタイルをご確認いただくについて

     

    ここですみません
    追記
    ページ開設時は 
    クリックするとそのメニューから下へ記事を押しやるスタイルでしたが
    落ち着いてメニューが確認できないとのことで
    Zーindex指定で階層を上にして記事全体を押しやるのではなく
    記事上を流れるメニューのみの動きにしました

     

    こちらはDEMO

     

    作動をご確認ください

     

    なんか ページ内に入れると右端へ行っちゃいますが?

     

    弄りすぎたスタイルでしみませんが デザインやフォントカラーは
    ある程度カスタム可能です

     

     

     

     


     

     

    設置手順

     

    グーグルでホスティングされているjquery-1.10.2.min.jsを
    ダウンロードして使用します
    こちらでダウンロード
    http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

     

    解凍は不要です
    シリウス機能でサーバーにアップロードしてください

     

    アッツプロードはこれだけでです

     


     

    つぎにシリウスのMTMLを開きましょう

     

    トップページ カテゴリー エントリーページHTML内に読み込スクリプトを
    記載します

     

    シリウスサイトマップペーを表示させている場合はサイトマップHTML内にも
    記載してください
    サイト内検索 りんく集ページでも表示の際は記載

     

    まとめる場合はすべてにスクリプトを配置してください

     

    フリースペースで表示させる場合は全てに配置します

     


     

    読み込みスクリプト指定をします

     

    HTML head内に以下記述を貼り付けてください

     

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function(){
    $('#menu li').hover(function(){
    $("ul:not(:animated)", this).slideDown();
    }, function(){
    $("ul.child",this).slideUp();

     

    });
    });
    </script>

     

     


     

    つぎにスタイルシートを開いて一番下でよいので以下コードを
    張り付けます

     

     

    #wrap{
    width:1000px;
    margin: 0 auto:
    }

     

    ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #FFF; / タイトルフォントカラー
    }
    ul#menu li{
    float: left;
    position: relative;
    margin: 0;
    padding: 5px;
    width: 182px; /メニュー幅
    background-color:#AAAAAA;  /背景カラー
    display: block;
    }
    ul.child{
    secondpulldown; display: none;
    margin-left: -5px;
    padding: 0;
    position: absolute;
    z-index: 1000;
    }
    ul.child li a{
    padding: 5px 10px;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -5px;
    display: block;
    color: #00A5C5;
    }

     

    li a:hover{
    background: #BBBBBB; /ホバー背景
    }

     

    ここまで

     

     

    position: absolute;位置固定
    z-index: 1000;重なりを上にする
    上記で一部追記しておりますが 初期時点では上記記述がありませんで
    メニューと記事が同一階層にあり メニューが下へ一覧表示されると
    下にある記事まで下へ押しやってしまうのです

     

    上記追記理由で記述を追加しましたが ページ数が少ないサイトなどの場合は
    外してみて動きを確認してみるのも面白いかもしれません

     

    メニューがびょんびょん動きます

     

     


     

    カスタマイズ

     

     

    メニューの幅はシリウスデフォルトの幅より少し少なめにしてください
    当サイトは190px;ですが はみ出ますので
    width: 182px;にしてます

     

     

    背景は自由にカラーを指定できます
    background-color:#AAAAAA;  /背景カラー

     

     

    上記コードは プルダウンメニューの記述をアコーディオンスタイルに
    変更したものです

     

    あちこち弄り回しているもので サイズ変更か
    カラー変更程度の作業にとどめてください

     

    これ以上弄ると動かなくなる可能性が99%
    色々試した経験済みでのご報告です

     

     

    スタイルシートは保存選択で ここで終わり

     


     

    では一番面倒なメニューについて

     

    以下スクリプトは jqueryをシリウス機能でアップロードしておけば
    プレビューで確認ができますが スクリプトの制限している場合は
    全然動きませんことをお知らせしときます 

     

    以下記述をご確認下さい

     

    記述が折れてますがコピーしてシリウスのカラムに張り付けますと
    一列に改行されます
    以降シリウス操作画面で作業進めてください

     

     

    <div style="margin-bottom: 150px;">
    <ul id="menu">
    <li>SIRIUS MENU</li>
    <li>大まかタイトル
    <ul class="child">
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    </ul>
    </li>
    <li>大まかタイトルメニュ
    <ul class="child">
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    </ul>
    </li>
    <li>大まかタイトルメニュ
    <ul class="child">
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    </ul>
    </li>
    <li>大まかタイトルメニュ
    <ul class="child">
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリックテキストページリンク</a></li>
    </ul>
    </li>
    <li class="menu">会社案内
    <ul class="child">
    <li><a href="http://www.i-netlibrary.net/#">会社概要</a></li>
    <li><a href="http://www.i-netlibrary.net/#">会社受け</a></li>
           <li><a href="http://www.i-netlibrary.net/#">会社マップ</a></li>
    </ul>
    </li>
    </ul>

     

     

    </div>

     

     

     

     

    コードを張り付けますとプレビューで作動確認がいただけます

     

    では次に参ります
    <span style="color:#FF0A0A">メニュー記載手順ご案内します</span>

     

    一番上と一番下のdiv要素は 削除してもあまり変わることはありませんが

     

    一ページに複数配置する場合は カラム内でくっついてしまうことも
    あるかもしれませんのでとりあえずは作動確認後のご判断としてください

     

     

    メニューの追加は記載項目を追加すれば良いだけです

     

    ?と思われる方は

     

    当サイトのトップページでソースを確認すればご理解できます

     

    <span style="color:#FF0A0A">ミスしそうな箇所</span>

     

    記載をご覧ください
    <a href="http://www.i-netlibrary.net/#">会社概要</a>

     

    # がありますね

     

    # があればメニューの左にシリウスのメニューアイコンが現れますが
    無ければ現れません

     

     

     


     

    ほぼこれで ご理解できたかと思われますので解説は終わりますが

     

    意味不明といわれる方はサポートよりご質問ください 

     

     

    ここでのスタイルをグローバルメニューでも取り入れに成功しました
    グローバルでアコーディオンを表示されたい方はこちらをご覧ください

    シリウスのグローバルメニューを軽量プルダウンカスタマイズ備忘録

     


     

    早速ですが 質問がございましたので追記いたします

     

    ごあんなに従い 取り付けたのですが

     

    IEで閲覧すると正常なのですが googleプラウザですと
    メニューが7段あるのに 3段しか表示されないとのことでした

     

    記載したコードを送信いただき確認したところ

     

    <ul class="child">
    <li><a href="http://www.i-netlibrary.net/#">クリック</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリック</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリック</a></li>
    <li><a href="http://www.i-netlibrary.net/#">クリック</a></li
    </ul>
    </li>

     

    <li><a href="http://www.i-netlibrary.net/#">クリック</a></liここ

     

    >;が一つ欠けていました

     

    IEではエラーなしなんですが
    googleプラウザですとはっきり識別され 欠けた箇所以降は
    不認識となるようです

     

    >を追記しアップロードしましたら正常に反映されたとのことです

     


     

    スポンサーリンク

     

     

    シリウスに上下開閉式アコーディオンメニューカスタマイズまとめ
    プルダウン式コンテンツメニューを作る方法 アーカイブにつかえるかも?
    シリウスカスタマイズトップ

    シリウスにアコーディオンメニュー上下開閉式を取り付けカスタマイズ関連解説
    フリースペースでプルタウンを作ってメニューの大型化??
    シリウスの2カラムや大型サイトではメニューが多くなると構成に困ることもありますね でもプルダウン式メニューを設定すればメニューを最小限に抑えられます
    テーブルを利用してナビゲーションメニューをつくリます
    記事欄の好みの位置に 複数メニューで表示させるちび助グローバルでプルタウンスタイルを簡単に作る方法です
    シリウスサイトでプルダウンメニュ―をユニークにカスタマイズ
    シリウスサイトでプルダウンメニューを画像使用でスタイルをカスタマイズしてみるとユニークなサイトイメージを読者様に伝えられるかな?
    シリウスの記事をプルダウンメニューで隠すカスタマイズ
    シリウスの記事は少数に見えてもプルダウンメニューを使い多くのコンテンツを隠している場合がございます クリックすると ドド~ンと表れますなんてカスタマイズですが......
    シリウスのサイトメニューをプルダウンメニューへカスタマイズ
    シリウスのページコンテンツを表すサイトメニュー はサイトが大型化するに従い 整理に悩むことも? そんな場合はプルダウンメニュー形態に集約してみる事も一考 jquery-1.10.2.min.js採用でご案内
    シリウスにアコーディオンサイトメニューを導入するカスタマイズ
    シリウスサイトメニューをアコーディオンスタイルへ変更する際の適合スクリプトがございましたので公開致します サイトが大型化となった場合はメニューの収納から多項目表示可能なカスタマイズを施行して情報開示を解り易くしましょう
    アコーディンメニューシリウス機能でデザインカスタマイズ
    シリウスに導入したアコーディンメニューをシリウス機能でデザインを変更してみましょう CSS指定のカラーではなく 画像を採用してのカスタマイズです

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト