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

时间：2019-02-13 04:08:37

标签： javascript html css css3

我是html / css的新手，我一直在遵循本指南来创建带有下拉菜单的响应式标头：https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

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

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

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

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

如果视口较小，我想使用div制作的示例： Link to what I want cause I can't post pictures yet

What happens instead

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

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

fname.split(Pattern.quote(File.separator));

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;
  }
}

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：-2)

请尝试以下代码： 

<!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>
相关问题
最新问题