TOP

ナビデザイン スタイルを複数指定するご案内

シリウスサイトのデフォルト状態ではサイト全体で一つのデザイン、
メニューも同様、
統一された形式になりますが、CSS形成のグローバルナビを取り込んだ場合、

 

大まかには、トップ カテゴリー エントリーページ、それ以下も同様ですが、
HTMLテンプレートごとにカラーや作動するスタイルを可変指定できるのです

 

詳細に言えば、エントリーぺ―ジならスタイルの割り込み窓にCSS追記すれば
そのページでの指定が優先されるので個別にスタイルを変えられるのです

 

ただし、スタイルの割り込みで指定しただけですと、スマートフォン対応の
レスポンシブ化が働きませんので、メディアコードもスタイルシートへ
配置してください

 

 

レスポンシブメディアコード
@media(max-width:698px){
#container{
width: 100%;

 

.drop{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 30px;
padding: 0;
}
}

 

 


 

 

トップ カテゴリー エントリーページでスタイルを変える際すること

 

 

まず、HTMLテンプレートに配置する記述について

 

div id名を変える...です

 

統一表示なら変える必要もありませんが、分ける際はスタイルシートで
指示する分別の認識ができるようHTMLテンプレートは異なるIDにします

 

すべて変える必要もありません
一文字の追加だけでもOKです

 

<div id="ここを変える" class="drop">

 

 

 

<div id="normalnava" class="drop">
<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>

 

トップページは変えなくともOK
カテゴリー エントリーページを変えましょう

 

 

 

次は
スタイルシートへ

 

 

ここで書き換えるのではなく、記載を追加します
下へスクロースしてください

 

 

.drop{
*zoom: 1;
list-style-type: none;
width: 900px;
margin: 0px auto 30px;
padding: 0;
}
.drop:before, .dropmenu:after{
content: "";
display: table;
}
.drop:after{
clear: both;
}
.drop li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.drop li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #008181;
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.drop li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.drop li ul li{
width: 100%;
}
.drop li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #FF0A0A;
text-align: left;
}
.drop li:hover > a{
background: #00C5A5;
}
.drop li a:hover{
background: #00C5A5;
}

 

 

/*表示スタイルの指定項目*/

 

 

#normalnav li ul{
display: none;
}
#normalnav li:hover ul{
display: block;
}

 

 

ここまでは、トップページHTMLを指定するコードですね

 

 

カテゴリー エントリーページで可変するスタイルを指定する際は

 

下に、トップページ用コード以下に追加します

 

#normalnavの記載をカテゴリーかエントリーHTMLを id名と
同名にしてください

 

 

#normalnav ul{
overflow: hidden;
width: 0;
transition: .5s;
}
#normalnav li:hover ul{
width: 100%;
}
#normalnav li:hover ul li a{
white-space: nowrap;
}

 

 

上記述がカテゴリーを指定し、エントリーページも異なる可変を
指定する際は、もう一つの指定コードを追加し、#normalnavを
書き換えてください

 

 

HTML内に配置したナビコードidをスタイルシートで指定した読み込みコードが
認識し作動させるのです

 

 

 


 

スポンサーリンク

 

 

 

ページトップ
一つのサイトで複数のグローバルナビスタイルを設定する指定法
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP

 

 

 

一つのサイトで複数のグローバルナビスタイルを設定する指定法関連解説
CSSで簡単にグローバルナビを作成する方法
シリウスのグローバルナビをCSS記述で簡単に設定するカスタマイズする方法のご案内です...初心者向け解説
CSSプルダウン構造基礎|HTML要素設定
シリウスのMTML内にプルダウン化する要素の基礎コード詳細と構造の理解を説明しますので、導入のカスタマイズをされたい方は、コピペしてお使いください
プルダウンナビゲーションCSS形成|標準タイプ
シリウスのグローバルナビゲーションをCSS記述のみで標準タイプのプルダウンスタイルへ形成する手順のカスタマイズ方法
CSS形成プルダウンナビゲーション各種スタイルの指定
シリウスに導入するCSS形成のプルダウンナビゲーションは、CSS指定で各種の可変が簡単に設定可能です
プルダウンで開いたメニューを拡張するCSS指定
シリウスへ導入したプルダウンメニューをクリックして開いた際、テキストを理解しやすくするためにBOXを拡張するCSS記述の指定カスタマイズです
シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウン
シリウスのグローバルナビスタイルは、デフォルトそのままで、CSS指定によりプルダウン作動を実施させる構築法のカスタマイズのご案内です
枠線.boxで、見出し.メニューを囲むデザインスタイルの設定
シリウスに外部CSS追加で形成されるナビ見出しや 下りメニューは枠線boxでか組むことができイメージを変えることができます
ナビゲーション左サイドに現れるli 丸ボッチの障害について
シリウスに外部からプルダウンナビゲーションをjquery、またはCSSで導入した際、丸ボッチが現れることがありますが、デザイン的に邪魔なので削除します
CSS形成ナビ スマートフォン閲覧障害対処法
シリウスのHTMl、スタイルシートに組み込み設定したCSS構築のナビは、PCでは視覚上効果的ですがスマートフォンでは視野範囲を狭めてしまうという障害が見られるのです..対処法はこちらで.....