javascript - 如何将我的汉堡菜单转换为水平菜单？

Question

我基本上是在为我的学校作业制作移动优先设计的响应式网页。我制作了汉堡菜单，但无法将其转换为普通水平菜单。我也有一个 1280px 的媒体查询，但不完全确定要在我的媒体查询中放入什么，因为我尝试了导航元素的内联 block ，但它没有用。

这是我的代码:

$(".cross").hide();
$(".navholding").hide();
$(".hamburger").click(function() {
  $(".navholding").slideToggle("slow", function() {
    $(".hamburger").hide();
    $(".cross").show();
  });
});

$(".cross").click(function() {
  $(".cross").hide();
  $(".navholding").slideToggle("slow", function() {
    $(".hamburger").show();
  });
});

.hamburger {
  transform: translateY(-80px);
  height: 65px;
  width: 65px;
  background-color: #b56969;
  margin-left: 20px;
  background: url(images/Hamburger.png);
  background-size: 100%;
  display: inline-block;
  cursor: pointer;
}

.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 0;
  padding: 7px 15px 0px 15px;
  color: #f1f1f1;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 101;
}

nav {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
}

nav ul,
nav:active ul {
  display: none;
  position: absolute;
  background: black;
  height: 100%;
  top: 65px;
  width: 100%;
  z-index: 100;
}

nav li {
  text-align: center;
  width: 100%;
  padding: 15px 0;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: hidden;
  width: 20%;
  background-color: black;
  transform: translateY(-75px);
}

li a {
  padding: 10px;
  border-radius: 5px;
  font-size: 20pt;
  color: #b56969;
  text-align: center;
  text-decoration: none;
  background-color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="hamburger"></div>
  <div class="cross">&#10006;</div>
  <ul class="navholding">
    <li><a href="#">Home</a></li>
    <li><a href="#"> About Me </a></li>
    <li><a href="#"> Services </a></li>
    <li><a href="#"> Hobbies </a></li>
    <li><a href="#"> Work </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</nav>

Answer 1

即使已经有一个公认的答案，我也会在这里发布这个，因为(在我看来)这是这样做的干净方式。

如果有人需要任何关于某些东西如何或为什么起作用的解释，请发表评论，我会添加到这篇文章中。

function burgerSwitch(nav) {
    if (nav.className == "open") {
        nav.className = "close";
    } else {
        nav.className = "open";
    }
}

   nav ul {
  padding: 0;
  margin: 0;
}
nav ul li{
  float:left; /*instead of 'display:inline-block;' to make hamburger easier*/
  width: calc( (100vw - 40px ) / 6);/*6 = number of navitems you have*/
  list-style-type: none;
  
}
nav ul li a {
  background-color: #2fa35f;
  display:block;
  color: white;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  border: 2px solid green;
  width:100%; //expand to entire li
}

nav ul li a:hover {
  background-color: #3bcc77;
}

@media (max-width: 1000px) {
  
  burgerButton {
    display: block; 
    width: 50px;
    height: 50px;
    background-color: #d84b3e;
    color: white;
    cursor: pointer;
    margin-bottom:5px;
  }
  burgerButton:hover{
    background-color:#b74137;
  }
  burgerButton:after{
    position: absolute;
    left: 20px;
    top: 3px;
    font-family: Arial Black;
    font-size: 40px;
  }
  nav.open burgerButton:after {
    content: '\00d7';
  }

  nav.close burgerButton:after {
    content: '\2261';
  }
  nav.close ul { 
    display: none; /*if nav has tag 'close', don't display list*/
  }
  nav ul li { 
    width: calc(100vw - 40px);
  }
}

<nav class="close" id="nav">
    <burgerButton class="open" onclick="burgerSwitch(this.parentNode);">
    </burgerButton>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#"> About Me </a></li>
        <li><a href="#"> Services </a></li>
        <li><a href="#"> Hobbies </a></li>
        <li><a href="#"> work </a></li>
        <li><a href="#"> contact </a></li>
    </ul>
</nav>