TOP

開いたメニューBOXを拡張する指定方法

シリウスに取り付けたプルダウン化するグローバルナビですが、
前ページまでの解説では下へスライドする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

 

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