質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2865閲覧

hoverでの表示メニューを、「元メニューの位置を基準として表示」ではなく、「画面にびっしり表示」させたい

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/09 13:49

編集2016/06/09 16:34

WordPressの「writr」というテーマを使っています。

メニューをホバーすると子メニューや孫メニューが表示されるのですが、【現状】では表示されるときに上に空間が空いてしまいます。
これを、【希望】のようにびっしりと空間のない表示にしたいです。

【現状】
イメージ説明

【希望】
イメージ説明


下記に【現状】のCSSを貼り付けておきましたので、どこを訂正すればいいか、お分かりになる方いらっしゃいませんでしょうか?

CSS

1/* =Menu 2----------------------------------------------- */ 3 4.main-navigation { 5 display: block; 6 position: relative; 7 float: left; 8 width: 300px; 9 padding: 0 0 35px; 10 margin: 0 -40px 20px; 11 font-weight: bold; 12 text-transform: uppercase; 13} 14.main-navigation:after { 15 content: ''; 16 display: block; 17 position: absolute; 18 left: 40px; 19 bottom: 0; 20 width: 220px; 21 border-bottom: 15px double #16a085; 22} 23.main-navigation ul { 24 list-style: none; 25 margin: 0px 0px 0px 0px; 26 padding-left: 0; 27} 28.main-navigation li { 29 position: relative; 30} 31.main-navigation a { 32 display: block; 33 position: relative; 34 padding: 10px 40px; 35 text-decoration: none; 36 color: #fff !important; 37} 38.main-navigation a:hover { 39 background: #16a085; 40} 41.main-navigation ul ul { 42 display: none; 43 opacity: 0; 44 z-index: 9998; 45 float: left; 46 position: absolute; 47 top: 0; 48 left: 100%; 49 width: 300px; 50 background: #1abc9c; 51} 52.main-navigation ul ul li:last-child { 53 border-bottom: none; 54} 55.main-navigation .dropdown > a { 56 padding-right: 65px; 57} 58.main-navigation .dropdown > a:after { 59 content: ''; 60 display: block; 61 position: absolute; 62 top: 50%; 63 right: 40px; 64 margin-top: -5px; 65 border-left: 5px solid #fff; 66 border-top: 5px solid transparent; 67 border-bottom: 5px solid transparent; 68} 69.main-navigation ul > li:hover > ul { 70 display: block; 71 opacity: 1; 72 -webkit-animation: menuFadeIn 0.25s; 73 -moz-animation: menuFadeIn 0.25s; 74 -ms-animation: menuFadeIn 0.25s; 75 -o-animation: menuFadeIn 0.25s; 76 animation: menuFadeIn 0.25s; 77} 78.main-navigation li.current_page_item > a, 79.main-navigation li.current-menu-item > a { 80 background: #303030 !important; 81}

どうも該当する部分のCSSがないみたいなんです。

それらしき部分の

.main-navigation ul > li:hover > ul {

というところに

margin

を指定しても、「元メニューの位置」に対するmarginの数値しか変化せず、「画面上下一杯に」はならないんです…(´;ω;`)

これはひょっとして、、
子メニューや孫メニューにPHPからidをつけて、そのidでCSSを指定しなければならないのでしょうか?


追記です。
上述の【希望】サイトはこちらです。
http://switch-box.net/free-cute-desktop-icons.html

もしこのテーマがDLできるサイトなどがわかれば、私の疑問は解決できるので、助かります。(>_<)
テーマ名は「swich-box-20]というみたいなのですが、どうやらWordpress本体では検索しても出ないようなんです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

親や先祖要素にrelativeが入ってるので、そのrelativeが入っている所がtop:0になります。
つまり親メニューのulにrelativeが入っていた場合、子メニューはposition: absolueにしてtop: 0にしても親の所までしか通常はいけません。

が、現在hoverしている親のoffsetのtopがわかれば、その分をマイナスしてやれば画面の一番上が出ますから、そのマイナス値をcssのtopに入れます。

で、

.main-navigation ul > li:hover > ul が子です。

css

1.main-navigation ul > li:hover > ul { 2 position: fixed; 3 height: 100vh; 4 /*top: javascript,jQueryで調整*/ 5}

みたいな感じで思われているような表示になるだろうと思います。
height: 100vhは表示領域の高さです。

.main-navigation ul ul li:hover > ul が孫です。もし子を調整した時に孫まで影響が出る場合はそれを修正しないといけないかと思います。

と、まぁやり方は書いてみたものの、実際の所、親メニューをホバーして子メニューが出た時に、その中の要素を上手く配置しないと、マウスを移動している時にホバーが外れてまた開き直しになったりします。
更に、タブレットやスマホなどのモバイル端末はhover自体がありませんから、どうせクリックになります。

どちらにしても子メニュー、孫メニューが出た時にその中のメニューのリンクが上の方に行くと面倒くさいことになるかと思います。なので、ホバーメニューはできるだけマウスの移動が少ないように横移動がすぐできるデフォルトが一番やりやすいかと思います。

より改造を進めるのであれば、ホバーして表示されたメニューは、メニューリンク・あるいはボディなどのメニュー以外をクリックするまで閉じないように、何かしらクラスを強制的につけて表示するようにするのが良いだろうと思います。

投稿2016/06/09 16:58

hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/09 23:18

おはようございます。 いつもありがとうございます。 へぇ。vhという指定は高さの%なんですね!なるほど。画面上下に広がりました。 ただ、やはり… >現在hoverしている親のoffsetのtopが …こいつがバラバラなので、vhで指定しても、子メニューの上の位置は、親の位置に従ってバラバラになってしまいました。 まぁ、今回は… >どちらにしても子メニュー、孫メニューが出た時にその中のメニューのリンクが上の方に行くと面倒くさいことになる …というごもっともなご意見を、自分への諦めるための言い訳に(笑)採用させていただきます♪ どうもありがとうございました。m(__)m
guest

0

ベストアンサー

使っておられるテーマでは、上に寄せた形での「縦びっしり」メニューに変更するのはとても難しいと思います。
子メニューの位置を変えずに擬似的に「縦びっしり」であれば、下記CSSで実現できます。

CSS

1.level1.node > ul::before, 2.level2.node > ul::before, 3.level3.node > ul::before { 4 background-color: rgba( 250, 70, 70, .5 ); 5 content: ""; 6 display: block; 7 height: 200vh; 8 position: absolute; 9 top: -100vh; 10 width: 100%; 11 z-index: 0; 12}

To: 回答者の方々
同じテーマを使ったサイトを共有しておきます。

【Naturstoffwiki [Naturstoffwiki]】
http://de.naturalproducts.wiki/

【SimienEcoTours】
http://www.simienecotours.com/en/start

投稿2016/06/09 15:50

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/09 16:30

ご回答ありがとうございます。m(__)m 疑似的に、とおっしゃいますと、、?まぁ、なってくれれば問題なしです^^ ただ、、そちらのCSSは、どこに貼り付ければ効果がでるのでしょうか?(;'∀') 子テーマや、本体CSSにただ貼り付けるだけでは、ダメ、、ですよね? どこかPHPとかイジりますか?
kei344

2016/06/09 16:39

子テーマでもいけると思いますよ。CSSの最後にでも追記してみてください。ただ、レスポンシブには対応していないため、メディアクエリなどで調整が必要です。(気にしないなら問題なし)
退会済みユーザー

退会済みユーザー

2016/06/09 16:51

はりゃりゃー、それが、子でも親でも変わらないようなのです(´;ω;`) パソコンでfirefoxとchromeで見たのですが… 「じゃここ確認してみ」とかありますか?
kei344

2016/06/09 17:02 編集

編集されているCSSが読み込まれていない(キャッシュの問題や別フォルダを触ってしまっているなど)可能性はありませんか? ではヘッダテンプレートの最後にでも追加してみてください。ページのソースを表示して、追加したものが入っているか確認してみてください。 <style> /*ここにCSSを入れる*/ </style> ↑注意:styleごと入れる
退会済みユーザー

退会済みユーザー

2016/06/09 17:38

たびたびありがとうございます。m(__)m いえ、ほんとにできませんぞ!?汗 仕様しているテーマは「WordPressの「writr」」というものです。 https://ja.wordpress.org/themes/writr/ あらためてDLして、記載しましたが、ダメでした。。
kei344

2016/06/09 17:49

同じテーマを使用している(とみられる)ページでは出来たのですが、ちょっとわかりませんね。 追加したスタイルはブラウザの「ページのソースを確認」で見えていますか?それをまず確認してください。 その後、header.php の wp_head の後に下記コードを入れてみてください。 <?php wp_head(); ?>←これの後に入れる <style> .main-navigation ul ul::before { background-color: rgba( 250, 70, 70, .5 ); content: ""; display: block; height: 200vh; position: absolute; top: -100vh; width: 100%; z-index: 0; } </style>
退会済みユーザー

退会済みユーザー

2016/06/09 18:00

おゅっ!これは★★ 仰る位置だとできました! なんで他の位置やCSSファイルではできないのでしょうね… て、いうか、おしいです。笑 たしかにびっしり表示されます。 http://www.fastpic.jp/images.php?file=1222618324.png ただ… 願わくば、枠だけでなく、項目自体も上にびっしりしてほしいところでした。 でも、きっと、それが難しい、とおっしゃる由縁なのでしょうね。(>_<) 夜分おそくにたびたびありがとうございました(^_-)-☆
kei344

2016/06/09 18:05

上にびっしり出来ない理由は hidekichiさんの 回答で詳しく書かれていますのでそちらを御覧ください。 また、わかりやすいようにきつめの色を指定しているので、もし使われる場合はうまく調整してください。
退会済みユーザー

退会済みユーザー

2016/06/09 23:21

たびたびのご返信、まことにありがとうございます! 難しいものですねぇ。(*_*) 今回は「枠だけでもびっしりできました賞」ということで、ベストアンサーにさせていただきます。(^_-)-☆
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問