シリウスに取り付けたプルダウン化するグローバルナビですが、
前ページまでの解説では下へスライドするBOXサイズは、トップナビと
横サイズが同じでしたね

 

しかし、ショートサイズではメニューの意味合いが伝えられないと感じる方も
おられるかと思いますので、

 

BOXが開いた際、横に拡張する指定

 

また、開いたBOXメニューがトップ見出しナビと縦幅が同一で
バランスが悪いと思われる方には、サイズのやや縮小をご案内します

 

 

当サイトに直接来られた方は、意味不明で理解付加と思われますが
こちらが今回の頭ページです...詳細はこちらでご確認願います
CSSプルダウン構造基礎｜HTML要素設定

 

 

以下CSS記載は、前ページで記載される記述をカスタマイズしたものです
前ページ参照
CSS形成プルダウンナビゲーション各種スタイルの指定

 

 

---

 

 

トップナビをクリックするとスライドBOXが拡張されテキストも
理解しやすくなります

 

例として2例上げますが、他のメニューをっ可変する参照としてください

 

 

上から下へゆっくりスライド

 

横サイズ拡張に縦幅を少し縮小しました

 

作動をご確認ください

 

 

開いたBOXの横サイズの拡張は、どこに指定の追記をしたかですね

 

CSS記述　原本

 

#normalnav li ul{
opacity: 50;
top: 50%;
visibility: hidden;
transition: .5s;
}
#normalnav li:hover ul{
top: 100%;
visibility: visible;
opacity: 20;
}

 

 

 

 

簡単です

 

width:300px;の記述を、二つ追加しただけ..soredake

 

 

CSS記述内の以下の箇所

 

#normalnav li ul{
opacity: 50;
top: 50%;
visibility: hidden;
transition: .5s;
width:300px;　　ここ追加
}
#normalnav li:hover ul{
top: 100%;
visibility: visible;
opacity: 20;
width:300px;　　ここ追加
}

 

 

これだけで表示されるBOXが拡張されるのですね

 

ここでは、width:300px;としていますが、好みにより変更してください

 

 

すみません

 

BOX縦幅の縮小は、デザインを指定する記述項目
.dropで行います

 

記述欄の以下の箇所の数値を小さくしてください
padding: 13px 15px;です

 

 

 

.drop li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #FF0A0A;
text-align: left;
}

 

 

 

以下のDEMOは、 padding: 10px 10px;
としています

 

---

 

回転するリングメニューをカスタマイズしました

 

作動の参照

 

 

 

 

CSS記述の原本ですが　width:300px;の記述を一つ追加すれば完了

 

#normalnav li ul {
visibility: hidden;
perspective: 400px;
width:300px;　　ここに追記してます
}
#normalnav li:hover ul{
visibility: visible;
}
#normalnav ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnav li:hover li{
transform: rotateY(0);
}
#normalnav ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnav ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnav ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnav ul li:nth-child(5) {
transition-delay: .4s;
}

 

 

---

 

重要

 

上記説明が対応できないスタイルがあります

 

各種スタイルのページにあるDEMO

 

指定方法が異なります

 

こちらで確認
CSS形成プルダウンナビゲーション各種スタイルの指定

 

左から右へスライド表示のスタイルでは、デザインを指示する項目で
指定します

 

 

 

.dropiii{
*zoom: 1;
list-style-type: none;
width: 570px;
margin: 0px auto 30px;
padding: 0;

 

}
.dropiii:before, .dropmenu:after{
content: "";
display: table;
}
.dropiii:after{
clear: both;
}
.dropiii li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropiii li a{
display: block;
margin: 0;
padding: 10px 0 11px;
background-image: url(img/topmenu.jpg);
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
}

 

 

.dropiii li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropiii li ul li{
width: 100%;
}
.dropiii li ul li a{
padding: 10px 10px;
border-top: 1px solid #00C5A5;
background: #000000;
text-align: left;
width: 250px; 　ここです
}
.dropiii li:hover > a{
background: #00C5A5;

 

}
.dropiii li a:hover{
background: #FF0A0A;
}

 

 

スタイルを指示する項目では可変が見られないので
検証した結果です

 

 

 

 

すべてのスタイルでの説明は省きますが、以外の作動にしたい場合は、
CSSのどこかにwidth:300px;を追加し
可変されるかを試してください

 

実際に、やってみる....ことでスキルが身に付きます

 

では、sainara....

 

 

スポンサーリンク

 

 

 

ページトップ
プルダウンで開いたメニューを拡張するCSS指定
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP