• MENU●●●●
  • シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウン


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

    スポンサー広告

    関連記事


    デフォルトスタイルでCSS形成のプルダウンを実施する方法

    シリウスデフォルトナビ背景は画像で読み込まれており、斜陽もあり
    立体的にも見えます

     

    CSS形成の場合、斜陽が表せないので平面的で暖かさが感じられない
    と感じられ、プルダウン要素は導入したいがデザイン的に不満という方も
    おられるでしょう

     

    シリウスのナビイメージに慣れ親しんでいると、立体感のない平面デザインは
    受け止めがたいもの

     

    で、そんなスタイルを表すなら以下DEMOをご覧ください

     

     

     

     

     

    DEMOナビの画像は、多少いじっているのですが、シリウスingフォルダーより
    読み込まれています

     

     

     

     

    見た目は同じですが、シリウスのメニューの編集で設定したグロ―バル
    ナビの表示法ではなく、CSS形成となります

     

    こちらは、CSS指定に読み込み記述を加えるだけですぐ完了します

     

    スタイルシートの、#topmenuはグローバルメニューを指示しており

     

    見出し背景として
    background-image: url(img/menu_item.jpg);
    を指定する項目があります

     

    その項目を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-image: url(img/menu_item.jpg); 追加した記述
    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: #0A8FFF; 
    }
    .drop li a:hover{
    background: #00C5A5; 
    }

     

     

    備考1

     

    .drop li a:hoverの項目で
    リンクでhoverした際に、やはりシリウスのhover画像を指定することも
    できるのですが、プルダウンメニューへも反映されてしまうので
    未設定が良いかなと思います

     

     

    備考2

     

    h4見出し背景を読み込むことも可能です

     

    スタイルシートに記載される記述では読み込まれないので
    以下記述をお使いください

     

    background-image: url(img/menu_h4.jpg);

     

    縦幅が異なるので
    padding: 15px 0 11px; ここを書き換えてください

     

     

    .drop li a{
    display: block;
    margin: 0;
    padding: 15px 0 11px; ここを書き換える
    background-image: url(img/menu_item.jpg); 
    background: #008181; 
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    }

     

    関連情報は巻末でご確認ください

     

     

    スポンサーリンク

     

     

     

    ページトップ
    シリウスのデフォルトナビスタイルそのままでCSS形成のプルダウンカスタマイズ
    グローバルナビをCSS形成で組み込むカスタマイズまとめ
    シリウスカスタマイズTOP

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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