时间戳

首页 > 解决方案 > 如何使下拉菜单从底部滑入并使幻灯片平滑？

javascript - 如何使下拉菜单从底部滑入并使幻灯片平滑？

问题描述

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

我也上传了我的代码，因为我正在尝试自己构建这个模板，所以我的代码可能与原始主题不同：

@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;
}
<!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 添加一些过渡属性，但未能成功。

标签： javascripthtmlcss

解决方案

像这样为下拉菜单设置样式：

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:hover ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

完整的工作示例：（ 运行代码片段）

@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;
}
<!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>

推荐阅读