枠線.boxで見出し.メニューを囲む方法
シリウス内で表示するCSS形成のグローバルナビの見出しやメニューを
枠線BOXで囲んでみるとサイトイメージが、良くも悪くもどちらかとは?
あなたのサイトに合わせればですが、指定次第で変わります
枠線BOXは、そのままでも使えますが、曲線での表現もできますので
好みに合わせ数値指定で変更してください
とりあえず、DEMO画像
カスタマイズは以下の2行を.drop項目へ追加するだけ
border: 1px solid #0ACCFF; 枠線
border-radius:7px; 曲線の度合いを数値で指定
追加箇所をご確認ください
.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/topmenu.jpg);
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
border: 1px solid #0ACCFF;
border-radius:7px;
}
.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;
border: 1px solid #0ACCFF;
border-radius:7px;
}
.drop li:hover > a{
background: #00C5A5;
}
.drop li a:hover{
background: #00C5A5;
}
上記項目では、トップ見出し メニューとも指定しておりますが
見出しはには、不要とする場合記述を削除してください
その逆の場合も同様です
他のカスタマイズ要素も検証後、追記してまいります
スポンサーリンク
ページトップ
枠線.boxで、見出し.メニューを囲むデザインスタイルの設定
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP
- CSSで簡単にグローバルナビを作成する方法
- シリウスのグローバルナビをCSS記述で簡単に設定するカスタマイズする方法のご案内です...初心者向け解説
- CSSプルダウン構造基礎|HTML要素設定
- シリウスのMTML内にプルダウン化する要素の基礎コード詳細と構造の理解を説明しますので、導入のカスタマイズをされたい方は、コピペしてお使いください
- プルダウンナビゲーションCSS形成|標準タイプ
- シリウスのグローバルナビゲーションをCSS記述のみで標準タイプのプルダウンスタイルへ形成する手順のカスタマイズ方法
- CSS形成プルダウンナビゲーション各種スタイルの指定
- シリウスに導入するCSS形成のプルダウンナビゲーションは、CSS指定で各種の可変が簡単に設定可能です
- プルダウンで開いたメニューを拡張するCSS指定
- シリウスへ導入したプルダウンメニューをクリックして開いた際、テキストを理解しやすくするためにBOXを拡張するCSS記述の指定カスタマイズです
- 一つのサイトで複数のグローバルナビスタイルを設定する指定法
- シリウスデフォルトでは、統一されたグローバルナビで指定されますが、CSS形成の場合は、好みに合わせ複数のデザイン指定が可能です
- シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウン
- シリウスのグローバルナビスタイルは、デフォルトそのままで、CSS指定によりプルダウン作動を実施させる構築法のカスタマイズのご案内です
- ナビゲーション左サイドに現れるli 丸ボッチの障害について
- シリウスに外部からプルダウンナビゲーションをjquery、またはCSSで導入した際、丸ボッチが現れることがありますが、デザイン的に邪魔なので削除します
- CSS形成ナビ スマートフォン閲覧障害対処法
- シリウスのHTMl、スタイルシートに組み込み設定したCSS構築のナビは、PCでは視覚上効果的ですがスマートフォンでは視野範囲を狭めてしまうという障害が見られるのです..対処法はこちらで.....