文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使下拉菜单从底部滑入，使幻灯片平滑？

问如何使下拉菜单从底部滑入，使幻灯片平滑？
EN

Stack Overflow用户
提问于 2020-01-22 19:34:12
回答 3查看 115关注 0票数 0

我需要使我的下拉菜单在导航中从底部滑入并使幻灯片平滑，就像这个项目：https://colorlib.com/preview/theme/unearth/

我还上传了我的代码，因为我试图自己构建这个模板，所以我的代码可能与原来的主题不同：

​

代码语言：javascript
复制
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1.7;
}

a {
  color: #000;
  text-decoration: none;
  transition: 0.3s all ease;
}

ul {
  list-style: none;
}

/* Utility */
.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.text-primary {
  color: #f77b2e;
}

.mlr {
  margin: 0 0.5rem;
}

/* Header */
/* Social */
header .top-bar {
  background: #7a5e86;
  background: linear-gradient(to right, #7a5e86 0%, #a75e67 51%, #f77b2e 100%);
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
  overflow: hidden;
}

header .top-bar a {
  color: rgba(255, 255, 255, 0.9);
}

header .top-bar i {
  margin-right: 0.5rem;
}

header .top-bar .social-1 {
  float: left;
}

header .top-bar .social-2 {
  float: right;
}

/* Navigation */
nav {
  padding: 2rem;
  box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2);
  height: 100px;
}

nav .logo {
  float: left;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: -15px;
}

nav ul {
  float: right;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  margin: 0 15px;
  padding: 20px 0;
}

nav ul li ul li i {
  right: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

nav ul li ul {
  display: none;
  border-top: 2px solid #ff8b00;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
  background: #fff;
}

nav ul li ul li a {
  padding: 9px 20px;
  display: block;
  margin: 0;
}

nav ul li ul li a:hover {
  background: #f8f9fa;
}

nav ul li:hover ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  margin-top: 1rem;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

nav ul li:hover ul li > ul {
  display: none;
}

nav ul li:hover ul li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: -15px;
  width: 200px;

  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

nav ul li:hover ul li {
  display: block;
}
代码语言：javascript
复制
<!DOCTYPE html>
<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" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://kit.fontawesome.com/1685e275a4.js"></script>
    <title>Orn</title>
  </head>
  <body>
    <!-- Header -->
    <header>
      <!-- Social -->
      <div class="top-bar">
        <div class="container">
          <div class="social-1">
            <a href="index.html">
              <i class="far fa-envelope-open "></i> info@yourdomain.com
            </a>
            <span class="mlr"></span>
            <a href="index.html">
              <i class="fas fa-phone-alt fa-sm"></i> 451-805-0360
            </a>
          </div>
          <div class="social-2">
            <a href="index.html"> <i class="fab fa-twitter"></i> Twitter</a>
            <span class="mlr"></span>
            <a href="index.html"> <i class="fab fa-instagram"></i> Instagram</a>
          </div>
        </div>
      </div>

      <!-- Navigation -->
      <nav>
        <div class="container">
          <div class="logo">
            <a href="index.html" class="text-primary">Orn</a>
          </div>

          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li>
              <a href="#">About Us <i class="fas fa-angle-down fa-xs"></i></a>
              <ul>
                <li><a href="#">Team</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">FAQ</a></li>
                <li>
                  <a href="#"
                    >More Links <i class="fas fa-angle-right fa-xs"></i
                  ></a>
                  <ul>
                    <li><a href="#">Menu One</a></li>
                    <li><a href="#">Menu Two</a></li>
                    <li><a href="#">Menu Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>
</html>

​

我试图添加一些转换属性到下拉ul's，但我没有成功地使它工作。

javascript
html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-01-22 20:05:34

下拉式ul如下所示：

代码语言：javascript
复制
nav ul li ul {
    visibility: hidden;
    opacity: 0;
    border-top: 2px solid #ff8b00;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    margin-top: 1rem;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    transition: opacity 300ms ease, transform 300ms ease;
    transform: translateY(50px);
}

在空中盘旋，就像这样：

代码语言：javascript
复制
nav ul li:hover ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

完整的工作示例：(运行代码片段)

​

代码语言：javascript
复制
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1.7;
}

a {
  color: #000;
  text-decoration: none;
  transition: 0.3s all ease;
}

ul {
  list-style: none;
}

/* Utility */
.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.text-primary {
  color: #f77b2e;
}

.mlr {
  margin: 0 0.5rem;
}

