时间戳

首页 > 解决方案 > 有什么方法可以在不使用的情况下提供下拉菜单

html - 有什么方法可以在不使用的情况下提供下拉菜单

问题描述

我有一个博客网站，想制作一个下拉菜单，但不使用语法。我已经在菜单栏上创建了菜单超链接，我只想在该超链接中包含下拉菜单，因为我已经使用 CSS 以我的方式设计它并且不想破坏该设计。请建议我该怎么做。

添加语法会破坏整体外观并形成类似设计的盒子。

标签： htmlcss

解决方案

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

推荐阅读