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

问题描述 投票：0回答：2

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

我想知道是否可以在视口很小的情况下重新定位文章中的链接如果链接在不同的div内分隔，一个包含主链接的div和包含其余链接的另一个div加上dropdown div及其内容。

所以我尝试了这一点，并在半途工作时，小链接将消失，汉堡包菜单图标将出现。问题是当小并点击图标时，链接没有显示在导航或主页链接下面，就像在文章中一样。两个链接仍然显示在“Home”旁边并且无法访问，下拉列表似乎很好，最后一个链接也很好。我不确定如何正确地设计这个。

我理解使用框架会容易得多，但因为我是新手，我想也许我应该只用html / css / javascript来试试。

任何帮助或方向表示赞赏，谢谢！

如果可能的话，当视口很小时我想用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>
javascript html css css3
2个回答
0
投票

我把徽标放在了qazxsw poi的位置。希望这可以帮助。告诉我你还想要什么。

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

</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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.