W3 Отзывчивый Navbar не будет работать для моего приложения - PullRequest
Новая
       18

W3 Отзывчивый Navbar не будет работать для моего приложения

0 голосов
/ 26 марта 2019

По какой-то причине стартовый код от W3 для настройки адаптивной навигационной панели не работает для моего сайта. Я пытаюсь следовать https://www.w3schools.com/howto/howto_js_topnav_responsive.asp. Моя навигационная панель немного отличается от их. У меня есть теги nav, ul и li. Я думаю, это как-то связано с тем, как я ориентируюсь в DOM, но я просто не могу этого понять. Любая помощь будет оценена.

Я уже пытался изменить медиазапросы на .topnav ul li a вместо просто .topnav a, но это тоже не работает. 

        <div id="header">
            <div id="logo">
                <img id="logo" src="your-choice-logo.jpg">
            </div>
            <nav class="topnav" id="myTopNav">    
                <ul>
                    <li><a class="active" href="#welcome-section">Home</a></li>
                    <li><a href="#scheduling">Make Appointment</a></li>
                    <li><a href="#contact-us">Contact Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#reviews">Reviews</li></a></li> 
                    <li><a href="#areas-served">Areas Served</a></li>
                    <li><a href="#facebook">Facebook</a></li>
                    <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
                        <i class="fa fa-bars"></i></li>
                    </a>
                </ul>
            </nav>
        </div>


/* When the screen is less than 600 pixels wide, hide all links, 
except for the first one ("Home"). Show the link that contains 
should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav ul li a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  /* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look 
good on small screens (display the links vertically instead of 
horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive ul li a {
      float: none;
      display: block;
      text-align: left;
    }
  }

  /* Hide the link that should open and close the topnav on small 
screens */
.topnav .icon {
    display: none;
}

/* Toggle between adding and removing the "responsive" class to 
topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

1 Ответ

0 голосов
/ 26 марта 2019

У вас есть несколько вопросов здесь.

  • У вас проблемы с HTML-тегами (некоторые из них закрываются до закрытия вложенного тега).

  • Для некоторых стилей следует использовать li (отображение / положение / плавающее), в то время как для некоторых a (визуальное моделирование), поскольку li располагаются рядом друг с другом, а a внутри из li и технически не может быть, например, :not(:first-child).

  • Используя ul для таких списков, вы должны сбросить его стиль с помощью style-list: none; margin: 0; padding: 0.

  • У вас разные идентификаторы в JS и HTML (значения атрибутов в HTML и почти все в JS чувствительны к регистру).

Проверьте фиксированную версию ниже. 

/* Toggle between adding and removing the "responsive" class to 
topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopNav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
/* When the screen is less than 600 pixels wide, hide all links, 
except for the first one ("Home"). Show the link that contains 
should open and close the topnav (.icon) */

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


/* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look 
good on small screens (display the links vertically instead of 
horizontally) */

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


/* Hide the link that should open and close the topnav on small 
screens */

.topnav .icon {
  display: none;
}


/* BASIC STYLES */


/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav li {
  float: left;
}

.topnav li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

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


/* Add an active class to highlight the current page */

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


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}
<div id="header">
  <div id="logo">
    <img id="logo" src="your-choice-logo.jpg">
  </div>
  <nav class="topnav" id="myTopNav">
    <ul>
      <li><a class="active" href="#welcome-section">Home</a></li>
      <li><a href="#scheduling">Make Appointment</a></li>
      <li><a href="#contact-us">Contact Us</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#reviews">Reviews</a></li>
      <li><a href="#areas-served">Areas Served</a></li>
      <li><a href="#facebook">Facebook</a></li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">
          <i class="fa fa-bars">=</i></a>
      </li>
    </ul>
  </nav>
</div>

Кстати, w3schools не имеет ничего общего с консорциумом W3. Вы не должны рассматривать w3schools как авторитетный ресурс. Однако он содержит несколько простых и удобных руководств.

...