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

 

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

 

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

 

 

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

 

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

 

---

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

---

 

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

 

 

 

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

 

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

 

こちらはＤＥＭＯ

 

作動をご確認ください

 

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

 

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

 

 

 

---

 

 

設置手順

 

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

 

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

 

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

 

---

 

つぎにシリウスのＭＴＭＬを開きましょう

 

トップページ　カテゴリー　エントリーページ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: #ＦＦＦ; / タイトルフォントカラー
}
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;重なりを上にする
上記で一部追記しておりますが　初期時点では上記記述がありませんで
メニューと記事が同一階層にあり　メニューが下へ一覧表示されると
下にある記事まで下へ押しやってしまうのです

 

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

 

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

 

 

---

 

カスタマイズ

 

 

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

 

 

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

 

 

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

 

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

 

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

 

 

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

 

---

 

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

 

以下スクリプトは　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>

 

#　がありますね

 

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

 

 

 

---

 

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

 

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

 

 

ここでのスタイルをグローバルメニューでも取り入れに成功しました
グローバルでアコーディオンを表示されたい方はこちらをご覧ください
シリウスのグローバルメニューを軽量プルダウンカスタマイズ備忘録

 

---

 

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

 

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

 

ＩＥで閲覧すると正常なのですが　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ここ

 

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

 

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

 

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

 

---

 

スポンサーリンク

 

 

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