• MENU●●●●
  • 一つのサイトで複数のグローバルナビスタイルを設定する指定法


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

    スポンサー広告

    関連記事


    ナビデザイン スタイルを複数指定するご案内

    シリウスサイトのデフォルト状態ではサイト全体で一つのデザイン、
    メニューも同様、
    統一された形式になりますが、CSS形成のグローバルナビを取り込んだ場合、

     

    大まかには、トップ カテゴリー エントリーページ、それ以下も同様ですが、
    HTMLテンプレートごとにカラーや作動するスタイルを可変指定できるのです

     

    詳細に言えば、エントリーぺ―ジならスタイルの割り込み窓にCSS追記すれば
    そのページでの指定が優先されるので個別にスタイルを変えられるのです

     

    ただし、スタイルの割り込みで指定しただけですと、スマートフォン対応の
    レスポンシブ化が働きませんので、メディアコードもスタイルシートへ
    配置してください

     

     

    レスポンシブメディアコード
    @media(max-width:698px){
    #container{
    width: 100%;

     

    .drop{
    *zoom: 1;
    list-style-type: none;
    width: 100%;
    margin: 0px auto 30px;
    padding: 0;
    }
    }

     

     


     

     

    トップ カテゴリー エントリーページでスタイルを変える際すること

     

     

    まず、HTMLテンプレートに配置する記述について

     

    div id名を変える...です

     

    統一表示なら変える必要もありませんが、分ける際はスタイルシートで
    指示する分別の認識ができるようHTMLテンプレートは異なるIDにします

     

    すべて変える必要もありません
    一文字の追加だけでもOKです

     

    <div id="ここを変える" class="drop">

     

     

     

    <div id="normalnava" class="drop">
    <li><a href="#">menu</a>
    <ul>
    <li><a href="#">submenu</a></li>
    <li><a href="#">submenu</a></li>
    <li><a href="#">submenu</a></li>
    <li><a href="#">submenu</a></li>
    </ul>
    </li>

     

    トップページは変えなくともOK
    カテゴリー エントリーページを変えましょう

     

     

     

    次は
    スタイルシートへ

     

     

    ここで書き換えるのではなく、記載を追加します
    下へスクロースしてください

     

     

    .drop{
    *zoom: 1;
    list-style-type: none;
    width: 900px;
    margin: 0px auto 30px;
    padding: 0;
    }
    .drop:before, .dropmenu:after{
    content: "";
    display: table;
    }
    .drop:after{
    clear: both;
    }
    .drop li{
    position: relative;
    width: 20%;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    .drop li a{
    display: block;
    margin: 0;
    padding: 15px 0 11px;
    background: #008181;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    }
    .drop li ul{
    list-style: none;
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    }
    .drop li ul li{
    width: 100%;
    }
    .drop li ul li a{
    padding: 13px 15px;
    border-top: 1px solid #00C5A5;
    background: #FF0A0A;
    text-align: left;
    }
    .drop li:hover > a{
    background: #00C5A5;
    }
    .drop li a:hover{
    background: #00C5A5;
    }

     

     

    /*表示スタイルの指定項目*/

     

     

    #normalnav li ul{
    display: none;
    }
    #normalnav li:hover ul{
    display: block;
    }

     

     

    ここまでは、トップページHTMLを指定するコードですね

     

     

    カテゴリー エントリーページで可変するスタイルを指定する際は

     

    下に、トップページ用コード以下に追加します

     

    #normalnavの記載をカテゴリーかエントリーHTMLを id名と
    同名にしてください

     

     

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

     

     

    上記述がカテゴリーを指定し、エントリーページも異なる可変を
    指定する際は、もう一つの指定コードを追加し、#normalnavを
    書き換えてください

     

     

    HTML内に配置したナビコードidをスタイルシートで指定した読み込みコードが
    認識し作動させるのです

     

     

     


     

    スポンサーリンク

     

     

     

    ページトップ
    一つのサイトで複数のグローバルナビスタイルを設定する指定法
    グローバルナビをCSS形成で組み込むカスタマイズまとめ
    シリウスカスタマイズTOP

     

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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