javascript - 如何在页面缩小时将社交链接保留在导航栏上，以及如何在汉堡菜单打开时将社交图标放在同一行

Question

我正在尝试创建响应式网页导航栏。我想要左侧的 Logo 、导航链接中心和右侧的社交媒体链接。当页面宽度太小时，它应该隐藏导航链接和社交媒体链接。这有效地正常工作，但是当页面太窄但在达到完整的“移动”宽度之前，社交媒体链接会跳到导航栏下方。此外，当汉堡菜单打开时，我无法将社交链接放在一行中。我不是 Web 开发人员，只是教程观察者，非常感谢任何帮助。

我曾尝试更改 .social 类的类类型，但这似乎只会让事情变得更糟。编辑:我通过添加“溢出:隐藏”解决了溢出问题；在“.navbar ul{”下

const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");

navbarToggler.addEventListener("click", navbarTogglerClick);

function navbarTogglerClick() {
  navbarToggler.classList.toggle("open-navbar-toggler");
  navbarMenu.classList.toggle("open");
}

navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));

function navbarLinkClick() {
  if(navbarMenu.classList.contains("open")) {
    navbarToggler.click();
  }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Righteous', cursive;
    background-color: #fff;
    color: #333;
  }
  .navbar {
    background-color: #000;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    padding: 0 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .navbar a {
    text-decoration: none;
    color: #fff;
  }
  .navbar a.navbar-brand {
    float: left;
    height: inherit;
    line-height: inherit;
    padding: 0 30px;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
  }
  .navbar a.navbar-brand span {
    font-size: 28px;
    font-weight: 700;
  }
  .navbar ul {
    float: center;
    list-style: none;
    height: inherit;
    line-height: inherit;
    padding: 0 50px;
    overflow: hidden;
  }
  /*Social Stuff*/
  .social{
    float: right;
    background-color: coral;
    font-size: 35px;
    display: inline-block;
  }

  /*Social Stuff*/
  .navbar ul li {
    display: inline-block;
  }
  .navbar ul li a {
    display: block;
    text-align: center;
    min-width: 120px;
    padding: 0 30px;
  }
  .navbar ul li a:hover {
    background-color: transparent;
    color:#00e713;
    transition:0.2s all;
    transform:scale(1.2) rotate(10deg);
  }
  .navbar .navbar-toggler {
    display: none;
  }
  .intro {
    width: 100%;
    height: 100vh;
    background: url("https://source.unsplash.com/GYQBryEWh0Y/") no-repeat center center;
    background-size: cover;
    background-color: #000;
  }
  .container {
    position: relative;
    height: 100vh;
    color: #fff;
  }
  .container h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vh;
  }
  #html { background-color: #e34f26; }
  #css { background-color: #002561; }
  #javascript { background-color: #333; }
  
  @media (max-width: 991px) {
    .navbar ul {
      padding: 0 10px;
    }
    .navbar ul li a {
      min-width: 100px;
      padding: 0 20px;
    }
  @media (max-width: 767px) {
    .navbar a.navbar-brand {
      transform: translateX(-50%);
      left: 50%;
      position: absolute;
    }
    .navbar {
      padding: 0;
    }
    .navbar ul {
      width: 100%;
      padding: 0;
      background-color: rgba(0,0,0,0.9);
      /*height: auto; */
      height: 100vh;
      max-height: 0;
      overflow: hidden;
      transition: all ease-in-out 0.3s;
    }
    .navbar ul.open {
      max-height: 100vh;
      /*this next line prevents the navbar overlap on mobile */
      padding-block-start: 9vh;
    }
    /*Social Stuff*/
    .social{
      width: 100%;
      float: left;
      text-align: center;
    }
    .social ul li{
      display: inline;
      float: left;
    }
    /*Social Stuff*/
    .navbar ul li {
      width: 100%;
      /*border-bottom: 1px solid rgba(255,255,255,0.3); */
    }
    .navbar ul li a {
      padding: 0px;
    }
    .navbar .navbar-toggler {
      display: block;
      position: absolute;
      height: 40px;
      top: 20px;
      left: 20px;
      background-color: transparent;
      color: #fff;
      /* border: 3px solid #fff;*/
      border: none; 
      /* border-radius: 4px; */
      outline: none;
      padding: 0 5px;
      cursor: pointer;
    }
    .navbar .navbar-toggler span,
    .navbar .navbar-toggler span::before,
    .navbar .navbar-toggler span::after {
      display: block;
      content: '';
      background-color: #fff;
      height: 3px;
      width: 28px;
      border-radius: 4px;
      transition: all ease-in-out 0.3s;
    }
    .navbar .navbar-toggler span::before {
      transform: translateY(-8px);
    }
    .navbar .navbar-toggler span::after {
      transform: translateY(5px);
    }
    .navbar .navbar-toggler.open-navbar-toggler span {
      /* transform: rotate(90deg); */
      background-color: transparent;
      /* transform: scale(0.85) rotate(270deg); */
    }
    .navbar .navbar-toggler.open-navbar-toggler span::before {
      transform: translateY(0px) rotate(45deg);
      /* transform: translateY(0px) scale(0.75) rotate(45deg); */
    }
    .navbar .navbar-toggler.open-navbar-toggler span::after {
      transform: translateY(-3px) rotate(-45deg);
      /* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive Navbar</title>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar">
            <button class="navbar-toggler">
                <span></span>
            </button>
          <a href="#" class="navbar-brand">
            <span>T</span>e<span>m</span>P</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Python</a></li>
       
        <div class="social">
            
                <li><a href="#"><i class ="fa fa-twitch"></i></a></li>
                <li><a href="#"><i class ="fa fa-reddit"></i></a></li>
                <li><a href="#"><i class ="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class ="fa fa-youtube"></i></a></li>
            
        </div>
        </ul>
    </nav>
    <script src="assets/js/script.js"></script>  
</body>
<p>
</p>
</html>

Answer 1

首先，您应该根据我们可以在这些媒体查询中编写您的样式来决定您想要更改导航布局的断点处的布局。那些你不需要在移动布局上的东西，比如社交链接，你可以简单地显示:无；到社交部分，但仅在移动媒体查询中。