个人中心
gpt4 book ai didi

html - 响应时导航栏标题不正确且位于菜单栏下方

转载 作者：行者123 更新时间：2023-11-28 00:31:08 25 4
gpt4 key购买 nike

所以我创建了我的响应式导航栏，当它在移动设备上时，它并不是我想象的那样。我得到了事件页面“标题”，我想要它做的是，如果我点击到下一页，左上角的标题将会改变。这是我从哪里得到的想法。 https://www.w3schools.com/howto/howto_js_topnav_responsive.asp .

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

enter image description here

当我转到另一个页面时，“事件”标题页不再是绿色。并且标题仍然命名为home。这是 w3schools 不会告诉您何时切换到另一个(点)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 文件，但我想你明白了。

最佳答案

在“移动”模式下，我认为标题不应该是“主页”。我认为它应该是一个按钮，用户可以单击该按钮将他们带到主页。

关于您的第一个问题，我相信您是在问如何突出显示导航栏中的“事件选项卡”。换句话说，如果您在“关于”页面上，您希望突出显示“关于”，而不是“主页”。

一种方法是:

首先，在每个页面的<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;
}

最后，要么删除 .active 的规则集来自你的主 CSS 文件；或删除 class="active"来自您的 index.html 中的链接文件。如果您不这样做，那么“主页”页面将始终突出显示为事件页面，即使它不是事件页面也是如此。

这里有两个 fiddle 来演示这一点。您会注意到 CSS 和 JS 在两者中是相同的。唯一的区别是 HTML，因为它们代表两个不同的页面。

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

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

对于你的第二个问题，我建议在这里创建另一篇文章。一般来说，我们会尽量将一个问题保留在一个帖子中，这样人们将来更容易找到答案。但是为了让您走上正轨，您将需要针对移动屏幕宽度更改媒体查询中的 CSS。

关于html - 响应时导航栏标题不正确且位于菜单栏下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54396946/

25 4 0
文章推荐： javascript - 如何修复此语法错误 : Unexpected identifier?
文章推荐： javascript - 打开 jQuery 对话框时如何保留文本选择
文章推荐： javascript - CodeMirror批量更改
文章推荐： html - CSS 在标题内容后添加下划线
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com