シリウスに導入するCSS形成プルダウンメニューのいろんなデザインや
作動スタイルは、スタイルシートですべてのカスタマイズが行えます

 

HTML内に置く基本コードは,変えなくともよいとご理解ください

 

 

ここでは、ステップ2として標準タイプで反映される基本形式の
プルダウンコードをもとにカスタマイズのCSS指定手順のご案内となります

 

誰しもデザインは好みが違うと思われるので、カスタマイズはご自由に
行って下さい

 

 

初めに、当サイトに来られた方へ
解説は、プルダウンスタイルの標準タイプをCSSでデザイン形成、
作動スタイルを指定する記述のCSS解説で、HTMLテンプレート内に
記載するプルダウン基礎コードは当ページに含まれておりません

 

HTML内に配置する基礎コードはこちらでご確認ください
CSSプルダウン構造基礎｜HTML要素設定

 

 

 

基本形であるデザイン　スタイルおよび作動をご確認ください

 

 

スタンダードな標準タイプDEMO
作動の参照

 

 

作動が、確認できましたらCSS指定を理解しましょう

 

スタイルシートでのデザイン　作動指定

 

 

標準タイプのCSS指定

 

以下CSS記述をスタイルシートの　/* グローバルメニュー */項目近くに
張り付ければ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;
}

 

 

ここまでをスタイルシートに配置します

 

 

 

---

 

カスタマイズ

 

プルダウンメニュ―が開いた際、拡張されるとかの変更を加える場合は
記載追加となりますが、ここでは、標準タイプでのご案内ですので、
カスタマイズは次のステップ3、4でご確認ください
次のステップ3　CSS形成プルダウンナビゲーション各種スタイルの指定

 

 

デザイン指定の項目
以下のCSSは基本系で、メニューのカラー、フォントカラー
リンクした際のカラーとかで動きを指示することはございません

 

カラー変更は、カラーコードを書き換えれば完了です

 

 

.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;
}

 

 

念のため

 

デザイン以外、作動スタイルはここだけの項目で指定していることを
ご理解ください

 

とは言っても、どこをいじれば作動が指定できるのかですね

 

まずは、各種スタイルを確認してから巻末メニューよりスタイル指定を
ご覧ください

 

表示スタンダード以外の各種スタイルはこちらでご確認ください
CSS形成プルダウンナビゲーション各種スタイルの指定

 

 

 

スポンサーリンク

 

 

 

プルダウンナビゲーションCSS形成｜標準タイプ
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP