TOP

複数の表現方法のまとめ

レスポンシブのナビゲーションは、まだプルダウンメニューは導入されていない様子..

 

なぜ、導入されないのか?
ACEWEBさんならできるはず、と待っていてもソフトに組み込むのは難しいのかなと...

 

ノンレスポンシブテンプレートに加えレスポンシブでは構造が大幅に複雑化し、
さらに面倒が増えてますね..

 

で、自分なりにプルダウン構造を追加してますが、自分では納得しては使用しているものの、
人様にどうぞとは言えないレベル...

 

なんとも基本構造が複雑で、ノンレスポンシブ程組み込みが容易ではありませんし、
スタイル調整も大変面倒...

 

そのような事情で当サイトでのプルダウン導入解説は、読者様にお勧めするという
程のレベルのものは現在ございません...

 

あくまで、自分仕様の備忘録程度の保管庫的意味合いであり読者様の参考程度でしか
お役に立ちません事、期待された方、申し訳ありません...

 


 

シリウスレスポンシブテンプレートは、ノンレスポンシブと比較すると構造が複雑ですね..

 

HTML、CSS要素でプルダウンメニューを組み込みできるか?ですが、
スタイルシートを見る限り簡単な構造なら何とかできそうだと...

 

しかし、事前にPCとスマートフォンでの画面表示の違いをどうするかを
思案しなければならず、慎重に作業開始..

 

そんなこんなでとりあえずは、あれこれ弄り回して5時間後、何とか導入完了..

 


 

追加事項

 

ノンレスポンス、デフォルトテンプレートのスタイルは、ナビの横張り出しが
ございませんね..

 

シリウス提供のレスポンスは、ビジネステンプレート同様横張り出しあり...
かっこいいとかの評価もあれば、この張り出しが嫌いという方もおられますね..

 

そんな場合は、張り出しを見せない,,,レイアウトに変更も可能ですので
解説を追加しております。

 

おまけ

 

解説が意味不明で理解不能の方へ....
ご要望の多い当サイトのレイアウト仕様なんですが、意味不明(解説が下手)では、
取り付けも難儀ですね..

 

ですので、カスタマイズの基礎としてコンテンツは理解し、組み込みは以下にソースを
すべて記載しておりますので、貼り付けで完了します..ご確認ください
当サイト例Gナビ組み込みテンプレートソース(HTML) その1

 


 

ここでの解説...すみません..時間経過しています...

 

最初の導入例 現時点(訂正...以前)の当サイトで搭載した者です。 

 

ヘッダー画像の上位置に表示

 

 

こちらは、サイト上部を表示位置にしました

 

ヘッダー画像下にも置くことは可能でしたが、レイアウトが見た目、変な感じで取りやめ

 

 

背景の色付けもCSS指定で可能

 

 

ラインを表示しないフォントのみ

 

 

デフォルトテンプレートみたく、両サイドを非表示として仕切り線を配置

 

上記の仕切り線は、横長レイアウトのナビにも入れ込み可能
画像幹掲載ですが、メニュー位置をサイト幅に合わせることもはみ出すことも調整は
可能です...やりようはいろいろ...

 

上記デザイン..スタイルもですが、基本記述のわずかな記述を変えるだけで変更可能

 

プルダウンのメニュースライドは当サイトで作動確認
メニュー少な目でワンプルウィンドウにしてますが、5つでも6つでもスライド可能..

 

 

複数のスタイルもご案内しますが、書ききれないときは関連ページへ
延長することにいたします..

 

以下の関連ページで導入詳細は、順を追って一つずつまとめておりますので
上からご確認ください..

 

最後に..
デフォルトのGナビを非表示としてHTML内にナビを表示するためのコード配置、
および作動を指示するCSS指定をスタイルシートに追記するが主題作業ですが、
CSSは一度書き込めば以降はカスタマイズに必要な時だけ改行..

 

頻繁な書き換えはHTMLだけで進められる

 

一度、コードを作ってしまえばメニューの改行、もしくは追加ぐらいで事は完了

 

最初は面倒でも後々は全然面倒とも感じられない簡単作業...それが私の理解です..

 

 

まずは、HTML編から...ご覧ください。

 

CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
トップページ

 

更新履歴

2018/02/14 03:02:14 | CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
シリウスに外部CSSを組み込んで、ページスクロールで一度上に隠れたナビを再出現する..さらに固定化することでメニューをいつでも確認できる...カスタマイズは以前より記載しておりまして、ま、この辺でよいかなと自己満足していたわけですが...?...
2016/12/14 00:49:14 | CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
今回のナビ導入解説では、ナビ背景を単色及び半透明フィルターでもと記載しておりますが、ネット上からrgbaコード取り寄せても単色のままフィルター化しない...とお便りがございましての補足記事ですrgbaコードの所得は、シリウスのカラーコード選...
2016/09/12 22:55:12 | CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
今回の解説は、親ページで導入をご案内するスタンダートレベルCSSプルダウンメニューに,、次の動きを加えたものです。ページをスクロールオンすれば、通常ナビは上に移動しますので隠れますね..ですが、そのまま少し下へスクロースすると再度ナビが出現...
2016/09/12 00:02:12 | CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
シリウスレスポンシブのHTML、スタイルシートでCSSを追加することでデフォルトスタイルで表示するナビを非表示として外部取り付けのプルダウンメニューを別構造としてサイト内に組み込む手順の解説ですただし、デザインおよび作動については当サイトの...
2016/09/11 23:39:11 | CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
プルダウンの作動をスタイルシートでCSS記述を追加し指定する工程ですCSS指定で、クリックした際のホバーからスライドするスタイルまた、フォントサイズ、カラーを好みにより選択できます作動スタイル作動はスタイルシートでCSS指定となりますが、ス...
2016/08/28 00:02:28 | CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
シリウスのレスポンシブテンプレートでのナビ出現位置が、好まれなお方もおられるかもしれません当該解説のプルダウンメニューを取り付けた際、デフォルト位置でも見た目に違和感はないかとも思われますが、サイト上部に移動することもできますデフォルト形状...