Неверный заголовок панели навигации при отзывчивости и под строкой меню - PullRequest
Новая
       27

Неверный заголовок панели навигации при отзывчивости и под строкой меню

0 голосов
/ 28 января 2019

Итак, я создал свою Отзывчивую панель навигации , и когда она в мобильном телефоне, я не совсем так ее представляю.Я получил активную страницу "title", и я хочу, чтобы, если я нажму на следующую страницу, заголовок в верхнем левом углу изменится.Вот откуда у меня появилась идея.https://www.w3schools.com/howto/howto_js_topnav_responsive.asp.

Теперь вот как выглядят мои страницы.

enter image description here

Когда я перехожу на другую страницу, это не такзеленый больше «активной» титульной страницы.И название до сих пор называется домом.Это еще одна проблема, о которой 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-файлов, но я думаю, что вы поняли идею.

1 Ответ

0 голосов
/ 28 января 2019

В «мобильном» режиме я не думаю, что это должен быть заголовок с надписью «Домой».Я думаю, что это должна быть кнопка, которую пользователь может нажать, чтобы перенести их на домашнюю страницу.

Что касается вашего первого вопроса, я полагаю, вы спрашиваете, как вы можете выделить «активную вкладку» в панели навигации.Другими словами, если вы находитесь на странице «О программе», вы хотите, чтобы «О программе» было выделено, а не «Главная».

Один из способов сделать это:

Сначала , на теге <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.Если вы этого не сделаете, то страница «Домой» всегда будет выделена как активная, даже если это не так.

Вот две скрипты, чтобы продемонстрировать это.Вы заметите, что CSS и JS одинаковы в обоих случаях.Единственным отличием является HTML, поскольку они представляют две разные страницы.

Ваша домашняя страница: https://jsfiddle.net/7ynbfax4/1/

Ваша страница About: https://jsfiddle.net/7ynbfax4/2/

Для вашего второговопрос, я бы предложил создать еще один пост здесь.Обычно мы стараемся сохранить один вопрос в сообщении, чтобы людям было легче найти ответы в будущем.Но чтобы вы пошли по правильному пути, вам нужно изменить CSS в вашем медиа-запросе для ширины экрана мобильного телефона.

...