CSS, z-order и мини-меню jQuery - PullRequest
Новая
       16

CSS, z-order и мини-меню jQuery

0 голосов
/ 10 августа 2009

Я пытаюсь реализовать очень простое маленькое выпадающее мини-меню, которое будет появляться, когда пользователь веб-сайта наводит курсор на изображение. Изображение представляет собой ссылку для загрузки чего-либо, а мини-меню предоставит им выбор формата (плоский файл или диаграмма).

Разметка: 

   <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>

Итак, меню появляется - без проблем. Проблема в том, что ячейка таблицы довольно мала и увеличивается, чтобы вместить дополнительный контент, когда отображается

Ответы [ 2 ]

1 голос
/ 10 августа 2009

Лучший способ избежать увеличения объема контейнера для размещения всплывающего окна - это использовать абсолютное позиционирование вместо относительного: 

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

Теперь, минусом этого является то, что список, скорее всего, не появится, где вы хотите. Но это нормально, мы можем использовать 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);
        });
  });
1 голос
/ 10 августа 2009

Установите абсолютную позицию раскрывающегося списка и добавьте упаковочный контейнер с относительной позицией Как: 

<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>
...