TOP

デフォルトスタイルでCSS形成のプルダウンを実施する方法

シリウスデフォルトナビ背景は画像で読み込まれており、斜陽もあり
立体的にも見えます

 

CSS形成の場合、斜陽が表せないので平面的で暖かさが感じられない
と感じられ、プルダウン要素は導入したいがデザイン的に不満という方も
おられるでしょう

 

シリウスのナビイメージに慣れ親しんでいると、立体感のない平面デザインは
受け止めがたいもの

 

で、そんなスタイルを表すなら以下DEMOをご覧ください

 

 

 

 

 

DEMOナビの画像は、多少いじっているのですが、シリウスingフォルダーより
読み込まれています

 

 

 

 

見た目は同じですが、シリウスのメニューの編集で設定したグロ―バル
ナビの表示法ではなく、CSS形成となります

 

こちらは、CSS指定に読み込み記述を加えるだけですぐ完了します

 

スタイルシートの、#topmenuはグローバルメニューを指示しており

 

見出し背景として
background-image: url(img/menu_item.jpg);
を指定する項目があります

 

その項目を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-image: url(img/menu_item.jpg); 追加した記述
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: #0A8FFF; 
}
.drop li a:hover{
background: #00C5A5; 
}

 

 

備考1

 

.drop li a:hoverの項目で
リンクでhoverした際に、やはりシリウスのhover画像を指定することも
できるのですが、プルダウンメニューへも反映されてしまうので
未設定が良いかなと思います

 

 

備考2

 

h4見出し背景を読み込むことも可能です

 

スタイルシートに記載される記述では読み込まれないので
以下記述をお使いください

 

background-image: url(img/menu_h4.jpg);

 

縦幅が異なるので
padding: 15px 0 11px; ここを書き換えてください

 

 

.drop li a{
display: block;
margin: 0;
padding: 15px 0 11px; ここを書き換える
background-image: url(img/menu_item.jpg); 
background: #008181; 
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
}

 

関連情報は巻末でご確認ください

 

 

スポンサーリンク

 

 

 

ページトップ
シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウンカスタマイズ
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP

 

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