• MENU●●●●
  • h4グローバルブラインドをサイドオープンくスタイルへカスタマイズ


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

    スポンサー広告

    関連記事


    グローバルブラインド収納メニューを横開きサイドオープンくスタイル

    申し訳ございません ただいま不作動...修正中です

     

    当サイトのグローバル収納メニューを開く際  通常は下へブラインドが
    オープンしてゆくスタイルです

     

    ですが 横移動で開くことは出来ませんかと サポートフォーラムへ
    ご質問が寄せられましたので解説を追記いたします

     

    横に開くことは 工程の途中経過で知ってはいたんですが
    後悔を忘れてました すみません

     

    やはり 下へ直に開く以外のカスタマイズを求める方いらしたんですね

     

    2015 0308

    最初の前置き

     

    当ページはエントリーページです

     

    横移動のスタイルは 当ページのグローバルメニューで
    また下方の デモでご確認いただけます

     

    今回の横開きは スタイルシートで指定します

     

    当サイトの他のページは下開きですが

     

    当ページだけは デモが必要なので シリウス機能スタイルの割り込みに
    CSSを配置してこのページだけの横開きスタイルを表しております

     

    シリウス機能スタイルで割り込みに指定すると CSS指定が
    優先され他ページと異なるスタイルが表現できるのです

     

     

     

    前頁で 横開きとする場合は スタイルシートのみの指定で完了

     

    逆に
    特定ページだけを 下に開く場合は 当該ページで
    スタイルの割り込み指定をします

     

    今回のカスタマイズを指定すると

     

    グローバルメニュー 
    および記事内の同類スクリプトでは横開きが反映しますが

     

    サイドメニューでは反応しませんので通常スタイルとご確認ください

     

     

     

    当解説のスクリプトの原本はこちら参照
    シリウスのグローバルメニューを軽量プルダウンカスタマイズ備忘録

     

    確認してください
    記事内に置いたスクリプトは同類なので作動します

     


     

    横開き設定方法

     

    設定は至って簡単です

     

    以下行を追加するだけ
    float: right;
    width: 200px;

     

    スタイルシートを開きます

     

     

    以下項目にたどり着いてください

     

    /* サイドメニュー */

     

    #menu ul,#rmenu ul {
    list-style-type: none;
    list-style-image: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 1px;
    margin-left: 0;
    padding: 0px;
    border: 1px solid #0ACCFF;
    }

     

    #menu li,#rmenu li {
    list-style-type: none;
    list-style-image: none;
    margin: 0px;
    display: block;
    _display:inline;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border: 1px solid #0ACCFF;
    padding: 0px;
        ここに置きます

     

    }

     

     

     

    追加例です

     

    ここから
    #menu li,#rmenu li {
    list-style-type: none;
    list-style-image: none;
    margin: 0px;
    display: block;
    _display:inline;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border: 1px solid #0ACCFF;
    padding: 0px;

     

    float: right;
    width: 200px;

    }
    ここまで

     

    お解りただけましたか?

     

    これで終了です

     

     

    保存選択してくださいね

     

     

     

    同サイト内の個別ページで下方へ開くを設定する場合は
    float: right;
    width: 200px;

     

    記述を削除して ここから~ここまでの記述を
    スタイル割り込みに記載すればよいだけです

     

    スポンサーリンク

     

     

    h4グローバルブラインドをサイドオープンくスタイルへカスタマイズ
    シリウスのグローバルメニューを軽量プルダウンカスタマイズ備忘録
    シリウスカスタマイズトップ

    h4グローバルブラインドをサイドオープンくスタイルへカスタマイズ関連解説
    h4タグ要素でグローバルメニューをプルタウンメニューカスタマイズ
    シリウスのh4タグ要素を使ってグローバルメニューをプルタウンメニューへとカスタマイズ ただし当該解説はデフォルトテンプレート対応となります.
    h4タグでプルダウンをグローバルで正常反映するためのサイズ指定
    シリウスへh4タグを使いグローバルメニューを正常にプルダウン化するには メニューとサイト幅のサイズ調整が必要となります
    プルダウンh4見出し表示 メニューアイコンカスタマイズ
    シリウスにプルダウン見出しををh4タグで表示させた場合 またブラインドメニューのアイコンヲカラーをカスタマイズする方法を解説します
    h4スタイルで表示されるグローバルメニューのデザインカスタマイズ
    今回の解説のh4スタイルで表示されるグローバルメニューのデザインを見出しメニューを基本として画像やCSS指定で変化させてゆく手順をまとめております
    h4グローバル見出しメニューcssでデザインイメージカスタマイズ
    シリウスのh4グローバル見出しメニューをスタイルシートCSS編集でデザインイメージを簡単にカスタマイズする手順のご案内です

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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