响应式顶部导航–使用div重新定位链接？_JavaScript

我是html / css的新手，我一直在遵循此指南来创建带有下拉菜单的响应式标题： :

我想知道是否有可能在视口较小的情况下像文章中的文章一样重新放置链接，如果链接在不同的div中分开，一个div包含home链接，另一个div包含其余链接以及下拉div及其内容。

因此，我尝试了一下，并使其中途工作，即当小的链接消失并且汉堡菜单图标出现时。 问题是，当变小并单击图标时，链接未显示在导航或主页链接的下方，就像文章中的一样。 两个链接仍显示在“主页”旁边，并且无法访问，下拉菜单似乎正常，最后一个链接也不错。 我不确定如何正确设置样式。

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

任何帮助或指导表示赞赏，谢谢！

如果可能的在视口较小时使用div的示例：

下面是我的代码。 我对原始链接所做的更改将主链接和其他链接包装到单独的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>

我已将徽标替换为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>

请尝试以下代码：

<!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>
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;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">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>    
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

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

问题描述

1楼

2楼