シリウスのカスタマイズとして採用するCSS形成のナビゲーションの、
プルダウン化するスタイルは、script　jqueryを採用せずとも、
スタイルシートへ記述を追加することで各種デザイン、表現スタイルの
可変実行が指定できます。

 

皆様、ごめんなさい

 

しばらくの間、DEMOが表示されていませんで、参考にすらならない
解説をお詫びします....

 

全然、気が付かず大変、大変申し訳ありませんでした...
で、修正いたしております...

 

---

 

CSS形成のナビでは、動きがぎこちないと理解している方も
おられるかと思いますが、限らないとご判断ください..

 

また、スタイルがいまいちと感じられるかと思いますが、記事内で
表示しているためが理由かと....
実際、指令コードがうまく作られていればかなり高度に動きます..

 

当サイトのグローバルナビは、CSS形成でh4メニュー見出しを読み込み
表示させています...サイドのフリースペースメニューでも参照..

 

ここでは、グローバルナビのメニューをクリックした際、どのように
プルダウンメニューが表示されるかを複数配置しておりますので
サイトに導入したい記述をスタイルシートへ追加してください..

 

 

当サイトの解説は、前二つのページ続きで、ご覧になられないと意味が
理解できません..
初めて、このページに来られた方は、こちらでご確認ください..
CSSプルダウン構造基礎｜HTML要素設定

 

 

ここに記載する可変作動を指定する記述は、前ページ記載の
CSS記述の最後の項目を入れ替えるだけで完了します..

 

念のため...前ページ
プルダウンナビゲーションCSS形成｜標準タイプ

 

当サイトのグローバルナビみたく、開いた際ワイドバージョンにする際は
ステップ4のカスタマイズ情報をご覧ください..
ステップ4
プルダウンで開いたメニューを拡張するCSS指定

 

---

 

各種スタイル　動きの指定記述

 

作動確認後、ご選択ください

 

 

緩やかに広がるスタイルの指定記述

 

作動の参照

 

 

CSS記述

 

 

#normalnav li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#normalnav li:hover ul li{
overflow: visible;
height: 38px;
}

 

 

---

 

fadeinタイプ

 

作動の参照

 

 

CSS記述

 

#normalnav li ul{
visibility: hidden;
opacity: 0;
transition: 0s;
}
#normalnav li:hover ul{
visibility: visible;
opacity: 1;
}
#normalnav li ul li a{
visibility: hidden;
opacity: 0;
transition: .5s;
}
#normalnav li:hover ul li a{
visibility: visible;
opacity: 1;
}

 

 

---

 

fadeinに、緩やかさを加えた表現

 

作動の参照

 

CSS記述

 

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

 

---

 

 

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

 

作動の参照

 

 

CSS記述

 

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

 

---

 

 

左から右へスライド表示

 

作動の参照

 

 

CSS記述

 

#normalnav ul{
overflow: hidden;
width: 0;
transition: .5s;
}
#normalnav li:hover ul{
width: 100%;
}
#normalnav li:hover ul li a{
white-space: nowrap;
}

 

---

 

 

ブランコスタイル

 

作動の参照

 

 

CSS記述

 

#normalnav > li{
perspective: 400px;
}
#normalnav li ul{
visibility: hidden;
transform: rotateX(-90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnav li:hover ul{
visibility: visible;
transform: rotateX(0);
}

 

 

 

---

 

 

回転するリングメニューです

 

作動の参照

 

CSS記述

 

#normalnav li ul {
visibility: hidden;
perspective: 400px;
}
#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;
}

 

 

---

 

ぎこちないブランコ表示です

 

作動の参照

 

CSS記述

 

#normalnav ul {
visibility: hidden;
perspective: 400px;
}
#normalnav li:hover ul{
visibility: visible;
}
#normalnav ul li{
transform: rotateX(-90deg);
transform-origin: 50% 0;
transition: .1s;
}
#normalnav li:hover ul li{
transform: rotateX(0);
}
#normalnav li:hover ul li:nth-child(1) {
transition-delay: 0s;
}
#normalnav li:hover ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnav li:hover ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnav li:hover ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnav li ul li:nth-last-of-type(1) {
transition-delay: 0s;
}
#normalnav li ul li:nth-last-of-type(2) {
transition-delay: .1s;
}
#normalnav li ul li:nth-last-of-type(3) {
transition-delay: .2s;
}
#normalnav li ul li:nth-last-of-type(4) {
transition-delay: .3s;
}

 

 

当ページでは複数のナビゲーションを配置しております
設置状況はスタイルの割り込みで各ナビとも個別指定している
複数を一つのページで表示させるとは、読み込みＩＤを全て個別に
変えているから作動できるのですね

 

皆さんが、当サイトの真似を不用意にしてしまいますと混乱の原因となるので
一つに絞り、全てを取り込まないでください

 

---

 

参照、フリースペースへ導入カスタマイズ

 

フリースペースに上記、ＣＳＳを入れ込むとどうなるか？です
他ページに追加しようと思いましたが、おんなじコードなのでＷコンテンツ

 

ですので、ここで書いときます

 

フリースペースに配置すると、表示形態は横ではなく自動で縦列に
なるのですね

 

当サイトの右列メニューですけど、回転するリングメニューをフリースペースに
置いているだけ....
どうすればこんなメニューが作れるんですか？とよくご質問がございますが
種を明かせば、なんてないこと...

 

もう一つ
ＨＴＭＬのサイトメニューを削除し、ＨＴＭＬコードを入れ替えれば
切り替えは可能です
こちら参照
シリウスにアコーディオンサイトメニューを導入するカスタマイズ

 

2カラムでも反映します
ブラインド形式を複数組み込むこともできるので、ＷＰなどでみられる
メニューレイアウトもできるでしょう....と思います

 

では、お励みください...

 

スポンサーリンク

 

 

 

ページトップ
CSS形成プルダウンナビゲーション各種スタイルの指定
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP