TOP

2度出現するナビの動きを指示するCSS記述

今回の解説は、親ページで導入をご案内するスタンダートレベルCSSプルダウンメニュー
に,、次の動きを加えたものです。

 

ページをスクロールオンすれば、通常ナビは上に移動しますので隠れますね..
ですが、そのまま少し下へスクロースすると再度ナビが出現する..

 

再度現れたナビは、そのままスクロールを続けても画面上の上に張り付いたまま...
上にスクロールすれば...元の位置...

 

いいまわしが、面倒なのですが、当ページをスクロールして確認してください。

 


 

失礼..申しわけございません

 

当ページのGナビは、記載時以降、仕様を加えているので、動きは同じなんですけれど
再度、ナビが出現する際カラーが異なっていますね..

 

ですので、当ページの説明では、同色の再出現となります。

 

異なるカラーの2段構造にする際は、当ページの手順におお隣ページの仕様を加えてください。
こちら...
Gナビ、再出現時、カラー切り替え2重構造指定方法


 

 


シリウスのデフォルトナビゲーションでも取り付けは可能かと理解しますが、
現在、未検証です
後ほど、書き足しますのでしばらくお待ちください

 


 

作動は、ご確認いただけたと判断し、お話は進めます

 

指定は、HTML、スタイルシートへCSSを追加するだけで完了
ですので、jqueryは使いませんが、javascript形式の記述は使います

 

 

HTMLテンプレートを開きましょう

 

<head>~</head>内に以下の記述を張り付けます

 

<script type="text/javascript">
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+300;
//ナビゲーションの高さ
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まで移動で表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});

 

</script>
ここまで

 


 


<body>に置くプルダウンコードを上から下まで、nav記述で囲みます

 

<div class="nav">
プルダウンコード
<!-- /#nav --></div>

 

位置が不明な場合、トップページのソースを見てください

 


 

次、スタイルシートを開いてください

 

わかりやすい箇所に以下の記述を張り付けてください

 

.nav {
padding: 0 px;
margin: 0 auto0px;
width: auto;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}

 

 

で、終わりです

 

 

カスタマイズは、後々書き足しますが、急ぐ場合は自己努力でお願いします

 

 

スクロールで上に隠れたナビが再度出現するWスライド表示
CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
トップページ

関連ページ

HTML、CSSのみでプルダウン形式を組み込む方法
HTML、CSSのみで作る容易に組み込みできるスタンダートレベルの子メニューがプルダウン形式のスライドメニュー導入方法...
プルダウンスタイルシート指定記述追加編
プルダウンHTMLをスタイルシートでCSS指定し作動させる記述の追加です
ナビの位置を変更するHTML指定
シリウス標準のグローバルナビの出現位置の変更は、HTML改行で簡単に指定が可能です
Gナビ、再出現時、カラー切り替え2重構造指定方法
シリウスに取り付けた、スクロールで隠れたGナビの再出現で、カラーを衣替え、次いでテキストまでも切り替えてしまう2重構造の設定手順。
ナビ背景を透明化するカラーコードの書き方
今回ご案内しているナビの半透明背景カラーは、その他も選択できますので改行する公式をご覧ください