グローバルナビメニューの幅を均一にしたい。

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など グローバルナビメニューの幅を均一にしたい。

  • このトピックには4件の返信、2人の参加者があり、最後にbabeにより9年、 5ヶ月前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #1299
      babe
      ゲスト

      利用させていただきありがとうございます。

      googleその他で、自分で調べてみたのですが、どうしてもピンとくる回答に巡り合わなかったため
      質問させていただきます。

      「ナビゲーションメニューの幅を統一するには…?+付随1点」トピックとかぶってしまいますが
      表題の通り、文字数に関わらずメニュー幅を均一にしたいのです。

      今後、常識的な範囲でメニューが増えていく可能性もあるので
      px等で指定するのではなく、自動的に調整されていく形のcss指定をしたいのですが…

      ご教授いただければ幸いです。
      よろしくお願いいたします。

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

      僕はCSSに精通しているわけではないので、もしかしたらあるのかもしれませんが、僕が知る限りではCSSでそのようなことはできないような気がします。

      そういった場合は、まずメニューの中で一番長い文字列をjQueryなどで調べ、
      それに対して、以下のような方法で文字列の幅を取得し、

      javascriptで文字列の描画幅を取得する方法 – Qiita

      jQueryなどで、メニューアイテムをその幅に調節する方法ぐらいしかないような気がします。

      • #1302
        babe
        ゲスト

        返信ありがとうございました。

        他のテーマではいくつかcssで出来る方法があるらしいのですが
        simplicityの記述とイコールになるものが無く
        どうしたものかと思案しています…

        cssに特化すれば

        http://bl6.jp/web/css/display-table-cell/

        http://www.inolabo.net/2911

        こんな方法もあるらしいのですが、
        恥ずかしながらcssの知識に乏しいので
        どんな風にカスタマイズすればいいのか分かりません…

        地道に勉強していきます。ありがとうございました。

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

      こんな方法があったんですね。
      ただ、これらの方法を使うとサブメニューの表示が崩れてしまいます。

      サブメニューを使用しないのであれば、以下のスタイルで行けるかと思います。

      #navi .menu > ul,
      #navi ul.menu{
      display: table;
      table-layout: fixed;
      }

      #navi .menu > ul > li,
      #navi ul.menu > li{
      display: table-cell;
      float:none;
      }

      あとは、親テーマのstyle.cssから以下を削除してください。

      #container:after, #navi ul:after, .clearfix:after {
      clear: both;
      content: ” “;
      display: block;
      font-size: 0;
      height: 0;
      visibility: hidden;
      }

      • #1337
        babe
        ゲスト

        無事設定できました。

        お忙しいところ何度もご返答いただきありがとうございました。

2件の返信スレッドを表示中
  • トピック「グローバルナビメニューの幅を均一にしたい。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)