0

Webサイトのユーザーが画像にカーソルを合わせると表示される、非常にシンプルな小さなドロップダウンスタイルのミニメニューを実装しようとしています。画像は何かをダウンロードするためのリンクであり、ミニメニューでフォーマット（フラットファイルとチャート）を選択できます。

マークアップ：

   <style>
      ol, ul
      {
         list-style: none;
      }
      .down-list
      {
         position:relative;
         left:0px;
         top:0px;
         z-index:2;
      }
   </style>

   ...

   <td>
     <div class="extraDownloadMenu"><img src="/AppName/Images/Icons/Download_15.gif" />
     <ul class="down-list" style="display:none;">
        <li>Data file</li>
        <li>Chart</li>
     </ul></div>
   </td>

javascript：

   <script language="javascript" type="text/javascript">

      $(document).ready(function() {
         $('.extraDownloadMenu').hover(
            function() {
               $('.down-list', this).slideDown(100);
            },
            function() {
               $('.down-list', this).slideUp(100);
            });
      });

   </script>

したがって、メニューが表示されます-問題ありません。問題は、テーブルセルが非常に小さく、<ul>が表示されたときに追加のコンテンツを収容するために大きくなることです。これはもちろんひどく見え、私が望むものではありません。私が欲しいのは、コンテンツがそこにあるコンテンツの上にスムーズに表示されることです。

これを実現するためのCSSの魔法は何ですか？

どうもありがとう。

4

2 に答える 2

1

ドロップダウンの位置を絶対に設定し、相対の位置でラッピングコンテナを追加します。好き：

<style>
    ol, ul {
     list-style: none;
    }
    .down-list {
     position:absolute;
     left:0px;
     top:0px;
     z-index:2;
    }
    .down-list-wrapper {
     position:relative;
    }
</style>

...

<td>
    <div class="extraDownloadMenu"><img src="/AppName/Images/Icons/Download_15.gif" />
     <div class="down-list-wrapper">
         <ul class="down-list" style="display:none;">
            <li>Data file</li>
            <li>Chart</li>
         </ul>
     </div>
    </div>
</td>
于 2009-08-10T19:48:48.323 に答える
1

ポップアップに対応するためにコンテナが大きくなるのを防ぐ最善の方法は、相対位置ではなく絶対位置を使用することです。

.down-list
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:2;
}

さて、これの欠点は、リストが希望の場所にポップアップ表示されない可能性があることです。しかし、それは問題ありません。jQueryを使用して、表示されるたびにjQueryを配置することができます。（未テスト）のようなもの：

  $(document).ready(function() {
     $('.extraDownloadMenu').hover(
        downloadMenu = $(this);
        function() {
           $('.down-list', this)
               .css({left: downloadMenu.offset().left, top: downloadMenu.offset().top + $(this).height()})
               .slideDown(100);
        },
        function() {
           $('.down-list', this).slideUp(100);
        });
  });
于 2009-08-10T19:52:13.760 に答える