サイトマップ
CSSプルダウン構造 HTML内に要素を設定する ステップ1
シリウスに、CSS形成でプルダウンナビを導入する際、HTML内指定の
基礎的コード、標準タイプを説明します
通常のナビでのメニューはクリックすればそのリンクページに移動しますね
しかし、
プルダウン化として形成した場合は、ナビでのメニューは、ホバーのみで
リンク移動はせず、以下にプルダウンされた表示指定したメニューの一覧が
表示されクリックすればページリンク移動します
標準タイプの作動をご確認ください
通常 グローバルナビメニューは、シリウスでいえばカテゴリーの
いずれか？...誘導したい、主張したいメニューを書き込みますが
プルダウン化されるメニューの場合、トップ位置のメニューはリンクせず
ページのメニュー一覧を表示しますので、コンテンツに分けて分類し
まとめる必要があり、それを考慮してグループ分けしてください
トップ位置のメニューは、親要素で一覧表示されるページメニューは
子要素
子要素は、エントリー カテゴリーに限らずリンク飛ばしができますので
トップ位置のメニューで 以下におくコンテンツを大まかにイメージする
バラコンテンツではなく、関連するグループ分けをしてまとめるとお考え下さい
仕組み（単体）
<li><a href="#">menu</a>親要素..ホバーのみ リンクせず
<ul>
<li><a href="#">カテゴリーページテキスト</a></li>子要素
<li><a href="#">エントリーページテキスト</a></li>
<li><a href="#">エントリーページテキスト</a></li>
<li><a href="#">エントリーページテキスト</a></li>
</ul>
</li>
親要素および子要素は、シリウスでで、HTMLテンプレート内に
配置します
大事なこと
この仕組みをシリウスで表示するには、シリウス機能で表示される
グローバルメニューを非表示とする必要があります
シリウスのグローバルナビはスタイルシートで
position: absolute; 絶定位置と指定されており表示指定が
されていると入り込めなのです
非表示方法は、メニューの編集で削除するだけです
現時点、デフォルトナビを表示していない場合は、削除作業なしでOK
<body>
<div id="container">
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->
ここですね
<!-- ★メインコンテンツここから★ -->
<div id="contents">
<div id="main">
<% freeSpace1 %>
トップページ カテゴリー エントリーHTMLすべてにナビ要素は配置する
必要があります
トップページだけという方は、他の配置をしなければよいだけ
テキストメニューは、HTMLテンプレートごとに書き換えても、子要素の
数に違いありでも問題ありませんので、
カテゴリーで誘導したいページ
エントリーでーで誘導したいページと選別指定ができます
以下のプルダウン記述ですが、基本構造で構成されており
そのまますべてのスタイルに対応しています
今回ご案内する複数のスタイルは、デザインカラーも含めすべて
スタイルシートでCSS指定するので以下HTMｌ記述はそのまま使ってください
コピペしてお使いください
リンク テキストのみサイトに合わせご自分で範囲を決めて編集ください
<li><a href="#">トップメニュータイトル/a>は、
リンクを入れません トップテキストのみをメニューごとに書き換えてください
プルダウンの子要素は、関連ページのリンクとタイトルを書き加えます
<li><a href="#">子メニュー</a></li>
<li><a href="#">その他関連</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
サイト幅を、９００～1000pxほどと想定して横に5メニューと
しています
ここから
<div id="normalnav" class="drop">
<li><a href="#">トップメニュータイトル/a>
<ul>
<li><a href="#">子メニュー</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</div>
ここまで
この要素構成は一段階ですが、2段階構造もございます
2段階というのは、下にプルダウン表示される子メニューをクリックすると
その下にさらに孫メニューが表示されるというものですが、混乱を
招くような構造で初心者向きではありません
ネット上でもほとんど見かけることもなく、今やスマートフォンでの
閲覧を考慮すればみずらくもなり一段階の説明どまりとします
サイト全体が一つのデザインスタイルでは、いやという方もおられますね
そんな場合は、
色違い、作動するスタイルの違いを求めるなら」スタイルシートからの
指示で変更できます
重要レスポンシブデザイン対応
当サイトでスマートフォン対応のレスポンシブ構造を取り入れてる方から
CSSナビを設定し、以降ナビがスマートフォン閲覧の際、縮小されない...
と質問がございました
説明不足で大変、申し訳ありません
当サイトで解説しているレスポンシブデザインのページで
シリウス2カラムテンプレート レスポンシブデザイン設定方法
mediaコードの解説があります...参照
サイトに組み込んでいるスタイルシートのmedia内に プルダウンの
デザインを指示する記述を一項目、一部改行して入れ込めば解消できます
こちらを追加する際は、次にページも確認されてから実行してください
プルダウン記述はこの箇所だけを使います
.drop{
*zoom: 1;
list-style-type: none;
width: 900px; 書き換え箇所
margin: 0px auto 30px;
padding: 0;
}
レスポンシブ用改行コード
width: 900px;を width: 100%;に書き換える
.drop{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 30px;
padding: 0;
}
以下 追加例
レスポンシブメディアコード
@media(max-width:698px){
#container{
width: 100%;
}
.drop{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 30px;
padding: 0;
}
必読 追加記事
参照記事としますが、ここで解説したＨＴＭＬ記述は、ナビとして使用する
ものですが、２、3カラムサイトの場合、フリースペースに入れると縦並びと
表示されます
当サイトの右端メニューは、グローバルナビに置いたものをそのまま
フリースペースに入れたもの（リングスタイル）
スタイルシートでプルダウン形式を選択してフリースペースに置けば
ＷＰなどに見られるプルダウン式サイドメニューを表すことができるということ
シリウス標準のページメニューもＨＴＭＬテンプレートをカスタムすれば
動作動を表すことができます
興味のある方は、こちらサイトの取り付け法をそのままjquery無しで対応できますご確認ください
では、スタイルシートでのスタイル指定へ進みましょう
プルダウンナビゲーションCSS形成｜標準タイプ
スポンサーリンク
ページトップ
CSSプルダウン構造基礎｜HTML要素設定
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP
- CSSで簡単にグローバルナビを作成する方法
- シリウスのグローバルナビをCSS記述で簡単に設定するカスタマイズする方法のご案内です...初心者向け解説
- プルダウンナビゲーションCSS形成｜標準タイプ
- シリウスのグローバルナビゲーションをCSS記述のみで標準タイプのプルダウンスタイルへ形成する手順のカスタマイズ方法
- CSS形成プルダウンナビゲーション各種スタイルの指定
- シリウスに導入するCSS形成のプルダウンナビゲーションは、CSS指定で各種の可変が簡単に設定可能です
- プルダウンで開いたメニューを拡張するCSS指定
- シリウスへ導入したプルダウンメニューをクリックして開いた際、テキストを理解しやすくするためにBOXを拡張するCSS記述の指定カスタマイズです
- 一つのサイトで複数のグローバルナビスタイルを設定する指定法
- シリウスデフォルトでは、統一されたグローバルナビで指定されますが、CSS形成の場合は、好みに合わせ複数のデザイン指定が可能です
- シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウン
- シリウスのグローバルナビスタイルは、デフォルトそのままで、CSS指定によりプルダウン作動を実施させる構築法のカスタマイズのご案内です
- 枠線.boxで、見出し.メニューを囲むデザインスタイルの設定
- シリウスに外部CSS追加で形成されるナビ見出しや 下りメニューは枠線boxでか組むことができイメージを変えることができます
- ナビゲーション左サイドに現れるli 丸ボッチの障害について
- シリウスに外部からプルダウンナビゲーションをjquery、またはCSSで導入した際、丸ボッチが現れることがありますが、デザイン的に邪魔なので削除します
- CSS形成ナビ スマートフォン閲覧障害対処法
- シリウスのHTMｌ、スタイルシートに組み込み設定したCSS構築のナビは、PCでは視覚上効果的ですがスマートフォンでは視野範囲を狭めてしまうという障害が見られるのです..対処法はこちらで.....
