Simplicityの特徴 › フォーラム › Simplicityについての質問 › グローバルナビを非表示にした時
-
投稿者投稿
-
-
2015年10月2日 8:21 PM #33053
肩肩
ゲストモバイルメニュータイプを「スライドイン」選択した場合
モバイル時だけメニューを表示できないでしょうか? -
2015年10月2日 11:30 PM #33060
Hidekichi
ゲスト普通にできますけれども、グローバルナビはどのようにして非表示にされていますか?
子テーマstyle.cssに
#navi { display: none; }とすれば、ナビ自体は表示されません。
表示されませんが、表示されないだけでhtmlの中には存在するので、jQuery等で#naviは参照できるはずです。そうすれば、おのずとメニュー自体はサイドパネルに出ると思うんですが…と、ここまで書いて気が付きました。
つまりは、スライドインも利用するけれども、画面上にグローバルナビを表示できないか?と言うことですかね?それだったら、メディアクエリを利用して
@media screen and(max-width: 440px){ #navi { display: block; } }あたりを子テーマmobile.cssあたりに書けばイケるんじゃなかろうと思います。
ただし、スマホ等の幅440pxを表示できる端末の中に表示されたグローバルナビの部分は、再度スタイルし直さないと、サブメニューあたりがいろいろとマズイことになる可能性があります。グローバルナビ(#navi)の部分は、中身ulとliを使った、いわゆるリスト構造なので、一番上の、つまりは親になるリストアイテム自体は横並びは色々とやれるかと思うんですけれども、その子になっているネストされたリストアイテムの表示をどうするかが問題になりそうです。
つまり、
[ul]
[li]リストアイテム[/li]
[li]リストアイテム[/li]
[li]リストアイテム[/li]
[li]リストアイテム[/li]
[/ul]こういう構造だと極簡単に実装できます。しかし、
[ul]
[li]リストアイテム1[/li]
[li]リストアイテム2
[ul]
[li]リストアイテム2-1[/li]
[li]リストアイテム2-2[/li]
[/ul]
[/li]
[li]リストアイテム3[/li]
[li]リストアイテム4[/li]
[/ul]こういう場合、どうするかが色々考えさせられる部分です。
子を持つリストアイテムは、.menu-item-has-childrenというclassを持っていて、その子は.sub-menuと言うclassを持っているので、そこに対して何かしらアクションをさせるというのはcssで可能ですが、結構色々と悩まされる部分かと思います。実際僕も現在スキンを作ってますが、そこらをちょっと悩んでいたりします。
-
2015年10月3日 9:02 AM #33064
肩肩
ゲスト難しい。。。
カスタマイズの「レイアウト」で「グローバルナビを表示」で非表示にしてます
グローバルナビ自体は要らないのですが
モバイルメニュータイプは「スライドイン」でサイドバーを別表示にしたいのです
スマホでは「メニュー」が表示され、中身が真っ白
それだったらモバイルだけメニューを表示したいグローバルナビ非表示の場合
スマホのスライドインも「メニュー」を非表示にできるなら
それでも良いのですが -
2015年10月3日 10:20 AM #33069
Hidekichi
ゲストつまりはメニューが要らないということなんですかね?
スライドインの中にあっても困らないというのであれば、単純にcssで#naviをdisplay:noneにするだけでPCなどでは表示されませんし、スライドインの中には表示されるようになります。
カスタマイザーでメニューを無くしてしまうと、参照するメニューがなくなるのでスライドインのメニューには表示されませんそのどちらも不要ということであれば、自分でスクリプトを書いて右側にパネルを用意しサイドバーの内容をスライドインさせればよいだけなので、できなくはないですよ、と言うかできますよ。
うちのサイトのcodepenやらのサンプル(例えばこれとかこれとか)でもたくさんスライドインのアイデアのものを取り入れてます。
と、たくさんあると思ったらそんなにありませんでした(笑)ただ、実装するとなると、色々と仕様を考えなくてはなりません。
どの画面幅からサイドパネルにするか、つまりはサイドバーを収納するかとか、どのようにして開き、閉じるかとか、右側パネルにした時にtopへ戻るボタンはどうするかなど、その他諸々と。 -
2015年10月3日 1:21 PM #33072
肩肩
ゲスト仰るとおり
「#naviをdisplay:none」だけで解決できました
ありがとうございましたスライドインはサイドバーだけあれば良いのですが
スクリプトとか無理なので諦めますアンドロイドのスマホの場合
「サイドバー」のアイコンがスクロールバーにちょっと被るのも気になってます -
2015年10月3日 3:31 PM #33078
わいひらキーマスターとりあえず次のバージョンで、カスタマイザーでグローバルメニューが無効になっていても、スライドインで表示されるようにはしておきます。
-
2016年6月13日 2:55 AM #42316
トントンリー
ゲストテーマsimplecity1.9.3に 子テーマも使用しています。
ブラウザはグーグルクロムを使用しています。質問:サイドバーをカスタマイズしていたら、いままでフッターはちゃんと表示させれましたが
その後に急にフッターがサイドーに移動して右の部分までずれたようになりました。原因はサイドバーをいじっていたことだとは思いますが、他のテーマに変更して元に戻したりとか
してみましたが、どうにも変わりません。初歩的なとこかもしれませんが知恵を拝借させていただき
たいと思います。こちらにURLを掲載します、どうぞ宜しくお願いします!それからもうひとつ右上に検索窓がその時ど同時に出てくるようになったのも気になり消したいのですが
お手数ですが重ねてご指導宜しくお願いします!こちらです⇒http://mwr-nb.com/
読んでいただきありがとうございました。トントンリーでした。
-
2016年6月13日 3:03 PM #42338
Hidekichi
ゲストトントンリーさん、
サイドバーのテキストウィジェットの中身がかなりおかしな事になってます。
一度、中身を精査して正しいhtmlにしてから適用して下さい。
これらによって、閉じタグが不足していたり色々と問題が出ているみたいです。.text-21のimgとかヤバイことになってます(笑)
<img src="***(ここで改行)" width="150" class="aligncenter" (ここで改行)</div> </div><div ....おそらく自動的に閉じタグを保管するような機能が何かしらにあって…、としか考えられないのですが、変なことになってます。
ブラウザは閉じタグがない場合、ある程度補完してくれますが、つじつまが合わない場合は何もできないのでフッターがsidebarの中に入ってしまうという感じになってしまいます。おそらく、いくつかウィジェットの中でおかしなことがあって、#containerあたりまでのdivが足りない感じにとられているのではなかろうかと思ったりも。
ここらからブラウザでソースを表示から今どうなっていて、どう表示されるのが正しいかを確認しながら、各ウィジェットに内容を入れていって下さい。
<img src="***(ここで改行)" width="150" class="aligncenter" (ここで改行)</div> </div><div .... // ↑ は おそらく ↓ かと <img src="***(ここで改行)" width="150" class="aligncenter" /> </div> <div id="text-29"...ちょっとぐらいの修正なら、僕もササッとやって「これで」みたいな英国紳士ふうに解決されたhtmlを提示したいところですが、ちょっとやそっとじゃ修正しきれないぐらいの問題点があるので、作られた人が見直されたほうが早いと思います。
-
2016年6月13日 7:41 PM #42365
わいひらキーマスター返信があればこちらにお願いします。
サイドバーにフッターの部分が表示されて変更方法を教えて欲しい。2回目の投稿
-
-
投稿者投稿
- トピック「グローバルナビを非表示にした時」には新しい返信をつけることはできません。