導航欄中的HTML幻燈片錯誤位置-有解無憂

我有個問題。我正在嘗試創建一個帶有下拉選單的回應式導航欄。當我在移動設備上使用漢堡選單打開導航欄時，我希望選單從左側滑入并讓選單使用除導航欄本身之外的整個螢屏。我現在有以下代碼：

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(src/assets/images/background2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color:#464646;
}

nav {
    background-color: #547430;
    height: 70px;
}

.nav:after{
    content: '';
    clear: both;
    display: table;
}

.nav-links a {
    color: #fff;
}

nav .logo{
    float: left;
    color: white;
    font-size: 27px;
    font-weight: 600;
    line-height: 70px;
    padding-left: 60px;
    padding-right: 120px;
}

nav ul{
    margin-right: 40px;
    list-style: none;
    position: relative;
}

.menu {
    gap: 1em;
    font-size: 18px;
    z-index: 9;
}

nav ul{
    margin-right: 40px;
    list-style: none;
    position: relative;
}

.float-right {
    float: right;
}

nav ul li{
    display: inline-block;
    background: #547430;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    line-height: 70px;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 15px;
}

nav ul li a:hover{
    color: white;
    border-radius: 5px;
    background-color: #6d8f4c;
}

nav ul ul li a:hover{
    box-shadow: none;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 3px solid white;
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
}

nav ul ul ul{
    border-top: none;
}

nav ul li:hover > ul{
    top: 70px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
    position: relative;
    margin: 0px;
    width: 150px;
    float: none;
    display: list-item;
    border-bottom: 1px solid #547430;
}

nav ul ul li a{
    line-height: 50px;
}

nav ul ul ul li{
    position: relative;
    top: -60px;
    left: 150px;
}

.show,.icon,input{
    display: none;
}

.fa-user-circle {
    padding-right: 10px;
    font-size: 18px;
}


@media (max-width: 1000px) {

    .menu {
        display: block;
        position: absolute;
        background-color: blue;
        margin-top: 70px;
        text-align: left;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        left: -100%;
    }

    .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 10px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
    }

    nav ul li,nav ul ul li{
        display: block;
        width: 100%;
        margin: 0px;
    }

    nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    nav ul ul a{
        padding-left: 40px;
    }

    .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .show:hover{
        color: white;
    }
    .show   a, nav ul ul{
        display: none;
    }

    [id^=btn]:checked   ul{
        display: block;
    }

    input[type=checkbox]:checked~.menu {
        left: 0%;
    }

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>

<nav class="navbar">
  <div class="logo">Audio Diary</div>
  <ul class="nav-links">
      <label for="btn" class="icon">
          <span class="fa fa-bars"></span>
      </label>
      <input type="checkbox" id="btn">

      <div class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/">Explore</a></li>
        <li><a href="/">Info</a></li>
        <li class="float-right">
            <!--<a href="/login">Login</a>-->
            <label for="btn-1" class="show">Account <i class="fas fa-caret-down"></i></label>
            <a href="#"><i class="fas fa-user-circle"></i>Account</a>
            <input type="checkbox" id="btn-1">
            <ul>
                <li><a href="#">Recordings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </div>
  </ul>
</nav>

</body>
</html>

如您所見，選單不是全高的，而我height: 100%;在.menu媒體查詢中使用。此外，選單沒有使用全寬，因為我可以在右側看到一點空間。如果滑入，如何讓選單使用全屏高度和寬度？

uj5u.com熱心網友回復：

您可以position: relative從nav ul規則集中洗掉（在您的代碼片段中重復）。這將允許您的絕對定位選單絕對定位到視窗而不是該元素。由于當您將.menu高度設為100% 時，該元素具有相對位置，因為它是具有 0 高度的該元素的 100%，因此您的選單也是 0 高度。

我還設定了高度calc(100% - 70px)以考慮上邊距，因此您的選單不會自動垂直溢位螢屏。

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(src/assets/images/background2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color:#464646;
}

nav {
    background-color: #547430;
    height: 70px;
}

.nav:after{
    content: '';
    clear: both;
    display: table;
}

.nav-links a {
    color: #fff;
}

nav .logo{
    float: left;
    color: white;
    font-size: 27px;
    font-weight: 600;
    line-height: 70px;
    padding-left: 60px;
    padding-right: 120px;
}

nav ul{
    margin-right: 40px;
    list-style: none;
}

.menu {
    gap: 1em;
    font-size: 18px;
    z-index: 9;
}

.float-right {
    float: right;
}

nav ul li{
    display: inline-block;
    background: #547430;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    line-height: 70px;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 15px;
}

nav ul li a:hover{
    color: white;
    border-radius: 5px;
    background-color: #6d8f4c;
}

nav ul ul li a:hover{
    box-shadow: none;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 3px solid white;
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
}

nav ul ul ul{
    border-top: none;
}

nav ul li:hover > ul{
    top: 70px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
    position: relative;
    margin: 0px;
    width: 150px;
    float: none;
    display: list-item;
    border-bottom: 1px solid #547430;
}

nav ul ul li a{
    line-height: 50px;
}

nav ul ul ul li{
    position: relative;
    top: -60px;
    left: 150px;
}

.show,.icon,input{
    display: none;
}

.fa-user-circle {
    padding-right: 10px;
    font-size: 18px;
}


@media (max-width: 1000px) {

    .menu {
        display: block;
        position: absolute;
        background-color: blue;
        text-align: left;
        margin-top: 70px;
        height: calc(100% - 70px);
        width: 100%;
        transition: all 0.3s ease;
        left: -100%;
    }

    .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 10px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
    }

    nav ul li,nav ul ul li{
        display: block;
        width: 100%;
        margin: 0px;
    }

    nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    nav ul ul a{
        padding-left: 40px;
    }

    .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .show:hover{
        color: white;
    }
    .show   a, nav ul ul{
        display: none;
    }

    [id^=btn]:checked   ul{
        display: block;
    }

    input[type=checkbox]:checked~.menu {
        left: 0%;
    }

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>

<nav class="navbar">
  <div class="logo">Audio Diary</div>
  <ul class="nav-links">
      <label for="btn" class="icon">
          <span class="fa fa-bars"></span>
      </label>
      <input type="checkbox" id="btn">

      <div class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/">Explore</a></li>
        <li><a href="/">Info</a></li>
        <li class="float-right">
            <!--<a href="/login">Login</a>-->
            <label for="btn-1" class="show">Account <i class="fas fa-caret-down"></i></label>
            <a href="#"><i class="fas fa-user-circle"></i>Account</a>
            <input type="checkbox" id="btn-1">
            <ul>
                <li><a href="#">Recordings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </div>
  </ul>
</nav>

</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322084.html

標籤：html css

上一篇：Ul不適合導航

下一篇：自動滾動到頁面底部不起作用[javascript]