• MENU●●●●
  • プルダウンナビゲーション形成|標準タイプ


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

    スポンサー広告

    関連記事


    CSS基本形成プルダウンコード|標準タイプの設定方法 ステップ2

    シリウスに導入するCSS形成プルダウンメニューのいろんなデザインや
    作動スタイルは、スタイルシートですべてのカスタマイズが行えます

     

    HTML内に置く基本コードは,変えなくともよいとご理解ください

     

     

    ここでは、ステップ2として標準タイプで反映される基本形式の
    プルダウンコードをもとにカスタマイズのCSS指定手順のご案内となります

     

    誰しもデザインは好みが違うと思われるので、カスタマイズはご自由に
    行って下さい

     

     

    初めに、当サイトに来られた方へ
    解説は、プルダウンスタイルの標準タイプをCSSでデザイン形成、
    作動スタイルを指定する記述のCSS解説で、HTMLテンプレート内に
    記載するプルダウン基礎コードは当ページに含まれておりません

     

    HTML内に配置する基礎コードはこちらでご確認ください
    CSSプルダウン構造基礎|HTML要素設定

     

     

     

    基本形であるデザイン スタイルおよび作動をご確認ください

     

     

    スタンダードな標準タイプDEMO
    作動の参照

     

     

    作動が、確認できましたらCSS指定を理解しましょう

     

    スタイルシートでのデザイン 作動指定

     

     

    標準タイプのCSS指定

     

    以下CSS記述をスタイルシートの /* グローバルメニュー */項目近くに
    張り付ければ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;
    }

     

     

    ここまでをスタイルシートに配置します

     

     

     


     

    カスタマイズ

     

    プルダウンメニュ―が開いた際、拡張されるとかの変更を加える場合は
    記載追加となりますが、ここでは、標準タイプでのご案内ですので、
    カスタマイズは次のステップ3、4でご確認ください
    次のステップ3 CSS形成プルダウンナビゲーション各種スタイルの指定

     

     

    デザイン指定の項目
    以下のCSSは基本系で、メニューのカラー、フォントカラー
    リンクした際のカラーとかで動きを指示することはございません

     

    カラー変更は、カラーコードを書き換えれば完了です

     

     

    .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;
    }

     

     

    念のため

     

    デザイン以外、作動スタイルはここだけの項目で指定していることを
    ご理解ください

     

    とは言っても、どこをいじれば作動が指定できるのかですね

     

    まずは、各種スタイルを確認してから巻末メニューよりスタイル指定を
    ご覧ください

     

    表示スタンダード以外の各種スタイルはこちらでご確認ください
    CSS形成プルダウンナビゲーション各種スタイルの指定

     

     

     

    スポンサーリンク

     

     

     

    プルダウンナビゲーションCSS形成|標準タイプ
    グローバルナビをCSS形成で組み込むカスタマイズまとめ
    シリウスカスタマイズTOP

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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