Question

我有一个博客网站，想创建一个下拉菜单，但不提供语法。我已经在菜单栏上创建了菜单超链接，我只想在该超链接中包含下拉菜单，这是因为我已经使用CSS以自己的方式进行了设计，并且不想破坏这种设计。请建议我该怎么办。

添加语法会破坏整个外观并形成类似于设计的框。

Answer 1

HTML：

<div id="menu" class="dropdown">
  <ul>
    <li class="menu-item" data-url="#page1">Item 1</li>
    <li class="menu-item" data-url="#page2">Item 2</li>
    <li class="menu-item" data-url="#page3">Item 3</li>
  </ul>
  <span id="menu-button" class="fa fa-bars"></span>
</div>

CSS：

.dropdown {
  margin-top: -100px;
  height: 100px;
  position: relative;
  background-color: blue;
  width: fit-content;
}

.dropdown>ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropdown>ul>li {
  cursor: pointer;
  padding: 0.3em 1em 0.3em 1em;
  margin: 0;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

.dropdown>ul>li:hover {
  background-color: black;
  color: white;
}

.dropdown>span {
  cursor: pointer;
  position: absolute;
  bottom: -1em;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

.dropdown>span:hover {
  opacity: 0.5;
}

JS：

$(document).ready(function() {
  $("#menu-button").click(function() {
    toggleMenu();
  });

    $(".menu-item").click(function(){
        var url=$(this).attr("data-url");
        console.log(url);
        toggleMenu();
    });
});

function toggleMenu() {
  var slider = "#menu";
  var sliderHeight = $(slider).height();
  if ($(slider).css("margin-top") == -sliderHeight + "px" && !$(slider).is(':animated')) {
    $(slider).animate({
      "margin-top": '+=' + sliderHeight
    });
    $(this).addClass("active");
  } else {
    if (!$(slider).is(':animated')) {
      $(slider).animate({
        "margin-top": '-=' + sliderHeight
      });
      $(this).removeClass("active");
    }
  }
}

有没有不使用<button>语法提供下拉菜单的方法？

1 个答案: