Конфликт выпадающего меню - PullRequest
Новая
       10

Конфликт выпадающего меню

0 голосов
/ 18 февраля 2019

Я студент в процессе кодирования веб-сайта для школьного проекта.Мой уровень очень новичок (кодирование для меня чрезвычайно сложно), поэтому я извиняюсь, если мой вопрос очень любительский.Я создаю сайт, который будет отображать коллекцию открыток.Я пытаюсь заставить работать мое раскрывающееся меню, однако на некоторых страницах оно работает, а на других - нет (в основном это страницы с каруселью).Я опубликую свой код (HTML + CSS ниже), но мой макет представляет собой контейнер body, а затем верхний и нижний контейнеры.Карусель (в нижнем контейнере) - это место, куда будут отправляться фотографии из моей коллекции открыток, а выпадающее меню находится в верхнем контейнере.Раскрывающееся меню не работает должным образом, и стиль не полностью соответствует (текст «МЕНЮ» не будет отображаться в нужной мне гарнитуре).Карусель работает отлично, хотя на той же странице.

  HTML

    <!--Developed by Matthew Nielsen-->

<!DOCTYPE html>

<title>Carousel Collection</title>

<html>

<head>

  <meta name="Mattew Nielsen" content="Collection Interface">
  <link rel="stylesheet" type="text/css" href="../css/carouselStyle.css">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Neuton|Raleway" rel="stylesheet">


</head>

<body>

  <div class="bodyContainer">


    <div class="topcontainer">
      <div class="dropdown">
        <button class="dropbtn">MENU</button>
        <div class="dropdown-content">
          <a href="/index.html">Home</a>
          <a href="/pages/continents.html">Continents</a>
          <a href="#">About</a>
        </div>
      </div>

      <div class="bottomContainer">
        <div class="carousel">
          <div class="carousel-inner">
            <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
            <div class="carousel-item">
              <img src="/images/AS1.jpg">
            </div>
            <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
            <div class="carousel-item">
              <img src="/images/AS2.jpg">
            </div>
            <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
            <div class="carousel-item">
              <img src="/images/AS3.jpg">
            </div>
            <label for="carousel-3" class="carousel-control prev control-1">‹</label>
            <label for="carousel-2" class="carousel-control next control-1">›</label>
            <label for="carousel-1" class="carousel-control prev control-2">‹</label>
            <label for="carousel-3" class="carousel-control next control-2">›</label>
            <label for="carousel-2" class="carousel-control prev control-3">‹</label>
            <label for="carousel-1" class="carousel-control next control-3">›</label>
            <ol class="carousel-indicators">
              <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
              </li>
              <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
              </li>
              <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>


CSS

/* carouselStyle.css */

/*Developed by Matthew Nielsen*/

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.bodyContainer {
  height: 100%;
  width: 100%;
  background-image: url(/images/message.JPG);
  opacity: .5;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

/* Top Container + Nav Bar */

.topContainer {
  height: 50%;
  width: 100%
}

.navbar {
  overflow: hidden;
  background-color: gray;
}

.navbar a {
  float: left;
  font-family: Raleway;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Bottom Container + Carousel */

.bottomContainer {
  height: 50%;
  width: 100%
}

.carousel {
  position: relative;
  align-content: center;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
  margin-top: 26px;
}

.carousel-inner {
  position: relative;
  align-content: center;
  overflow: hidden;
  width: 100%;
}

.carousel-open:checked+.carousel-item {
  position: static;
  align-content: center;
  opacity: 100;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  align-content: center;
  height: auto;
  max-width: 100%;
}

.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}

.carousel-control.prev {
  left: 2%;
}

.carousel-control.next {
  right: 2%;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
  display: block;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}

.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.carousel-bullet:hover {
  color: #aaaaaa;
}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

/*
#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
} */

Мне любопытно, может ли кто-нибудь, кто просматривает это, увидеть какие-либо явные проблемы или есть рекомендации, как это исправить?

Спасибо

1 Ответ

0 голосов
/ 18 февраля 2019

Ваша выпадающая навигация действительно работает отлично!Если вы прокомментируете .bottomcontainer, вы увидите, что он работает правильно при наведении, и все ссылки кажутся кликабельными.

Проблема в том, что вы позиционируете карусель: 

.carousel {
  position: relative; /* remove this */
  align-content: center;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
  margin-top: 26px;
}

Прямо сейчас, с position: relative; ваша карусель покрывает сайт.Технически вы не можете парить над навигацией за ним, даже если видите это.Нет необходимости использовать relative в предоставленном вами фрагменте.Удалите эту строку кода, и вы увидите, что форматирование не меняется, панель навигации работает правильно, а ваша карусель по-прежнему работает.

Некоторую дополнительную информацию о position: ; можно найти по адресу CSSТрюки .

Еще одно предложение из моих собственных руководств по проектированию. Я рекомендую разделить элементы div для верхнего и нижнего контейнера следующим образом: 

<div class="bodyContainer">
  <div class="topcontainer">
    /* nav stuff */
  </div>
  <div class="bottomContainer">
    /* carousel stuff */
  </div>
</div>

Это очиститУнаследованный стиль, нижний контейнер может случайно украсть из вашей навигационной панели, а менее задействованные элементы помогут вам устранить те проблемы стиля, которые у вас были.Это также поможет вам визуализировать ваш сайт с двумя отдельными элементами, работающими рядом друг с другом.

Наконец, вы захотите закрыть все черты стиля точкой с запятой (;) в подобных местах.Я заметил некоторые из них в вашем коде.Он компилируется нормально, но при попытке добавить другую строку это может привести к путанице. 

.topContainer {
  height: 50%;
  width: 100%     /* <--- here */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...