グローバルメニューを3列表示させてたい
-
http://www.cambodialife.mobi/cambodia/entertainment/csa/7552
ワタシのサイトです。
メニューを画像表示しています。
画像を3つずつ、
3列に表示したいのですが、やり方を教えてください。
よろしくお願いいたします。
-
CSSに
‘
ul.menu-stinger{overflow:hidden;}
li.menu-item{
float:left;
width;calc(33% -10px);
margin-right:10px;
}
li.menu-item a{width:100%; overflow:hidden;}
li.menu-item a img{width:100%; height:auto;}
‘
なんて書くと一番楽かもしれませんが。
ソースさらっと見ただけなので、CSSの部分でもうちょっとシビアに見れば良いと思います。
(↑結構はしょって書いてますので、サイズ見て設計してくださいね)
li要素は特に指定しなければ、ブロック要素なので下の落ちます。
古典的なやり方だと、フロートするか
最近の、海外の雛形みるとdisplay:inline-block;などしてるものとかも多かったりします。ここの部分はCSSのサイトなど調べるといろいろ出てくると思います。
古いブラウザーなどきにされないなら、CSS3なんかつかうと結構楽ですが
フロートが無難といえば無難だと思います。liタグの後ろのスペースが厄介ですね。
そのスペースを消してもいい場合、
例えば以下のCSSで3列になります。header > nav ul { font-size: 0; list-style: none; padding: 0; } header > nav ul * { font-size: medium; } header > nav li { display: inline-block; vertical-align: top; width: calc(100% / 3); } header > nav img { width: 100%; } header > nav a { display: block; }
スペースを消さずに使いたい場合は、
以下のCSSで3列になります。
widthの値が違います。header > nav ul { list-style: none; padding: 0; } header > nav li { display: inline-block; vertical-align: top; width: calc(100% / 3 - .21em); } header > nav img { width: 100%; } header > nav a { display: block; }
では、よいWordPressライフをm(__)m
mura0403さん
ありがとうございます!8suzuran8さん
具体的なアドバイス、大変感謝いたします。さっそくCSSに入れました!
・・が変わりません。。ご指導よろしくお願いいたします。
8suzuran8さん
ありがとうございます!本当に素人な質問ですみません。
子セレクタのカッコがエスケープされて「>」になってしまってます(>ε<)とは、どこを直せばいいんでしょうか??
8suzuran8さん
たびたびすみません。「子セレクタのカッコがエスケープされて「>」になってしまってます(>ε<) 」
は解決できたんですが、、
3列でなくなってしまいました。。解決方法、お願いします!
すいません、IEでダメでしたね><
width: calc(100% / 3);
を
width: calc(100% / 3 - .01px);
に変更してくださいm(__)m
8suzuran8さん
ありがとうございます!
できました!ipad だけちょこっとおかしいですが。。ありがとうございます!
すみません。
もう少し質問させてください。
9つのメニューの大きさを均等にしたいのですが、どのように指定するのがベストでしょうか?
現在、それぞれの画像はwidth=”33%” height=”120″
で指定してあります。
pxを指定するの画面の大きさなどで見え方が変わる、、
と聞いたので、どうしたものかと。。ご教授お願いします!
「大きさを均等に」とは具体的にどんな感じですか?
上下位置の場合、
vertical-align: top;
を
vertical-align: middle;
に変えると、文字の上下位置は揃います。
また、高さを同じにする場合、
画像を、同じサイズに作りなおすのがベストだと思います。
CSSで行う場合、僕なら、header > nav li { height: 25vw; } header > nav a, header > nav img { height: 100%; }
でヤります。
8suzuran8さん
おはようございます。
ありがとうございます!ありがとうございます!
画像はサイズを統一しました。
おかげさまで3列表示になりました!!本当に感謝です。
すみません、、、もしよろしければ。
スマホも同じように常に記事上にメニューが並んでいるように表示したいのですが、、
どのようにすればいいでしょうか。いまはメニューボタンを押すと
縦長に9つメニューがでてきます。常にメニューが9つ表示されているようにしたいです。
ご教授お願いします!!
おはようございますm(__)m
上で追加した
「/* 複数列表示 */」の上で、一つカッコを閉じます。そして、一番下に、
.smanone { display: block; } #menuarea { display: none; }
を追加すると、出来ると思います。
今回の件で追加したものも含めると、以下のようになります。
} /* 複数列表示 */ header > nav ul { font-size: 0; list-style: none; padding: 0; } header > nav ul * { font-size: medium; } header > nav li { display: inline-block; vertical-align: top; width: calc(100% / 3 - .01px); } header > nav img { width: 100%; } header > nav a { display: block; } .smanone { display: block; } #menuarea { display: none; }
どうでしょうか?
8suzuran8さん
できました!感激です><
ありがとうございます。ここまで教えていただけるなんて
全然思っていなかったので・・・欲がでてしまってます。。
表示速度が遅く、
Google pagespeed で調べるとモバイルが55です。サーバーを変えたり、色々とプラグインを変えているのですが
なかなか改善されません。。もしアドバイスあれば、ご教授お願いします。
・・・欲張りすぎですよね。。
いえ、いいと思いますよ(^^)
でも、
「グローバルメニューを3列表示させてたい」
という内容とは、少し離れすぎなので、
別の質問として出したほうが、
色んな意見が集まっていいと思いますよ(^^)b
- トピック「グローバルメニューを3列表示させてたい」には新たに返信することはできません。