实现过程

实现一个简易的鼠标悬停菜单项显示其子项的下拉框控件。将用到 CSS 绝对定位、流式布局、动画等；JQuery 鼠标移入和移出事件、DOM 查找。效果图如下：

HTML 结构：

<div class="dropdown-group">

  <div class="dropdown">

    <div class="label">菜单1</div>

    <div class="items">

      <div class="item">菜单1-1</div>

    </div>

  </div>

</div>

使用流式布局让div.dropdown-group下的所有div.dropdown横向排列：

.dropdown-group {

  cursor: pointer;

  height: 40px;

  width: 220px;

  display: flex;

  justify-content: space-between;

  align-content: center;

  align-items: center;

  background-color: #7979de;

}

div.dropdown 的高和宽都要和父元素保持一致，并且定位是相对定位，因为其子项都是相对于它进行的。

.dropdown {

  height: 100%;

  width: 100%;

  position: relative;

}

div.dropdown div.items也就是下拉所展示的元素，相对于其父元素进行定位，自身是绝对定位，top的值和父元素的高度一致，即 40px，left的值设置 0px，左上角对齐父元素的左下角。display在鼠标没有悬停时设置为 none。

当鼠标悬停菜单时，div.dropdown div.items的display设置为 block。动画有 0.5s 的延迟，从 0 高度到最大高度过程中，元素溢出时必须要隐藏，即overflow-y: hidden。

.dropdown .items {

  display: none;

  width: 100%;

  padding: 5px;

  position: absolute;

  top: 40px;

  left: 0;

  overflow-y: hidden;

  box-sizing: border-box;

  background-color: #00b7ff;

}

.dropdown:hover .items {

  display: block;

}

最后，轮到 JQ 部分，当鼠标悬停时，查询每一个子项的总高度，以及添加样式和移除样式：

$(".dropdown")

  .mouseenter(function () {

    let $items = $(this).find("div.items");

    $(this).css({ "--items-height": `${$items.height()}px` });

    $items.addClass("show-items");

  })

  .mouseleave(function () {

    let $items = $(this).find("div.items");

    $items.removeClass("show-items");

  });

.show-items {

  animation: ShowItems 0.5s ease-in-out;

}

@keyframes ShowItems {

  0% {

    height: 0;

  }

  100% {

    height: var(--items-height);

  }

}

巴特西

03#Web 实战：实现下拉菜单

实现过程

最新文章

热门文章