プルダウンCSS
プルダウンの作動をスタイルシートでCSS記述を追加し指定する工程です
CSS指定で、クリックした際のホバーからスライドするスタイル
また、フォントサイズ、カラーを好みにより選択できます
作動スタイル
作動はスタイルシートでCSS指定となりますが、スマートフォンではデフォルトで用意される
ハンバーガーボタンに切り替わるようにしております
理由は、スマートフォン専用のボタンは過度のカスタムは不要なのでデフォルト装備を
そのまま使うと致したのです
サイト上に現れるナビは、CSS指定で表示するのですが、デフォルト機能の
グローバルナビは、パソコン画面では非表示の指定をします
しかし、スマートフォン画面では、ハンバーガーボタンで現れるので、
操作画面、メニューの編集ではテキスト&リンク設定はしておきましょう
サイト幅は、900Pxに合わせております
拡張幅の場合は、記述内に置かれる900Pxを書き換えてください
スタイルシートを開きましょう
取り付け位置は、わかりやすい箇所
ここでは、トップメニュー以下に置いてみます
/* トップメニュー
==================================================
トップメニューの下の項目の下
追加行にはGナビとかの項目名を記載すると後々の思い出しやすいです
ここからですが、レスポンシブ作動も加えるのでえらくながいです
/*基本指定項目
PC画面で反映するレイアウト、作動指定
*/
/* Gナビ */
.dropc{
*zoom: 1;
list-style-type: none;
width: 900px;
margin: 0px auto 54px;
padding: 0;
}
.dropc:before, .dropmenu:after{
content: "";
display: table;
}
.dropc:after{
clear: both;
}
.dropc li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropc li a{
display: block;
margin: 0;
padding: 15px 20px;
color: #333;
font-size: 14px;
line-height: 1.7;
text-decoration: none;
}
.dropc li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
}
.dropc li ul li{
width: 100%;
}
.dropc li ul li a{
padding: 13px 13px;
border-top: 1px solid #00C5A5;
background: #fff;
text-align: left;
}
.dropc li:hover > a{
background: #00C5A5;
}
.dropc li a:hover{
background: #008181;
}
/*
プルダウンの」作動指定
*/
#normalnavvvi li ul {
visibility: hidden;
perspective: 400px;
width: 250px;
}
#normalnavvvi li:hover ul{
visibility: visible;
}
#normalnavvvi ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnavvvi li:hover li{
transform: rotateY(0);
}
#normalnavvvi ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnavvvi ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnavvvi ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnavvvi ul li:nth-child(5) {
transition-delay: .4s;
}
/*
レスポンシブが反映するメディアコード
*/
@media screen and (max-width: 900px) {
.dropc{
*zoom: 1;
list-style-type: none;
width: 100%;;
margin: 0px auto 50px;
padding: 0;
}
.dropc:before, .dropmenu:after{
content: "";
display: table;
}
.dropc:after{
clear: both;
}
.dropc li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropc li a{
display: block;
margin: 0;
padding: 15px 20px;
background-image: url();
color: #333;
font-size: 14px;
line-height: 1.7;
text-decoration: none;
}
.dropc li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
}
.dropc li ul li{
width: 100%;
}
.dropc li ul li a{
padding: 13px 13px;
border-top: 1px solid #00C5A5;
background: #fff;
text-align: left;
}
.dropc li:hover > a{
background: #00C5A5;
}
.dropc li a:hover{
background: #008181;
}
#normalnavvvi li ul {
visibility: hidden;
perspective: 400px;
width: 250px;
}
#normalnavvvi li:hover ul{
visibility: visible;
}
#normalnavvvi ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnavvvi li:hover li{
transform: rotateY(0);
}
#normalnavvvi ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnavvvi ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnavvvi ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnavvvi ul li:nth-child(5) {
transition-delay: .4s;
}
}
/*
max-width: 640pxスマホサイズではGナビを非表示にする
*/
@media screen and (max-width: 640px) {
.dropc{
*zoom: 1;
list-style-type: none;
width: auto;
margin: 0px auto 47px;
padding: 0;
display: none; 非表示指定です
}
.dropc:before, .dropmenu:after{
content: "";
display: table;
}
.dropc:after{
clear: both;
}
.dropc li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropc li a{
display: none;
margin: 0;
padding: 15px 20px;
background-image: url(img/menu_h4.jpg);
color: #FF0A0A;
font-size: 14px;
line-height: 0.7;
text-decoration: none;
border: 1px solid #0ACCFF;
border: 0.5px left #0ACCFF;
border-radius:4px;
}
.dropc li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
}
.dropc li ul li{
width: 100%;
}
.dropc li ul li a{
padding: 13px 13px;
border-top: 1px solid #00C5A5;
background: #000000;
text-align: left;
padding-right: 2px;
padding-left: 2px;
border: 1px solid #0ACCFF;
border-radius:0px;
}
.dropc li:hover > a{
background: #00C5A5;
}
.dropc li a:hover{
background: #008181;
}
#normalnavvvi li ul {
visibility: hidden;
perspective: 400px;
width: 250px;
}
#normalnavvvi li:hover ul{
visibility: visible;
}
#normalnavvvi ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnavvvi li:hover li{
transform: rotateY(0);
}
#normalnavvvi ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnavvvi ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnavvvi ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnavvvi ul li:nth-child(5) {
transition-delay: .4s;
}
}
ここまでを貼り付け
これで終わりません
最後にもう一つ デフォルトgナビはパソコンで表示させないを指示します
/* トップメニュー のすぐ下のコードに、display: none;を追加してください
==================================================
*:first-child+html body {
padding-left: 1px;
}
#nav {
border-bottom: 4px solid #d3d3d3;
background-color: #999999;
display: none;ここです
}
#topmenubox {
margin: 0 auto;
text-align: center;
width: 916px;
}
#topmenubox #topmenubtn {
display: none;
}
display: none;を追加して、PC画面ではシリウスの
デフォルトのグローバルナビを非標示とするわけです
カスタマイズへ進む
メニューの間に仕切り線をCSS指定で入れる場合は
.dropcコードの一番上、メディアコードで囲んでない項目の中
ここです
.dropc li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropc li a{
display: block;
margin: 0;
padding: 15px 20px;
color: #333;
font-size: 14px;
line-height: 1.7;
text-decoration: none;
以下コードを追加してください
border-left: 0.1px solid #d3d3d3;
border-right: 0.1px solid #777777;
}
説明
以下は、縦ラインを指定してます
border-left: 0.1px solid #d3d3d3;
border-right: 0.1px solid #777777;
線の太さを0.1pxにしているのは、両端以外は線が重なるので、やや太くなってしまう
ので、超補足しています
仮に、どちらか一つでも仕切り線は現れますが、サイトの端、どちらかが線無しになります
一度入れ込んで確認してみてください
関連カスタマイズ
仕切り線を入れてHTMLのユーザー定義ボックスコードを外すと
横ラインなし、横はみ出しのないデザイン
デフォルトテンプレートみたく、両サイドが非表示となります
上記例で背景に色を付け加える場合は、
.dropc li a{内に
background-color: #カラーコード;を追加すれば、サイト幅でのみ色付けされます
まだまだ、作動スタイルとか説明が不足ですね
後ほど追加します
関連ページ
- HTML、CSSのみでプルダウン形式を組み込む方法
- HTML、CSSのみで作る容易に組み込みできるスタンダートレベルの子メニューがプルダウン形式のスライドメニュー導入方法...
- ナビの位置を変更するHTML指定
- シリウス標準のグローバルナビの出現位置の変更は、HTML改行で簡単に指定が可能です
- スクロールで上に隠れたナビが再度出現するWスライド表示
- サイトをスクロールで上に移動して隠れたはずのナビが、再度コンテンツエリアに出現するWスライド表示ヲ指示するCSS記述
- Gナビ、再出現時、カラー切り替え2重構造指定方法
- シリウスに取り付けた、スクロールで隠れたGナビの再出現で、カラーを衣替え、次いでテキストまでも切り替えてしまう2重構造の設定手順。
- ナビ背景を透明化するカラーコードの書き方
- 今回ご案内しているナビの半透明背景カラーは、その他も選択できますので改行する公式をご覧ください