文章/答案/技术大牛

发布

问下拉菜单冲突
EN

Stack Overflow用户

提问于 2019-02-18 11:15:54

回答 1查看 248关注 0票数 0

我是一个正在为学校项目编写网站代码的学生。我的水平是非常初级的(编码对我来说非常困难)，所以如果我的问题非常业余的话，我很抱歉。我正在创建一个将显示明信片集合的网站。我试图让我的下拉菜单工作，但是在一些页面上它似乎可以工作，而在其他页面上它不能工作(主要是那些有旋转木马的页面)。我将发布我的代码(下面的HTML+ CSS )，但我的布局是一个正文容器，然后是顶部和底部容器。旋转木马(在底部的容器中)是我的明信片收藏的照片放置的地方，而下拉菜单在顶部的容器中。下拉菜单不能正常工作，样式也不完全正确(“菜单”文本不会以我需要的字体显示)。尽管在相同的页面上，旋转木马工作得非常好。

  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);
} */

我很好奇，是否有人认为这可能会看到任何明显的问题或有建议如何解决这个问题？

谢谢

drop-down-menu

carousel

html

css

function

回答 1

Stack Overflow用户

发布于 2019-02-18 12:37:29

你的下拉导航实际上工作得很好！如果你注释掉.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。删除这行代码后，您会发现格式没有变化，导航栏可以正常工作，您的carousel仍然可以工作。

有关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 */
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54740008

复制

相似问题

问下拉菜单冲突
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单冲突EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单冲突
EN