下拉菜单冲突

时间：2019-02-18 03:15:54

标签： html css function drop-down-menu carousel

我是一名学生，正在为学校项目的网站编码。我的水平非常新手（对我而言编码非常困难），所以如果我的问题很业余，我深表歉意。我正在创建一个显示明信片集合的网站。我正在尝试使下拉菜单正常工作，但是在某些页面上它似乎可以运行，而在其他页面上却不起作用（主要是上面有转盘的页面）。我将发布代码（下面的HTML + CSS），但我的布局是正文容器，然后是顶部和底部容器。转盘（在底部的容器中）是我收集明信片的照片所在的地方，而下拉菜单位于顶部的容器中。下拉菜单无法正常运行，样式也不完全正确（“ MENU”文本不会显示在我需要的字体中）。尽管在同一页面上，该轮播效果很好。 

  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 :(得分：0)

您的下拉式导航实际上效果很好！如果您注释掉.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 Tricks。

根据我自己的设计指南的进一步建议，我建议您将div分隔为顶部和底部容器，如下所示：

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

它将清除继承的样式，底部容器可能会意外从导航栏窃取该样式，较少涉及的元素将帮助您解决所遇到的样式问题。它还可以通过两个相互独立的元素来帮助您可视化站点。

最后，您需要在这样的地方用分号（;）封闭所有样式特征。在整个代码中，我注意到了其中一些。编译正常，但是当您尝试添加另一行时会引起混乱。

.topContainer {
  height: 50%;
  width: 100%     /* <--- here */
}
相关问题
最新问题