• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ



    2014年8月9日土曜日

    【HTML/CSS/Javascript】ドロップメニューが隠れてしまった時の打開策





    ドロップメニュー(ドロップダウンメニュー)が隠れてしまう・表示されなくなる・下に隠れる、等の打開策と言っても僕の場合ある場所のあるコードが埋め込まれている事に気づかず4,5時間苦戦しただけなんですけどもねw
    その苦戦したおかげで少しまた新たな知恵がついたことも事実なので色々と復習として更新しようと思います(。・ω・)
    何事も諦めないことが大切なんだな・・・と実感したのでもしこの記事タイトルのようなキーワードで検索して困ってる方が居ましたら参考になるかわかりませんがお助けできたら幸いです(o*。_。)oペコッ

    隠れる z-index hidden 親要素
    僕の場合ドロップメニューが記事下に隠れてしまいどうしようもなくなってしまったので色々と検索してみました。
    その時にみたのはz-index指定だったりposition:relative;を一緒に使ったりみたいなページを見てきましたがその前の大前提に、ドロップメニューを設置している場所が一体どこの面しているのかが重要だったりします。
    僕の場合だとこのブログを見て解るようにドロップメニューはヘッダー部分に面しています。
    HTMLだと・・・こうなってます。



     <header id="header">
        <hgroup>
          <h1><href="<%url>"><%blog_name></a></h1>
          <h2><%introduction></h2>
        </hgroup>
    <name="toppage"></a>
        <div id="blog_menu">

    <!--topmenu-->
    <!--topmenu-->
    <!--topmenu--> 
               <span class="topmenu"><!-- topmenu作成中--> 
       <ul>
      <li><href="http://blog-imgs-69.fc2.com/b/a/r/barasa88888/201406270634160a4.png"title="定期的に更新してます(。・ω・)" rel="lightbox">Profile</a>
    <ul>
    <li><href="http://barasa88888.blog96.fc2.com/blog-entry-4.html">Profile1</a></li>
    <li><href="http://barasa88888.blog96.fc2.com/blog-entry-7.html">Profile2</a></li>
    </ul>
    </li>
      <li><href="#">WoT Link</a>
       <ul>
         <li><href="http://barasa88888.blog96.fc2.com/blog-entry-153.html">Link1</a></li>
         <li><href="http://barasa88888.blog96.fc2.com/blog-entry-154.html">Link2</a></li>
       </ul>
      </li>
      <li><href="#">BLOG LIST</a>
       <ul>
        <li><href="http://teinennpirenngougunn.blog.fc2.com/" target="_blank">AnimeReview</a></li>
        <li><href="http://imadani-oreha-1995.blogspot.jp/" target="_blank">DesignBlog</a></li>
        <li><href="http://www.dclog.jp/barasa_Euterpe_G/" target="_blank">Decolog</a></li>
       </ul>
      </li>
      <li><href="#">SNS</a>
       <ul>
        <li><href="http://twitter.com/Euterpe_Jay" target="_blank">Twitter</a></li>
        <li><href="http://plus.google.com/u/0/106891255319838926987/posts"target="_blank">Google+</a></li>
        <li><href="http://www.facebook.com/rpe.eute" target="_blank">FaceBook</a></li>
        <li><href="http://www.youtube.com/user/barasa88888" target="_blank">YouTube</a></li>
        <li><href="http://euterpe888.tumblr.com/" target="_blank">Tumber.</a></li>
        <li><href="http://profile.hatena.ne.jp/barasa88888/" target="_blank">Hatena</a></li>
       </ul>
      </li>
      <li><href="http://barasa88888.blog96.fc2.com/blog-entry-280.html"target="_blank">Policy</a></li>
      </ul>
      </span><!--/ topmenu作成中-->
    <!--/topmenu-->
    <!--/topmenu-->
    <!--/topmenu-->
    <br class="clear">
    <!--今のform actionの場所-->
    <form action="http://barasa88888.blog96.fc2.com/?template=SUP08_21"method="get"class="search">
    <input type="image" value="Search" src="http://blog-imgs-36.fc2.com/s/l/u/slugsupper/template_search-trans.png" class="btn">
    <input type="text" name="q" maxlength="200" class="txt">
    </form>
    <!--今のform actionの場所-->
    </div>
      </header><!-- /#header -->




    こんな感じに最初と最後にheaderで囲ってますよね。
    僕のブログではドロップメニューの固有IDをtopmenuにしてるのでそこも見ていただくと解ると思います。
    一体何を言いたいのかと言うと、この親要素となっているheader部分が重要点でheaderのCSSにoverflow:hidden;と指定されてるとheaderの範囲を超えてしまった時自然に隠れてしまうのです。
    これではいくらz-indexやpositionをいじってもoverflow:hiddenがある限り無と化します…。
    ついでなのでoverflowはhidden以外にどんな種類があるのかなと調べてみたところ・・・


    ・visible
    ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
    ・scroll
    入りきらない内容はスクロールして見られるようになります。
    ・hidden
    はみ出た部分は表示されません。
    ・auto
    ブラウザに依存します(一般的にはスクロールして見られるようになります)。




    と他に3つ種類がありました(`・ω・´)
    そしてheaderのCSSに設定されてたのはhidden・・・。
    つまりそういうことでした。
    これで一応記事の上に表示されるようになりますが今度は別の問題が発生します。
    記事部分までマウスを移動してくとそのまま開いてたドロップメニューが突然隠れてしまいました。
    絶望に見舞われた瞬間でしたね。
    未来が見えなくなりました・・・。
    そう思い込んでいた時、まだ試してないことが一つ。
    この調べてみたけど使い道がわからなかったz-indexposition
    同じheader部分にこのz-index:50;(指定を50に)を埋め込みついでにposition:relative;も指定すると・・・
    今のブログトップにあるドロップメニューまでに至るわけです(`・ω・´)
    ほんとに原因追求にかなり時間を食わされたのはちょっと目に来ましたが自分のブログが更にワンランクアップしたような気がしました(自分の中で)

    0 件のコメント :

    コメントを投稿

    ANTENA RSS

    LINK





    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    IN OUT

    PAGE TOP