如何让我的侧边菜单在平板电脑屏幕上停留在右侧？

问题描述 投票：0回答：1

出于某些原因，我的导航栏菜单不想停留在768+屏幕尺寸的屏幕右侧。它位于徽标的中心或左侧。我正在以移动设备优先的思维方式开发网站，但较大的版本并不想发挥出色。

我需要更改什么？

const hamburgerMenu = document.getElementsByClassName('toggleButton')[0];
const navbarLinks = document.getElementsByClassName('navLinks')[0];

hamburgerMenu.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
});
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* Mobile  ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */
@media (min-width: 200px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #333;
        color: #FFF;
        font-family: 'Comfortaa', sans-serif;
        flex-direction: column;
        align-items: flex-start;
    }

    .brandLogo {
        font-size: 1.5rem;
        margin: 1.25rem;
    }

    .navLinks {
        display: none;
        width: 100%;
    }

    .navLinks ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .navLinks li {
        list-style: none;
        text-align: center;
    }

    .navLinks.active {
        display: flex;
    }

    .navLinks li a {
        text-decoration: none;
        color: #FFF;
        padding: 1rem;
        display: block;
    }

    .navLinks li:hover {
        background-color: #555;
    }

    .toggleButton {
        position: absolute;
        top: 1.25rem;
        right: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
    }

    .toggleButton .bar {
        height: 3px;
        width: 100%;
        background-color: #FFF;
        border-radius: 10px;
    }






}

/* Tablet  ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .navbar,
    .navLinks {
        flex-direction: row;
    }

    .brandLogo {
        margin: 2rem;
    }

    .navLinks {
        display: block;
    }

    /* .navLinks ul {
        flex-direction: row;
        margin: 1.5rem 0;
    } */

    .toggleButton {
        display: none;
    }



}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>title</title>
        <meta name="description">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/stylesheet.css">
        <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <header>
            <nav class="navbar">
                <div class="brandLogo">Logo</div>
                <a href="#" class="toggleButton">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="navLinks">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        
        <script src="javascript/scripts.js" async defer></script>
    </body>
</html>
javascript html css navbar
1个回答
0
投票

只需在CSS代码下面添加即可。

@media (max-width: 990px) {
    .navbar{align-items: center;}
    .toggleButton{right:auto;left:2rem;}
}

希望对您有帮助。

const hamburgerMenu = document.getElementsByClassName('toggleButton')[0];
const navbarLinks = document.getElementsByClassName('navLinks')[0];

hamburgerMenu.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});
  * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}


/* Mobile  ---------------------------------------------------------- */


/* ------------------------------------------------------------------ */

@media (min-width: 200px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #333;
    color: #FFF;
    font-family: 'Comfortaa', sans-serif;
    flex-direction: column;
    align-items: flex-start;
  }
  .brandLogo {
    font-size: 1.5rem;
    margin: 1.25rem;
  }
  .navLinks {
    display: none;
    width: 100%;
  }
  .navLinks ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .navLinks li {
    list-style: none;
    text-align: center;
  }
  .navLinks.active {
    display: flex;
  }
  .navLinks li a {
    text-decoration: none;
    color: #FFF;
    padding: 1rem;
    display: block;
  }
  .navLinks li:hover {
    background-color: #555;
  }
  .toggleButton {
    position: absolute;
    top: 1.25rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
  }
  .toggleButton .bar {
    height: 3px;
    width: 100%;
    background-color: #FFF;
    border-radius: 10px;
  }
}


/* Tablet  ---------------------------------------------------------- */


/* ------------------------------------------------------------------ */

@media (max-width: 990px) {
  .navbar {
    align-items: center;
  }
  .toggleButton {
    right: auto;
    left: 2rem;
  }
}

@media (min-width: 990px) {
  .navbar,
  .navLinks {
    flex-direction: row;
  }
  .brandLogo {
    margin: 2rem;
  }
  .navLinks {
    display: block;
  }
  /* .navLinks ul {
        flex-direction: row;
        margin: 1.5rem 0;
    } */
  .toggleButton {
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav class="navbar">
    <a href="#" class="toggleButton">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="brandLogo">Logo</div>

    <div class="navLinks">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.