TOP

CSS形成プルダウンナビゲーション各種スタイルの指定 ステップ3

シリウスのカスタマイズとして採用する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;
}

 

 

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

 

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

 


 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

スポンサーリンク

 

 

 

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

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