/* Header */
/* Social */
header .top-bar {
  background: #7a5e86;
  background: linear-gradient(to right, #7a5e86 0%, #a75e67 51%, #f77b2e 100%);
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
  overflow: hidden;
}

header .top-bar a {
  color: rgba(255, 255, 255, 0.9);
}

header .top-bar i {
  margin-right: 0.5rem;
}

header .top-bar .social-1 {
  float: left;
}

header .top-bar .social-2 {
  float: right;
}

/* Navigation */
nav {
  padding: 2rem;
  box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2);
  height: 100px;
}

nav .logo {
  float: left;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: -15px;
}

nav ul {
  float: right;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  margin: 0 15px;
  padding: 20px 0;
}

nav ul li ul li i {
  right: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

nav ul li ul {
  visibility: hidden;
  opacity: 0;
  border-top: 2px solid #ff8b00;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  margin-top: 1rem;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
  transition: opacity 300ms ease, transform 300ms ease;
  transform: translateY(50px);
}

nav ul li ul li a {
  padding: 9px 20px;
  display: block;
  margin: 0;
}

nav ul li ul li a:hover {
  background: #f8f9fa;
}

nav ul li:hover ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

nav ul li:hover ul li > ul {
  display: none;
}

nav ul li:hover ul li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: -15px;
  width: 200px;

  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

nav ul li ul li {
  display: block;
}
代码语言：javascript
复制
<!DOCTYPE html>
<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" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://kit.fontawesome.com/1685e275a4.js"></script>
    <title>Orn</title>
  </head>
  <body>
    <!-- Header -->
    <header>
      <!-- Social -->
      <div class="top-bar">
        <div class="container">
          <div class="social-1">
            <a href="index.html">
              <i class="far fa-envelope-open "></i> info@yourdomain.com
            </a>
            <span class="mlr"></span>
            <a href="index.html">
              <i class="fas fa-phone-alt fa-sm"></i> 451-805-0360
            </a>
          </div>
          <div class="social-2">
            <a href="index.html"> <i class="fab fa-twitter"></i> Twitter</a>
            <span class="mlr"></span>
            <a href="index.html"> <i class="fab fa-instagram"></i> Instagram</a>
          </div>
        </div>
      </div>

      <!-- Navigation -->
      <nav>
        <div class="container">
          <div class="logo">
            <a href="index.html" class="text-primary">Orn</a>
          </div>

          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li>
              <a href="#">About Us <i class="fas fa-angle-down fa-xs"></i></a>
              <ul>
                <li><a href="#">Team</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">FAQ</a></li>
                <li>
                  <a href="#"
                    >More Links <i class="fas fa-angle-right fa-xs"></i
                  ></a>
                  <ul>
                    <li><a href="#">Menu One</a></li>
                    <li><a href="#">Menu Two</a></li>
                    <li><a href="#">Menu Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2020-01-22 19:49:09

要实现这一平滑效果，使用CSS transform定位您的内部<ul>。

代码语言：javascript
复制
.parent_LI > .sub_UL {

  /* OTHER STYLES HERE */

  transition: 0.24s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);

}

并且，与父:hover相比，LI重写了以下内容：

代码语言：javascript
复制
.parent_LI:hover > .sub_UL {

  opacity: 1;
  visibility: visible;
  transform: translateY(0px);

}

下面是上面的一个例子

​

代码语言：javascript
复制
.parent_LI {
  position: relative;
  display: inline-block;
}

.parent_LI > .sub_UL {
  position: absolute;
  top: 100%;
  transition: 0.24s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
}

.parent_LI:hover > .sub_UL {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
代码语言：javascript
复制
<ul>
  <li class="parent_LI">
    <a>HOVER ME</a>
    <ul class="sub_UL">
      <li>
        <a>HERE I AM</a>
      </li>
    </ul>
  </li>
</ul>

​

票数 0
EN

Stack Overflow用户

发布于 2020-01-22 19:48:46

有几种方法。您可以使用JS或JQuery来动画它。或者使用CSS，您可以使用以下动画：

不太准确，但让你走上正确的轨道：

代码语言：javascript
复制
@keyframes menu-hover {
    0%   {top: 2rem }
    25%   {top: 1.5rem}
    50%   {top: 1remm}
    75%   {top: .5rem}
    100%   {top: 0}
  }

nav ul li:hover ul li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: -15px;
  width: 200px;
  animiation:menu-hover .3s

  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

请参阅这里的更多内容：https://www.w3schools.com/css/css3_animations.asp

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59867062

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档