javascript - 带有css和jquery的下拉菜单的滑动效果-6ren

javascript - 带有css和jquery的下拉菜单的滑动效果

转载作者：行者123 更新时间：2023-11-28 00:39:06

25

4

我有一个菜单，我试图让它响应智能手机。我成功地做了下拉菜单，但现在它没有任何效果，当你按下栏图标时它就会弹出。我想要在您按下栏图标时向下滑动的效果。

更好解释的图片:

html 和 css:

html {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background: #eee;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

nav {
  background: #cecece;
  display: flex;
}

.logo {
  flex-grow: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo .bar {
  display: none;
}

nav ul {
  flex-grow: 10;
  list-style: none;
  display: flex;
}

nav ul li {
  flex-grow: 1;
}

nav a {
  text-decoration: none;
  padding: 30px;
  display: block;
  text-align: center;
  color: black;
}

nav a:hover {
  background: #8d8d8d;
  color: #ffff;
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }

  .logo {
    padding: 20px;
    background: rgb(122, 122, 122);
    justify-content: space-between;
  }

  .logo .bar {
    display: block;
  }

  .logo .bar:hover {
    cursor: pointer;
  }

  nav ul {
    height: 0;
    flex-direction: column;
    overflow: hidden;
    transition: 0.5s;
  }

  nav ul.active {
    height: auto;
  }

  nav ul li a {
    padding: 10px;
    text-align: left;
  }
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="test2.css" />
    <!--
      FONT AWSOME=========================================================================
    -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <nav>
      <div class="logo">
        <h2>TestLogo</h2>
        <div class="bar"><i class="fas fa-bars"></i></div>
      </div>
      <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
      </ul>
    </nav>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
      $('nav .logo .bar').click(function() {
        $('nav ul').toggleClass('active');
      });
    </script>
  </body>
</html>

感谢任何帮助!

最佳答案

以像素为单位设置 ul 修饰符 '.active' 的高度值
css transition 不理解auto 参数

要更深入地了解这个问题，请阅读文章 https://css-tricks.com/using-css-transitions-auto-dimensions/
这是它的引述:

auto values have been intentionally excluded from the CSS transitions spec. It looks like it's been requested by a few people, but when you think about it, it makes at least a little sense that it hasn't been included. The browser process that re-calculates the sizes and positions of all elements based on their content and the way they interact with each other (known as "reflow") is expensive. If you were to transition an element into a height of auto, the browser would have to perform a reflow for every stage of that animation, to determine how all the other elements should move. This couldn't be cached or calculated in a simple way, since it doesn't know the starting and/or ending values until the moment the transition happens. This would significantly complicate the math that has to be done under the hood and probably degrade performance in a way that might not be obvious to the developer.

无论如何，针对您的情况的最佳解决方案是将 transform: scaleY css 属性从 0 调整为 1，因为这不会触发浏览器重排

关于javascript - 带有css和jquery的下拉菜单的滑动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53970273/

25

4

0

文章推荐： javascript - 使用 jquery 验证表单时使用默认浏览器消息

文章推荐： javascript - AngularJS:触摸屏上的 ng-mouseOver

文章推荐：文本文件中的 C++ I/O 编号

文章推荐： javascript - 输入标签从不显示非数字单词的外观

javascript - 用jquery(而不是mootools)模拟这个 slider 效果【横向 Accordion 效果】
我可以使用 javascript 和其他所有东西，但在重新发明轮子之前，我想知道是否已经有一个类似的 jquery 插件，因为我想使用那个框架而不是 mootools。我没有钱的问题，特别是 5 欧
悬停关闭的 CSS 效果
我正在 React 应用程序中处理动画。我需要动画在悬停后开始工作。我尝试了 :hover:after css 但不起作用。将鼠标悬停在图像上后动画可以工作，但我需要在悬停后开始。将鼠标悬停在图像上
Jquery slider 效果
我正在使用 jQuery 在按钮单击时实现 slider 效果。我的代码是: $(document).ready(function() { $("#mybutton").click(functio
jQuery .slideRight 效果
我需要一个div标签在屏幕右侧滑出，如何使用jQuery获得这种效果？我一直在看这里:http://api.jquery.com/category/effects/sliding/而且这似乎不是我要找
iPhone页面 curl 效果
我正在使用此代码实现页面 curl 效果......它在模拟器和设备中工作正常......但它不是(setType:@“pageCurl”)苹果记录的api，这导致它被iPhone拒绝App Stor
WPF 效果 - 对文本
我见过各种关于 WPF 效果的引用，但它们似乎是针对位图的，而不是针对文本的。是否可以将除模糊或投影以外的效果应用于XAML中的TextBlock对象？我想要做的示例可能是轮廓笔划，或斜角/浮雕效果
WPF 效果 - 对文本
我见过各种关于 WPF 效果的引用，但它们似乎是针对位图的，而不是针对文本的。是否可以将除模糊或投影以外的效果应用于XAML中的TextBlock对象？我想要做的示例可能是轮廓笔划，或斜角/浮雕效果
css - 没有固定定位的假背景透明度/效果
我正在尝试模拟这种效果:http://meyerweb.com/eric/css/edge/complexspiral/demo.html在我的博客上:http://segment6.blogspot
JavaFX Accordion 效果
我尝试将样式应用到 Accordion Pane ，但遇到了问题。这行不通。 accordion.setEffect(new DropShadow(BlurType.ONE_PASS_BOX, Co
javascript - 数据表切换列可见性延迟/效果
关于 Datatables website 的教程足够清楚了: 在我告诉 Datatables 我正在谈论哪一列后，我只需将切换按钮放入: column.visible( ! column.visib
Jquery ScratchOut 效果
我正在寻找 scratchOut 效果，随便叫它什么。这是从前景中删除图像的效果，因此背景图像变得可见。我曾尝试使用 jquery 插件重新创建此效果，但它并不像我希望的那样流畅。有没有人有这种
Android实现文字和图片混排(文字环绕图片)效果
本文实例讲述了android实现文字和图片混排(文字环绕图片)效果。分享给大家供大家参考，具体如下：在平时我们做项目中，或许有要对一张图片或者某一个东西进行文字和图片说明，这时候要求排版美观，所
Javafx简单实现【我的电脑资源管理器】效果
本文实例讲述了Javafx简单实现【我的电脑资源管理器】效果。分享给大家供大家参考。具体如下： 1. java代码： ?
angular - 服务循环的 ngrx 效果
我是 ngrx 的新手，正在尝试让我的 ngrx 商店的 @Effect 函数正常工作。下面的代码显示了如果我没有使用 ngrx 商店，服务是如何工作的。我首先调用 http.get 来获取列表，然后
ffmpeg - 如何在不对视频应用图像蒙版的情况下创建圆形视频(视频顶部的透明区域)效果
基本上我搜索了很多，解决方案建议应用一些 PNG 掩码或不提供所需的解决方案。我发现了什么。 ffmpeg -i main.mkv -i facecloseup.mkv -filter_compl
rxjs - 需要帮助理解这个 Ngrx 效果
有关使用从商店中选择的状态的效果的 Ngrx 文档状态(没有双关语意) Note: For performance reasons, use a flattening operator like co
c# - 如何在数据网格控件中利用 WPF 效果？
我有一个数据网格控件，我在其中使用名为 FastShadow 的自定义效果，它就像一个光晕。我希望效果在其边界之外发光，这样很好，但是当我在顶部绘制另一个形状时，我不希望这个形状受到影响。在本例中，
css - 从单个元素中移除 CSS 效果
除了子 div.exception 中的所有内容，我想将 div.main 中的所有文本设为灰色。 div.exception 应该看起来好像类 main 从未添加到父 div。这可能吗？如果是这样
flutter - 使用pdf文件的页面 curl 效果
我有一个 PDF 文件，我想重现此包页面中的页面 curl 效果: https://pub.flutter-io.cn/packages/page_turn 我试过用这个 page_turn插件，它需
rxjs - 延迟测试 NGRX 效果
我想测试一个效果如下: 如果调度了 LoadEntriesSucces 操作，则效果开始等待 5 秒 5 秒后发送 http 请求当响应到达时，将分派(dispatch)新的操作(取决于响应是成功

首页

博学

6Ren·AI

商城

javascript - 带有css和jquery的下拉菜单的滑动效果