Question

如何在导航栏下制作粘性CTA，在CTA按钮或X中单击时会关闭。这可用于在您的网站上运行广告系列，或让用户了解正在进行的任何销售。

＆＃13;

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

＆＃13;

<div class="sticky" id="navbar">
  <a href="#">Home</a>
  <a href="#" >News</a>
  <a href="#">Contact</a>
</div>

＆＃13;

Answer 1

使用flexbox的一种方法。

将菜单和CTA包装在#navbar内的单独容器中。然后将flexbox属性应用于两者。我已从此示例中的float元素中删除了a。

＆＃13;

.menu,
.cta {
  display: flex;
}

#navbar a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.menu {
  background-color: #333;
}

.cta {
  justify-content: center;
  align-items: center;
  background: red;
}

.cta button {
  margin-left: 1em;
  background: yellow;
  border: none;
  padding: .5em;
}

＆＃13;

<div class="sticky" id="navbar">
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
  </div>
  <div class="cta">
    <p>Limited...</p>
    <button>Buy</button>
  </div>
</div>

＆＃13;

如何在导航栏下制作粘性CTA，点击时关闭？

1 个答案: