• MENU●●●●
  • 数値指定で表示されるグローバルナビの出現指定方法


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    数値指定でグローバルナビを出現する,しないの設定

    シリウスサイトのノンスクロール位置では、見られないグローバルナビが
    定位置に進むと現れてくる、というスタイルは、ブログ HTML5 CSS3で
    たまに見る程度で多く使われているか?どうかは知りませんが、

     

    エントリーページならば、指定したページだけでもレイアウトを変えて
    使えるのでブログ要素を含めた場合になら使えるかもしれません

     

    あまり無下にお勧めするカスタマイズでもないんですが、サポートへの
    ご質問がございましたので備忘録程度に参照ください

     

    当ページのグローバルナビを確認ください

     

    当ページでもエントリーのスタイルの割り込みで当ページだけの

     

    個別指定で取り付けはいたしておりますが、当サイトのグローバルナビは
    シリウスデフォルトを使用しておらず、その他構築物

     

    サイト閲覧時は見られないものの

     

    スクロールすると出現は致します...が

     

    サイトを上に戻し対置で、なぜか消えない...がエラー

     

    でも、通常のシリウスグローバルナビは、スクロール位置を上に
    戻した時点で消えます

     

     

    スクロールで現れる位置は、通常のグローバルナビの固定位置で
    そのままトップ位置に置かれ、その他はすべてスクロールに合わせて
    流れてまいります

     

     

    では、手順へ進みますが、今回のカスタマイズはお隣リページの
    通常設定の基本解説からの延長解説となります

     

    当ページに直接お越しいただいた方は、以下をご確認の上進めてください
    グローバルナビスクロールでトップ固定からリターンするjquery設定

     

    では、お隣ページをご確認いただいたとして始めます

     

    シリウスデフォルトテンプレート対応です

     

    jqueryの導入、HTMLテンプレートでの記載はお隣と同じです

     

     

    異なるのはスタイルシートへの記述のみ

     

     

    スタイルシート原本
    /* グローバルメニュー */

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 900px;
    position: absolute;
    <% topMenuPlace(0) %>
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;

     

    }

     

     

    改行記述コード
    シリウスで用意されているデフォルトヘッダー画像の位置で
    数値は合わせています

     

    /* グローバルメニュー */

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 900px;
    position: absolute;
    <% topMenuPlace(0) %>
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;

     

      top:-50px; /...ノンスクロール地点では隠れている
      left: 300; /...横位置がずれていたら数値変更
      width: 900px; /...サイトの幅に合わせる
    }

     

     

    こちらをすぐ下に追記してください

     

    .fixed {
    position: fixed;
    top:50px;     /現れた際、ページのトップに現れる指定値
    width: 100%;
    z-index: 10000;
    }

     

     

    通常ページでの設定はこれで完了です


     

    ここまではシリウスのデフォルトページレイアウトに合わせた説明ですが

     

    エントリーページは、上級者設定で個別にスタイルを変えられます

     

    何かしらの事情でエントリーページだけブログ要素を入れこみ
    ヘッダー画像の縦幅を小さくしてみる...とかにする場合の

     

    割り込み窓に記載する記述の備忘録

     

     

    #header {
    height: 0px; ヘッダーを非表示は0  縮小は数値指定する
    background-image: url(img/header.jpg);
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: left top;

     

    width: auto;
    border-bottom:solid 1px #EBEBEB;
    }

     

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 900px;
    position: absolute;
    <% topMenuPlace(0) %>
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;

     

     

    top:-50px;
    left: 300;
    width: 900px;

     

    }

     

     

    .fixed {
    position: fixed;
    top:50px;
    width: 100%;
    z-index: 10000;

     

    }

     

    ここまで

     

     

    異なる表示手段が発見できましたら追記いたします

     

    ページトップ
    数値指定で表示されるグローバルナビの出現指定方法
    グローバルナビ jquery採用のカスタマイズまとめ
    シリウスカスタマイズTOP

    数値指定で表示されるグローバルナビの出現指定方法関連解説
    グローバルナビスクロールでトップ固定からリターンするjquery設定
    SIRIUS シリウス機能で表示されるグローバルナビをサイトのスクロールに合わせて上部移動しても、トップ位置で固定する、リターンも可能jquery採用カスタマイズ設定のご案内です

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト