グローバルナビを非表示にした時

Simplicityの特徴 › フォーラム › Simplicityについての質問 › グローバルナビを非表示にした時

8件の返信スレッドを表示中
  • 投稿者
    投稿
    • #33053
      肩肩
      ゲスト

      モバイルメニュータイプを「スライドイン」選択した場合
      モバイル時だけメニューを表示できないでしょうか?

    • #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で可能ですが、結構色々と悩まされる部分かと思います。

      実際僕も現在スキンを作ってますが、そこらをちょっと悩んでいたりします。

    • #33064
      肩肩
      ゲスト

      難しい。。。

      カスタマイズの「レイアウト」で「グローバルナビを表示」で非表示にしてます

      グローバルナビ自体は要らないのですが
      モバイルメニュータイプは「スライドイン」でサイドバーを別表示にしたいのです
      スマホでは「メニュー」が表示され、中身が真っ白
      それだったらモバイルだけメニューを表示したい

      グローバルナビ非表示の場合
      スマホのスライドインも「メニュー」を非表示にできるなら
      それでも良いのですが

    • #33069
      Hidekichi
      ゲスト

      つまりはメニューが要らないということなんですかね?

      スライドインの中にあっても困らないというのであれば、単純にcssで#naviをdisplay:noneにするだけでPCなどでは表示されませんし、スライドインの中には表示されるようになります。
      カスタマイザーでメニューを無くしてしまうと、参照するメニューがなくなるのでスライドインのメニューには表示されません

      そのどちらも不要ということであれば、自分でスクリプトを書いて右側にパネルを用意しサイドバーの内容をスライドインさせればよいだけなので、できなくはないですよ、と言うかできますよ。

      うちのサイトのcodepenやらのサンプル(例えばこれとかこれとか)でもたくさんスライドインのアイデアのものを取り入れてます。
      と、たくさんあると思ったらそんなにありませんでした(笑)

      ただ、実装するとなると、色々と仕様を考えなくてはなりません。
      どの画面幅からサイドパネルにするか、つまりはサイドバーを収納するかとか、どのようにして開き、閉じるかとか、右側パネルにした時にtopへ戻るボタンはどうするかなど、その他諸々と。

    • #33072
      肩肩
      ゲスト

      仰るとおり
      「#naviをdisplay:none」だけで解決できました
      ありがとうございました

      スライドインはサイドバーだけあれば良いのですが
      スクリプトとか無理なので諦めます

      アンドロイドのスマホの場合
      「サイドバー」のアイコンがスクロールバーにちょっと被るのも気になってます

    • #33078
      アバター画像わいひら
      キーマスター

      とりあえず次のバージョンで、カスタマイザーでグローバルメニューが無効になっていても、スライドインで表示されるようにはしておきます。

    • #42316
      トントンリー
      ゲスト

      テーマsimplecity1.9.3に 子テーマも使用しています。
      ブラウザはグーグルクロムを使用しています。

      質問:サイドバーをカスタマイズしていたら、いままでフッターはちゃんと表示させれましたが
      その後に急にフッターがサイドーに移動して右の部分までずれたようになりました。

      原因はサイドバーをいじっていたことだとは思いますが、他のテーマに変更して元に戻したりとか
      してみましたが、どうにも変わりません。初歩的なとこかもしれませんが知恵を拝借させていただき
      たいと思います。こちらにURLを掲載します、どうぞ宜しくお願いします!

      それからもうひとつ右上に検索窓がその時ど同時に出てくるようになったのも気になり消したいのですが
      お手数ですが重ねてご指導宜しくお願いします!

      こちらです⇒http://mwr-nb.com/
      読んでいただきありがとうございました。

      トントンリーでした。

    • #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を提示したいところですが、ちょっとやそっとじゃ修正しきれないぐらいの問題点があるので、作られた人が見直されたほうが早いと思います。

    • #42365
      アバター画像わいひら
      キーマスター
8件の返信スレッドを表示中
  • トピック「グローバルナビを非表示にした時」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)