TOP

CSS形成ナビは、スマートフォン閲覧の際非表示とする手順

シリウスに組み込み設定したCSS形成のナビゲーションは、パソコン
画面では正常に作動しているか?

 

と思いますが、スマートフォンの閲覧画面でも同作動が確認されるのですね

 

 

画面の小さなスマートフォンで、ナビゲーションが現れてしまうと
さらに小さな画面の視野範囲がさらに縮小し見ずらいこと?
必須

 

 

スマートフォンのサイズでは、ナビゲーションレイアウトも縮小はするのですが
やはり、見ずらいは変わらず....

 

対処法として、スマートフォンからの閲覧ではナビを非表示とする
指定をします

 

当サイトでご案内の他のナビでも非表示指定は同様ですが、
CSS形成ナビの場合は、多少形式が変わります

 

HTMl記載のナビ要素ですね

 

id要素 class要素を確認ください

 

<div id="normalnav" class="drop">
<li><a href="#">シリウスカスタマイズ</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>

 

 

 

スタイルシートでは、

 

id要素 normalnav

 

class要素 drop

 

を、スマートフォンで反映されるサイズ指定 @media内に

 

CSS指定で作動の変更を指示します

 

 

 

@media(max-width:698px){
#container{
width: 100%;
}

 

以下を追記します

 

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

 

 

 

#normalnav {
width: 100%;
z-index: 10000;
display: none;
}

 

 

display: none;が、スマ―トフォンサイズでは
ナビを出現させないと指示しているのです

 

 

スポンサーリンク

 

 

 

ページトップ
CSS形成ナビ スマートフォン閲覧障害対処法
グローバルナビをCSS形成で組み込むカスタマイズまとめ
シリウスカスタマイズTOP

 

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