响应时且在菜单栏下方的导航栏标题不正确

时间：2019-01-28 06:59:23

标签： html css drop-down-menu responsive-design flexbox

因此，我创建了我的自适应导航栏，当它在移动设备中时，它与我的想象并不完全相同。我得到了活动页面的“标题”，而我想要的是，如果我单击下一页，则左上角的标题将发生变化。这是我的主意。 https://www.w3schools.com/howto/howto_js_topnav_responsive.asp。

现在这是我的页面现在的样子。

enter image description here

当我转到另一页时，“活动”标题页不再是绿色。而且标题仍然命名为home。这是w3schools不会告诉您何时切换到另一个（dot）html页面的另一个问题。

enter image description here

我还希望“主页”选项卡位于汉堡图标栏的下方，以使其外观整洁。例如这样。

enter image description here

这是我的代码，看看您可以如何解决我的问题。

index.html 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
.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;
}

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

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

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

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

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="topnav" id="myTopnav">
    <a href="index.html" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

  <div class="summary">
    <div class="profilePicture">
      <img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>

</body>

</html>

about.html 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
.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;
}

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

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

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

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

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}


/* Nav Styling Ends Here */

.skillResponsive {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

.container {
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
}

.html {
  width: 60%;
  background-color: #00e64d;
}

.css {
  width: 60%;
  background-color: #4da6ff;
}

.sql {
  width: 10%;
  background-color: #cc66ff;
}

.pc {
  width: 75%;
  background-color: #ff5050;
}

.trouble {
  width: 75%;
  background-color: #ff8533;
  margin-bottom: 45px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <div class="topnav" id="myTopnav">
    <a href="index.html">Home</a>
    <a href="about.html" class="active">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>


  <h1 style="text-align: center;">
    About me
  </h1>

  <div class="desc">
    <p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
      I am currently attending Pikes Peak Community College towards my Associate of Applied Science Degree in Computer Information Systems.
    </p>
  </div>

  <h2 align="center">My Programming Skills</h2>

  <div class="skillResponsive">
    <!--Div for Skill Bar-->

    <p>HTML</p>
    <div class="container">
      <div class="skills html">60%</div>
    </div>

    <p>CSS</p>
    <div class="container">
      <div class="skills css">60%</div>
    </div>

    <p>SQL (Currently taking "Intro to SQL" at college this semester for a Database certificate)</p>
    <div class="container">
      <div class="skills sql">10%</div>
    </div>

    <h2 align="center">Computer Skills</h2>

    <p>Build Computer</p>
    <div class="container">
      <div class="skills pc">75%</div>
    </div>
    <p>
      The other 25% would have to be cable management, watercooling, and trying to figure which hardware is recommended to be place first to make cable management a priority to give it a good airflow. See the Portfolio page for a picture of my first gaming
      PC.
    </p>

    <p>Software Troubleshooting</p>
    <div class="container">
      <div class="skills trouble">90%</div>
    </div>

  </div>

  <h2 style="text-align: center; background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; margin-left: 100px; margin-right: 100px;">
    My College Degree Progress
  </h2>

</body>

</html>

我可以发布更多（点）html文件，但我想您知道。

1 个答案:

答案 0 :(得分：0)

在“移动”模式下，我不认为这应该是标题为“ Home”的标题。我认为这应该是用户可以单击以将其带到主页的按钮。

关于您的第一个问题，我相信您是在问如何在导航栏中突出显示“活动标签”。换句话说，如果您在“关于”页面上，则要突出显示“关于”，而不是“主页”。

一种方法是：

第一，在每个页面的<body>标记上，添加一个id。例如，在index.html上，您可以拥有<body id="home">。对于about.html，您可以拥有<body id="about">。对您的每个页面执行此操作。确保id的值是唯一的。

第二，在每个导航栏链接上，也给它们一个id。例如，您的导航栏标记可能会更改为如下所示：

<div class="topnav" id="myTopnav">
    <a href="index.html" id="nav_home" class="active">Home</a>
    <a href="about.html" id="nav_about">About Me</a>
    <a href="portfolio.html" id="nav_portfolio">Portfolio</a>
    <a href="contact.html" id="nav_contact">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

同样，这需要在您的每个页面上完成。

第三，将所有这些元素的样式规则添加到主CSS文件中。这仅需要完成一次，因为您的其他页面引用了相同的CSS文件。规则集可能看起来像这样：

#home #nav_home,
#about #nav_about,
#portfolio #nav_portfolio,
#contact #nav_contact {
    background-color: #4CAF50;
    color: white;
}

最后，或者从您的主CSS文件中删除.active的规则集；或从class="active"文件中的链接中删除index.html。如果您不这样做，那么“主页”页面将始终突出显示为活动状态，即使它不是活动状态。

这里有两个小提琴来证明这一点。您会发现CSS和JS两者相同。唯一的区别是HTML，因为它们代表了两个不同的页面。

您的主页：https://jsfiddle.net/7ynbfax4/1/

关于您的页面：https://jsfiddle.net/7ynbfax4/2/

对于您的第二个问题，建议您在此处创建另一个帖子。通常，我们尝试将一个问题保留在一个帖子中，这样以后人们就可以更轻松地找到答案。但是为了使您走上正确的道路，您将需要在媒体查询中更改CSS以获取移动屏幕的宽度。

相关问题
最新问题