响应式菜单栏下方导航栏标题不正确 [英] Nav Bar Incorrect Title when responsive and underneath menu bar

问题描述

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

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

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

这是我的代码，然后查看可以解决此问题的方法。

index.html

  function myFunction（）{var x = document.getElementById（ myTopnav）;如果（x.className === topnav）{x.className + =响应式； } else {x.className = topnav; }}  

  .topnav { background-color：＃333;}。topnav a {float：left;显示：块；颜色：＃f2f2f2;文本对齐：居中；填充：14px 16px;文字修饰：无； font-size：17px;}。topnav a：hover {background-color：#ddd;颜色：黑色；}。active {背景颜色：＃4CAF50;颜色：白色；}。topnav .icon {显示：无；} @ media屏幕和（最大宽度：600像素）{.topnav a：not（：first-child）{显示：无； } .topnav a.icon {float：right;显示：块； }} @ media屏幕和（最大宽度：600像素）{.topnav.response {位置：相对； } .topnav.response a.icon {位置：绝对；正确：0；最高：0; } .topnav.response {{float：none;显示：块；文本对齐：居中； }}。summary {min-height：75vh;最大宽度：2000px；显示：flex; align-items：居中; justify-content：center;}。profilePicture {padding：2rem;}。profileSummary {max-width：400px;} @ media屏幕和（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>首页< / 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>关于我< / 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 =宽度：170px；高度：170px；边框半径：50％；> ; < / div> < div class = profileSummary>细心a，是因为贵族雇用的布鲁斯狐狸肆无忌far地攀爬了很多可卡亚伯拉，因此脆弱的扇贝无辜地表现出了善良的猫鼬般的坚硬表现。 < / div> < / div>< / body>< / html>  

about.html

  function myFunction（ ）{var x = document.getElementById（ myTopnav）;如果（x.className === topnav）{x.className + =响应式； } else {x.className = topnav; }}  

  .topnav { background-color：＃333;}。topnav a {float：left;显示：块；颜色：＃f2f2f2;文本对齐：居中；填充：14px 16px;文字修饰：无； font-size：17px;}。topnav a：hover {background-color：#ddd;颜色：黑色；}。active {背景颜色：＃4CAF50;颜色：白色；}。topnav .icon {显示：无；} @ media屏幕和（最大宽度：600像素）{.topnav a：not（：first-child）{显示：无； } .topnav a.icon {float：right;显示：块； }} @ media屏幕和（最大宽度：600像素）{.topnav.response {位置：相对； } .topnav.response a.icon {位置：绝对；正确：0；最高：0; } .topnav.response {{float：none;显示：块；文本对齐：居中； }}。summary {min-height：75vh;最大宽度：2000px；显示：flex; align-items：居中; justify-content：center;}。profilePicture {padding：2rem;}。profileSummary {max-width：400px;} @ media屏幕和（max-width：800px）{.summary {flex-direction：column; }} / *导航样式到此为止* /。skillResponsive {max-width：1000px;保证金：0自动; padding：0 15px；}。container {background-color：#ddd;}。skills {text-align：right;填充：10px;颜色：白色；}。html {宽度：60％；背景颜色：＃00e64d;}。css {宽度：60％; background-color：＃4da6ff;}。sql {宽度：10％;背景颜色：＃cc66ff;}。pc {宽度：75％;背景颜色：＃ff5050;}。麻烦{宽度：75％；背景颜色：＃ff8533; margin-bottom：45px;}  

 <！DOCTYPE html> ;< html>< head> < meta charset = utf-8> < meta name = viewport content = width = device-width，initial-scale = 1.0> < title>首页< / 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>主页< / a> < a href = about.html class = active>关于我< / 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;>关于我< / h1> < div class = desc> < p style = background-color：lightblue; border：2px solid lightgreen; border-radius：10px; text-align：center; font-size：22px;>我目前正在我的计算机信息系统应用科学学位的学生就读于派克峰社区学院。 < / p> < / div> < h2 align = center>我的编程技巧< / 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（目前在本学期在大学学习 SQL入门以获取数据库证书）。 < div class = container> < div class = skills sql> 10％< / div> < / div> < h2 align = center>计算机技能< / h2> < p>构建计算机< / p> < div class = container> < div class = skills pc> 75％< / div> < / div> < p>另外25％必须是电缆管理，水冷，并试图确定建议首先安装哪种硬件，以使电缆管理成为优先考虑的因素，以使其通风良好。有关我的第一台游戏PC的图片，请参见投资组合页面。 < / p> < p>软件故障排除< / p> < div class = container> < div class = skills麻烦> 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;>我的大学学位进度< / h2>< / body>< / html>  

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

解决方案

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

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

一种方法是：

第一，在每个页面的< 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>关于我< / 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; 
颜色：白色； 
} 
  

最后，删除<$的规则集主要CSS文件中的c $ c> .active ；或从 index.html 文件中的链接中删除 class = active 。如果您不这样做，那么即使未激活，主页页面也始终会突出显示为活动状态。

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

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

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

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

So I created my Responsive Nav Bar and when it is in mobile, it is not exactly how I picture it. I got the active page "title" and what I want it to do is if I click on to the next page, the top left title will change. Here is where I got the idea from. https://www.w3schools.com/howto/howto_js_topnav_responsive.asp.

Now here is what my pages look like now.

When I go to another page, it is not green anymore the "active" title page. And the title is still named home. That's another issue that w3schools does not tell you about when you switch to another (dot)html page.

Also I want the Home Tab to bring underneath the hamburger icon bar to give it a clean look. Like this for example.

Here is my codes and see what you can do to fix my issue.

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>

I could post more (dot)html files but I think you get the idea.

解决方案

In "mobile" mode, I don't think that's supposed to be a title that says "Home". I think it's supposed to be a button that the user can click to take them to the homepage.

As for your first question, I believe you're asking how can you highlight the "active tab" in the navbar. In other words, if you're on the "About" page, you want "About" to be highlighted, and not "Home".

One way to do this would be:

First, on each page's <body> tag, add an id. For example, on index.html, you could have <body id="home">. For about.html, you could have <body id="about">. Do this for each of your pages. Make sure the id values are unique.

Second, on each of the navbar links, give them an id as well. For example, your navbar markup might be changed to look something like this:

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

Again, this needs to be done on each of your pages.

Third, add the style rule for all of these elements to your main CSS file. This only needs done once since your other pages reference the same CSS file. The ruleset might look something like this:

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

Finally, either remove the ruleset for .active from your main CSS file; or remove the class="active" from the link in your index.html file. If you don't, then the "Home" page will always be highlighted as active, even when it's not.

Here are two fiddles to demonstrate this. You'll notice the CSS and JS is the same in both. The only difference is the HTML, since they represent the two different pages.

Your Home Page: https://jsfiddle.net/7ynbfax4/1/

Your About Page: https://jsfiddle.net/7ynbfax4/2/

For your second question, I'd suggest creating another post on here. Generally we try to keep one question to a post, just so it's easier for people to find answers in the future. But to get you on the right track, you're going to need to change the CSS in your media query for the mobile screen widths.

这篇关于响应式菜单栏下方导航栏标题不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！