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

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

ただいまの
回答率

90.51%

  • PHP

    24054questions

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

  • WordPress

    8940questions

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

  • CSS

    7553questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,060
退会済みユーザー

退会済みユーザー

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

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

【現状】
イメージ説明

【希望】
イメージ説明



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

/* =Menu
----------------------------------------------- */

.main-navigation {
    display: block;
    position: relative;
    float: left;
    width: 300px;
    padding: 0 0 35px;
    margin: 0 -40px 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.main-navigation:after {
    content: '';
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 220px;
    border-bottom: 15px double #16a085;
}
.main-navigation ul {
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding-left: 0;
}
.main-navigation li {
    position: relative;
}
.main-navigation a {
    display: block;
    position: relative;
    padding: 10px 40px;
    text-decoration: none;
    color: #fff !important;
}
.main-navigation a:hover {
    background: #16a085;
}
.main-navigation ul ul {
    display: none;
    opacity: 0;
    z-index: 9998;
    float: left;
    position: absolute;
    top: 0;
    left: 100%;
    width: 300px;
    background: #1abc9c;
}
.main-navigation ul ul li:last-child {
    border-bottom: none;
}
.main-navigation .dropdown > a {
    padding-right: 65px;
}
.main-navigation .dropdown > a:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 40px;
    margin-top: -5px;
    border-left: 5px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.main-navigation ul > li:hover > ul {
    display: block;
    opacity: 1;
    -webkit-animation: menuFadeIn 0.25s;
    -moz-animation:    menuFadeIn 0.25s;
    -ms-animation:     menuFadeIn 0.25s;
    -o-animation:      menuFadeIn 0.25s;
    animation:         menuFadeIn 0.25s;
}
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a {
    background: #303030 !important;
}




どうも該当する部分の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本体では検索しても出ないようなんです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

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

で、

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

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


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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/10 08:18

    おはようございます。
    いつもありがとうございます。

    へぇ。vhという指定は高さの%なんですね!なるほど。画面上下に広がりました。

    ただ、やはり…
    >現在hoverしている親のoffsetのtopが
    …こいつがバラバラなので、vhで指定しても、子メニューの上の位置は、親の位置に従ってバラバラになってしまいました。

    まぁ、今回は…
    >どちらにしても子メニュー、孫メニューが出た時にその中のメニューのリンクが上の方に行くと面倒くさいことになる
    …というごもっともなご意見を、自分への諦めるための言い訳に(笑)採用させていただきます♪

    どうもありがとうございました。m(__)m

    キャンセル

checkベストアンサー

0

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

.level1.node > ul::before,
.level2.node > ul::before,
.level3.node > ul::before {
    background-color: rgba( 250, 70, 70, .5 );
    content: "";
    display: block;
    height: 200vh;
    position: absolute;
    top: -100vh;
    width: 100%;
    z-index: 0;
}

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/10 01:30

    ご回答ありがとうございます。m(__)m
    疑似的に、とおっしゃいますと、、?まぁ、なってくれれば問題なしです^^

    ただ、、そちらのCSSは、どこに貼り付ければ効果がでるのでしょうか?(;'∀')
    子テーマや、本体CSSにただ貼り付けるだけでは、ダメ、、ですよね?
    どこかPHPとかイジりますか?

    キャンセル

  • 2016/06/10 01:39

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

    キャンセル

  • 2016/06/10 01:51

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

    キャンセル

  • 2016/06/10 01:58 編集

    編集されているCSSが読み込まれていない(キャッシュの問題や別フォルダを触ってしまっているなど)可能性はありませんか?

    ではヘッダテンプレートの最後にでも追加してみてください。ページのソースを表示して、追加したものが入っているか確認してみてください。
    <style>
    /*ここにCSSを入れる*/
    </style>
    ↑注意:styleごと入れる

    キャンセル

  • 2016/06/10 02:38

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

    キャンセル

  • 2016/06/10 02: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/10 03:00

    おゅっ!これは★★

    仰る位置だとできました!
    なんで他の位置やCSSファイルではできないのでしょうね…

    て、いうか、おしいです。笑

    たしかにびっしり表示されます。
    http://www.fastpic.jp/images.php?file=1222618324.png

    ただ…
    願わくば、枠だけでなく、項目自体も上にびっしりしてほしいところでした。
    でも、きっと、それが難しい、とおっしゃる由縁なのでしょうね。(>_<)

    夜分おそくにたびたびありがとうございました(^_-)-☆

    キャンセル

  • 2016/06/10 03:05

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

    キャンセル

  • 2016/06/10 08:21

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

    キャンセル

同じタグがついた質問を見る

  • PHP

    24054questions

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

  • WordPress

    8940questions

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

  • CSS

    7553questions

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

  • トップ
  • PHPに関する質問
  • hoverでの表示メニューを、「元メニューの位置を基準として表示」ではなく、「画面にびっしり表示」させたい