javascript - 响应式顶部导航——使用 div 重新定位链接？

Question

我是 html/css 的新手，我一直在按照本指南创建带有下拉菜单的响应式 header :https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

我想知道如果链接在不同的 div 中分开，一个 div 包含主页链接，另一个 div 包含其余链接加上下拉 div 及其内容。

所以我尝试了这一点，并在小链接消失并且汉堡包菜单图标出现时成功了一半。问题是，当图标变小并单击图标时，链接不会像文章中那样显示在导航或主页链接下方。两个链接仍然显示在“主页”旁边并且无法访问，下拉菜单似乎很好，最后一个链接似乎也很好。我不确定如何正确设计它。

我知道使用框架会容易得多，但由于我是新手，我想也许我应该只使用 html/css/javascript 来尝试这个。

感谢任何帮助或指导，谢谢!

我想在视口(viewport)较小时使用 div 制作的示例: Link to what I want cause I can't post pictures yet

What happens instead

下面是我的代码。我对原始链接所做的更改是将主页链接和其他链接包装到单独的 div 中，而我保留的一些位置是固定的，因为我希望导航栏随着滚动而移动。我还将下拉方法更改为点击，因为我认为手机无法悬停。

如果有帮助，我认为问题出在我为“响应式”类添加样式的 CSS 上。

function responsiveLinks() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
} 


/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function clickDropdown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
} 

body, html {
      height:100%;
}
body {
    background-color: black;
    color:white;
    font-family: Helvetica;
    text-transform:none;
    margin: 0 auto;
    padding-top: 32px;
}    
.topnav {
  position: fixed; /* Set the navbar to fixed position to scroll */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  background-color: #333;
  z-index:1;
}    
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px; 
  float: left;
}    

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float:left;
  position:relative;
}    
/*Style the dropdown button */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  padding: 14px 16px;
  cursor: pointer;
}    
/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}    
/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}    
/* Add a background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}    
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.show {display:block;} /* For use with clickDropdow() */

/* When the screen is less than 600 pixels wide, hide the links div and its contents. Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav .links {
    display: none;  /*Changed to work with the divs, hides the whole links div*/
  }    
  .topnav a.icon {
    background: inherit;
    float:right;
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    padding: 10px;
  }
}
 

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive a.icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive .links{
    background:grey;
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
   }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: in-line;
    width: 100%;
    text-align: left;
  }
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
<link rel="stylesheet" type="text/css" href="./style.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Page</title> 
</head>
<body> 
 <div class="topnav"  id="myTopnav">
  <div id="logo">
    <a href="home.html"><img src="" width="50" height="50" alt="Home"/></a>
   </div> <!-- end logo -->
 <div class="links">
 <a href="#news">News</a>
 <a href="#contact">Contact</a>
  <div class="dropdown">
    <button onclick="clickDropdown()" class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div><!-- end dropdown contents -->
  </div><!-- end dropdown -->
 <a href="#about">About</a>
</div><!-- end links -->
 <a href="javascript:void(0);" class="icon" onclick="responsiveLinks()">&#9776;</a>
</div> <!-- end topnap -->
</body>
</html>

Answer 1

我已将 Logo 放在 Home 的位置。希望这可以帮助。告诉我你还想要什么。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #565656;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active"><img src="" width="50" height="50" alt="Home"/></a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

</body>
</html>