色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在SASS中構建一個嵌套的響應式導航菜單，以便用戶可以只使用HTML而不使用額外的CSS代碼來添加所需數量的子菜單？

CSS
錢艷冰1年前8瀏覽0評論

使用這個視頻教程，我在SASS中設計了一個響應式導航菜單，允許我添加子菜單，但是每個子菜單都需要在SASS中創建一個新的選擇器。我想設計一次菜單和子菜單的樣式，這樣初學者就不需要在SASS中添加任何新的選擇器來在HTML中添加子菜單。

薩斯:

@font-face {
    font-family: "Roboto";
    font-style: normal;
    src: url("../Fonts/Roboto.ttf") format("truetype");
}

* {
    font-family: "Roboto";
    font-size: 20px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
}

.logo {
    z-index: 10;
    position: relative;
}

.header {
    float: center;
    background: linear-gradient(to top, #9472ff 2%, #3d00ff 98%) center/100%;
    border-radius: 10px;
    box-shadow: 1px 2px 4px #000000;
    color: white;
    width: 100%;
    height: 100px;
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 40px;
    text-align: right;
    text-shadow: 0px 2px 2px #000000;
}

.nav {
    list-style: none;
    display: flex;
    gap: 24px;
}

.nav li a {
    text-decoration: none;
    font-size: 28px;
    color: #f3b238;
    display: inline-block;
    width: 100%;
    position: relative;
}

.nav li a:hover {
    color: #fff;
}

.nav li a::after {
    content: "";
    width: 0%;
    height: 4px;
    background-color: #fff;
    position: absolute;
    left: 0px;
    bottom: -5px;
    border-radius: 5px;
    transition: all 0.7s ease;
}

.nav li a:hover::after {
    width: 100%;
}

@media (max-width: 769px) {
    .nav {
        position: fixed;
        inset: 0;
        background: linear-gradient(to top, #9472ff 2%, #3d00ff 98%) center/100%;
        flex-direction: column;
        align-items: center;
        padding-top: 150px;
        transform: translateX(100%);
        transition: all 0.7s ease;
    }

    .nav[data-visible=true] {
        transform: translateX(0%);
    }

    .nav-menu-button {
        position: absolute;
        display: flex;
        z-index: 10;
        justify-content: center;
        align-items: center;
        height: 80px;
        width: 80px;
        right: -10px;
        top: -10px;
        cursor: pointer;
        transition: all 0.7s ease-in-out;
    }

    .nav-menu-line {
        width: 50px;
        height: 6px;
        background-color: #d0fd66;
        border-radius: 5px;
        transition: all 0.7s ease-in-out;
    }

    .nav-menu-line::before,
    .nav-menu-line::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 6px;
        background-color: #d0fd66;
        border-radius: 5px;
        transition: all 0.7s ease-in-out;
    }

    .nav-menu-line::before {
        transform: translateY(-16px);
    }

    .nav-menu-line::after {
        transform: translateY(16px);
    }

    .nav-menu-button.open .nav-menu-line {
        transform: translateX(-50px);
        background: transparent;
    }

    .nav-menu-button.open .nav-menu-line::before {
        transform: rotate(45deg) translate(35px, -35px);
    }

    .nav-menu-button.open .nav-menu-line::after {
        transform: rotate(-45deg) translate(35px, 35px);
    }
}

JavaScript:

const MenuButton = document.querySelector(".nav-menu-button");
const Navigation = document.querySelector(".nav");
let MenuOpen = false;
MenuButton.addEventListener("click", () => {
    switch (!MenuOpen) {
        case true:
            MenuButton.classList.add("open");
            Navigation.setAttribute("data-visible", "true")
            MenuOpen = true;
            break;
        default:
            MenuButton.classList.remove("open");
            Navigation.setAttribute("data-visible", "false")
            MenuOpen = false;
            break;
    }
});

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pasha-Piano</title>
    <link rel="stylesheet" href="SCSS/AppStyle.css">
    <link rel="stylesheet" href="SCSS/AppStyle.scss" media="(max-width:769px)">
    <link rel="stylesheet" href="Script.js">
</head>

<body>
    <div class="logo" role="img">
        <img src="Images/Logo.png" height="100" style="width:auto; float:left;" />
    </div>
    <header class="header">
        <div class="nav-menu-button">
            <div class="nav-menu-line"></div>
        </div>
        <nav class="nav" data-visible="false" role="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">Goods</a></li>
        </nav>
    </header>
    <script src="Script.js"></script>
</body>

</html>

如果你的答案解決了我的問題(通過使用這種多級下拉樣式)，我會接受并評分。

謝了。

# # #所以在你的html中，你在Li(nav & gt；ul & gt李& gt答

<nav class="nav" data-visible="false" role="navigation">
        <!--       main-level-menu -->
        <ul >
            <li>
                <a href="#">Home</a>
                <!--                sub-menu-->
                <ul clas>
                    <li><a href="#">first 1</a></li>
                    <li><a href="#">first 2</a></li>
                    <li><a href="#">first 3</a></li>
                </ul>
            </li>
            <li><a href="#">Goods</a>
                <!--                sub-menu-->
                <ul >
                    <li><a href="#">value 1</a>
                        <ul >
                            <li><a href="#">second 1</a>
                                <ul >
                                    <li><a href="#">third 1</a></li>
                                    <li><a href="#">third 2</a></li>
                                    <li><a href="#">third 3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">second 2</a></li>
                            <li><a href="#">second 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">value 2</a></li>
                    <li><a href="#">value 3</a></li>
                </ul>
            </li>
        </ul>
    </nav>

在app-style.scss中

.nav {
  display: flex;
  gap: 24px;

  // init all unordered list at "not exist"
  ul {
    display: none;
  }
  // select ul directly under the .nav selector and bypasse the "none" property
  > ul {
    display: flex;
  }

  // style of *all list-item and all element under it
  li {
    list-style: none;

    a {
      text-decoration: none;
      font-size: 28px;
      color: $color_2;
      display: inline-block;
      width: 100%;
      position: relative;

      &::after {
        content: "";
        width: 0%;
        height: 4px;
        background-color: $background-color_1;
        position: absolute;
        left: 0px;
        bottom: -5px;
        border-radius: 5px;
        transition: all 0.7s ease;
      }
    }

    &:hover {
      a {
        color: $color_3;

        &::after {
          width: 100%;
        }
      }
      > ul {
        display: flex;
      }
    }
  }
}

輸出appstyle.css會給你這個

.nav {
    display: flex;
    gap: 24px;
}

.nav ul {
    display: none;
}

.nav > ul {
    display: flex;
}

.nav li {
    list-style: none;
}

.nav li a {
    text-decoration: none;
    font-size: 28px;
    color: #f3b238;
    display: inline-block;
    width: 100%;
    position: relative;
}

.nav li a::after {
    content: "";
    width: 0%;
    height: 4px;
    background-color: #e69;
    position: absolute;
    left: 0px;
    bottom: -5px;
    border-radius: 5px;
    transition: all 0.7s ease;
}

.nav li:hover a {
    color: #e69;
}

.nav li:hover a::after {
    width: 100%;
}

.nav li:hover > ul {
    display: flex;
}

我不知道這是否是你所期望的。 在此輸入圖像描述

還有抱歉我的英語，我是法語X)