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

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

转载作者：行者123 更新时间：2023-11-28 00:31:08

25

4

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

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

当我转到另一个页面时，“事件”标题页不再是绿色。并且标题仍然命名为home。这是 w3schools 不会告诉您何时切换到另一个(点)html 页面的另一个问题。

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

这是我的代码，看看你能做些什么来解决我的问题。

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 在标题内容后添加下划线

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

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