时间戳

首页 > 解决方案 > 垂直汉堡侧导航栏在屏幕右侧创建一个空白区域。仅在手机版中显示

html - 垂直汉堡侧导航栏在屏幕右侧创建一个空白区域。仅在手机版中显示

问题描述

我的网站右上角有一个响应式汉堡侧导航栏。当用户点击时，子菜单垂直出现。在PC端查看是没有问题的，但是在手机端查看时，屏幕右侧有一个空白区域，如下图：

在此处输入图像描述

到处找找答案，比如调整屏幕宽度，把宽度设置为100%，写body和html{overflow-x:hidden;}等等。

经过一番研究，我终于发现空白处是一个垂直的汉堡导航栏。简单来说，如果用户点击汉堡菜单，垂直子菜单是从右向左滑动的。

如果我在 CSS 的 @media 中的 .nav-links 中写入 width: 100% ，则会在右侧创建更多空白空间，因为侧面导航栏会从右向左滑动全屏。

我想知道是否有任何方法可以让我在没有任何间距问题的情况下拥有这个响应式垂直汉堡侧菜单？

这个问题属于 CSS 中的这里：

@media screen and (max-width: 950px) {
   .nav-links {
   position: absolute;
        right: 0px;
        height: 92vh;
        top: 10vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
        padding-right: 2em;
        transition: transform 0.5s ease-in;
        z-index: 99999;
     }

以下是我网站的完整代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="monday.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>J[a]son</title>
</head>
<body>
    <nav>
        <div class = "logo">
            <h4>J[a]son</h4>
        </div>
        <ul class = "nav-links">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">PHOTOGRAPHY</a>
                <ul class="sub-menu">
                    <li><a href="photography_colour.html">Colour</a></li>
                    <li><a href="photography_black.html">Black</a></li>
                </ul>
            </li>
            <li>
                <a href="#">CODING</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
        </ul>
        <div class= "burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="testing.js"></script>
    <div class="main_car_wrapper">
        <img class="main_car" src="Photos/main_car1.jpg" alt="car" width="100%" height="100%"/>

    </div>
           <!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
    <div class ="bottom">
        <div class = "logos">
            <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
            <a href="https://stackoverflow.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
            <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
            <p id = "paragraph">TESTING</p>
        </div>
    </div>
</body>
</html>

CSS

html {
    min-height: 100vh;
}

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

body {
    background-color: black !important; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
}

nav {
    display: flex !important;
    justify-content: space-between;
    /*padding-right: 2em;*/
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 1.5em;
    align-items: center;
    min-height: 8vh;
    background-color: black;
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    font-family: 'Poppins', sans-serif;
}

.logo {
    background-color: black;
    color: rgb(240, 235, 235);
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 11px;
    /*padding: 5px 5px;*/
}

.nav-links a:hover {
    text-decoration: none;
    color: white;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width:1430px) {
    .nav-links {
        width: 40%;
    }
}

@media screen and (max-width:950px) {
    * {
        margin: 0;
        padding: 0;
    }
    
    body, html {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 10vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
        padding-right: 2em;
        transition: transform 0.5s ease-in;
        z-index: 99999;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
        padding-right: 1em;
    }
    .sub-menu {
        position: relative;
    }
    .carousel-control-prev {
        padding-top: 5em;
    }

    .carousel-control-next {
        padding-top: 5em;
    }

    .carousel-item {
        padding-top: 6em;
    }
    
    .logos { 
        padding-bottom: 0em;
    }
}

.nav-active {
    transform: translate(0%);https://ahweb.org.uk/car.png
}

.main_car_wrapper {
    background-image: url(https://ahweb.org.uk/car.png);
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
    max-width: 100%;
    height: auto;
    padding-top: 6em;
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity :1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);

}

.sub-menu {
    display: none;
}

.sub-menu li a {
    /*display: block;*/
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    background: rgb(221, 215, 215);
    white-space: nowrap;
    top: 40px;
    left: 25px;
    padding: 5px;
    padding-top: 1px;
}

.sub-menu li a:hover{
    background: rgb(10, 10, 10);
    opacity: 1;
    transition: all 0.5s ease;   
}

li:hover ul {
    display: flex;
    position: absolute;
}

li:hover li {
    float: none;
    font-size: 8px;
}

li:hover a {
    background: rgb(5, 5, 5);
}

li:hover li a:hover {
    background: rgb(19, 18, 18);
}

.bottom {
    margin-top: auto; 
}

.logos {
    display: flex !important;
    flex-direction: row;
    background-color: black;
}

.logos a {
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
}

.logos a:hover {
    text-decoration: none;
    color: white;
}

.carousel-inner p {
    text-align: center;
    color: black;
    font-size: 14px;
}

.carousel-inner {
    background-color: black;
}

.carousel-inner img {
    display: flex;
    margin: 0 auto;
    width: 50vw;
    max-height: auto;
    align-items: center;
}

/*.carousel-item {
    height: 300px
}*/

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

JS：

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  //Toggle Nav
  burger.addEventListener('click', () => {
    //Toggle Nav
    nav.classList.toggle('nav-active');

    //Animate Links
    navLinks.forEach((link, index) => {
      if(link.style.animation) {
        link.style.animation = ''
      } else {
          link.style.animation = `navLinkFade 0.2s ease forwards ${index / 7 + 0.5}s`;
      }
    });
    //Burger Animation
    burger.classList.toggle('toggle');
  });
  //Animate Links
  
}

navSlide();

标签： htmlcssnavbarspace

解决方案

推荐阅读