サイトマップ
グローバルブラインド収納メニューを横開きサイドオープンくスタイル
申し訳ございません ただいま不作動...修正中です
当サイトのグローバル収納メニューを開く際 通常は下へブラインドが
オープンしてゆくスタイルです
ですが 横移動で開くことは出来ませんかと サポートフォーラムへ
ご質問が寄せられましたので解説を追記いたします
横に開くことは 工程の途中経過で知ってはいたんですが
後悔を忘れてました すみません
やはり 下へ直に開く以外のカスタマイズを求める方いらしたんですね
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タグでプルダウンをグローバルで正常反映するためのサイズ指定
- シリウスへｈ4タグを使いグローバルメニューを正常にプルダウン化するには メニューとサイト幅のサイズ調整が必要となります
- プルダウンｈ４見出し表示 メニューアイコンカスタマイズ
- シリウスにプルダウン見出しををｈ4タグで表示させた場合 またブラインドメニューのアイコンヲカラーをカスタマイズする方法を解説します
- ｈ４スタイルで表示されるグローバルメニューのデザインカスタマイズ
- 今回の解説のｈ４スタイルで表示されるグローバルメニューのデザインを見出しメニューを基本として画像やＣＳＳ指定で変化させてゆく手順をまとめております
- ｈ4グローバル見出しメニューｃｓｓでデザインイメージカスタマイズ
- シリウスのｈ4グローバル見出しメニューをスタイルシートＣＳＳ編集でデザインイメージを簡単にカスタマイズする手順のご案内です
