代码之家 › 专栏 › 技术社区 › Paul Prewett

css、z-order和a jquery迷你菜单

z-order css jquery

Paul Prewett · 技术社区 · 16 年前

我正在尝试实现一个非常简单的下拉式小菜单,当一个网站用户悬停在一个图像上时,它会出现。图片是下载东西的链接,小菜单会给他们一个格式选择(平面文件和图表)。

标记:

   <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的魔力是什么?

多谢。

2 回复 | 直到 16 年前

Chris Van Opstal 16 年前

将下拉列表的位置设置为绝对,并添加一个具有相对位置的包装容器。像:

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

Nick Riggs 16 年前

避免容器增长以适应弹出窗口的最佳方法是使用绝对位置而不是相对位置:

.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);
        });
  });

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前