プルダウンスタイルシート指定記述追加編

プルダウン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;

}
}

/*
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;

}
}

ここまでを貼り付け

これで終わりません

最後にもう一つ　デフォルトｇナビはパソコンで表示させないを指示します

/* トップメニュー　のすぐ下のコードに、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画面ではシリウスの
デフォルトのグローバルナビを非標示とするわけです

カスタマイズへ進む

メニューの間に仕切り線をＣＳＳ指定で入れる場合は
.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にしているのは、両端以外は線が重なるので、やや太くなってしまう
ので、超補足しています

仮に、どちらか一つでも仕切り線は現れますが、サイトの端、どちらかが線無しになります
一度入れ込んで確認してみてください

プルダウンCSS

カスタマイズへ進む

関連ページ

スポンサー広告

ＭＥＮＵ一覧

ＣＳＳ追加カスタマイズ

youtube関連

アドセンス

サポート