Question

这是这个问题的第3版。

我已经添加了更多的代码，并尝试将最小值放在最小值，因为它实际上是代码的页面和页面：

您可以通过查看以下网址上的来源进行更好的尝试：http://www.dijon-egg.com/Possum/

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
</head>

<body>
  <div class="container">

    <div class="cbp-af-header">
      <div class="cbp-af-inner">
        <h1>LORUM</h1>
        <nav>
          <a href="#">Lorum</a>
          <a href="#">Lipsum</a>
          <a href="#">Lorum</a>
          <a href="#">Lipsum</a>
        </nav>
      </div>
    </div>

    <header class="clearfix">
      <span>Lorum Lipsum <span class="bp-icon bp-icon-about" 
<h1>Lorum Lipsum</h1>

</header>   
<div class="containerb">
<header class="possum-header">
<div class="possum-links">
<a class="" href="" title=""><span>Lorum 

</div>
<h1>Lorum Lipsum</h1>
</header>
<div class="deco deco--title"></div>

<div id="slideshow" class="slideshow">
<div class="slide">

<div class="slide__item">
<div class="slide__inner">


</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" 
<div class="slide__details">
<h2 class="slide__title slide__title--
<p class="slide__description">Lorumkkkkkk 
<div>
<span class="slide__price 
<button class="button button--
</div>
</div><!-- /slide__details -->
</div><!-- slide__content-scroller -->
</div><!-- slide__content -->
</div>

</body>
</html>

CSS

 .deco {
  pointer - events: none;
}

.deco--title {
  position: absolute;
  top: 0 px;
  right: 60 px;
  left: 60 px;
  height: 100 vh;
  background: url(.. / img / deco.svg) no - repeat center top;
  background - size: 100 % ;
}

.slideshow {
  position: relative;
  width: 100 vw;
  margin: 10 vh 0 5e m;
}

.slide {
  display: -webkit - flex;
  display: flex; -
  webkit - flex - direction: column - reverse;
  flex - direction: column - reverse; -
  webkit - align - items: center;
  align - items: center;
  width: 100 vw;
  text - align: center;
}

.js.slide {
  position: absolute;
  z - index: 1000;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer - events: none;
}

.slide.slide--current {
  position: relative;
  visibility: visible;
}

.deco--circle {
  position: absolute;
  top: 0;
  border - radius: 50 % ;
  background: #fff;
}

.deco--circle - left {
  right: calc(100 % -140 px);
}

.deco--circle - right {
  left: calc(100 % -140 px);
}

.deco--circle,
.slide__inner {
  width: 450 px;
  height: 450 px;
}

.slide__item {
  position: relative;
  width: 100 % ;
}

.no - js.slide__item {
  display: none;
}

.slide__inner {
  position: relative;
  display: -webkit - flex;
  display: flex; -
  webkit - flex - direction: column;
  flex - direction: column; -
  webkit - justify - content: center;
  justify - content: center; -
  webkit - align - items: center;
  align - items: center;
  margin: 0 auto;
  padding: 20 px;
  pointer - events: auto;
}

.deco--expander {
  position: absolute;
  top: 50 % ;
  left: 50 % ;
  margin: -225 px 0 0 - 225 px;
  border - radius: 50 % ;
  background: #fff;
}

.slide__title {
  position: relative;
  text - indent: 4 px;
  letter - spacing: 4 px;
  text - transform: uppercase;
  color: #b2b2b4;
}

.slide__title--preview {
  font - size: 1.05e m;
  margin: 2e m 0 0 0;
  padding: 0;
  opacity: 0;
  text - align: center;
}

.slide__title--main {
  font - size: 2.5e m;
  line - height: 1;
  margin: 0 0 0.25e m;
  color:
    #464653;
}   

.slide--current .slide__title--preview {
opacity: 1;
}

.slide--open .slide__title--main {
opacity: 1;
}

.slide__price {
font-weight: bold;
display: inline-block;
color: # 464653;
}

.slide__price--large {
  font - size: 1.3e m;
  vertical - align: middle;
}

.slide__img {
  position: relative;
  display: block;
  margin: 0 auto;
}

.slide__img--small {
  max - height: 80 % ;
}

.slide__img--large {
  height: 50 vh;
  max - height: 400 px;
  margin: 0 auto 3e m;
}

.action {
  font - size: 1.5e m;
  line - height: 54 px;
  width: 50 px;
  height: 50 px;
  margin: 0;
  padding: 0;
  text - align: center;
  border: none;
  background: none;
}

.action: focus {
  outline: none;
}

.action--open {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 40 px 40 px 0;
  color: #fff;
  border - radius: 50 % ;
  background: #6cd84e;
-webkit-transition: -webkit-transform 0.1s, background 0.1s, opacity  0
transition: transform 0.1s, background 0.1s, opacity 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.action--open:focus,
.action--open:hover {
background: # 464653; -
  webkit - transform: scale3d(1.0865, 1.0865, 1);
  transform: scale3d(1.0865, 1.0865, 1);
}

.slide--open.action--open {
  opacity: 0; -
  webkit - transition - delay: 0 s;
  transition - delay: 0 s; -
  webkit - transform: scale3d(0.3, 0.3, 1);
  transform: scale3d(0.3, 0.3, 1);
}

.action--close {
  position: fixed;
  z - index: 1001;
  top: 10 px;
  right: 15 px;
  color: #6cd84e;
-webkit-transition: -webkit-transform 0.1s, opacity 0.1s, color 0.1s;
transition: transform 0.1s, opacity 0.1s, color 0.1s;
}

.action--close:focus,
.action--close:hover {
color: # 464653;
}

.slide--open~.action--close {
  opacity: 1; -
  webkit - transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); -
  webkit - transition - delay: 0.5 s,
  0.5 s,
  0 s;
  transition - delay: 0.5 s,
  0.5 s,
  0 s;
}

.action--close,
.slide--close~.action--close {
  opacity: 0; -
  webkit - transform: scale3d(0.3, 0.3, 1);
  transform: scale3d(0.3, 0.3, 1); -
  webkit - transition - delay: 0 s;
  transition - delay: 0 s;
}

.js.slide__content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100 vw;
  height: 100 vh;
  pointer - events: none;
  opacity: 0;
}

.js.slide--open.slide__content {
  pointer - events: auto;
  opacity: 1;
}

.slide__content - scroller {
  display: -webkit - flex;
  display: flex; -
  webkit - flex - direction: column;
  flex - direction: column; -
  webkit - justify - content: center;
  justify - content: center; -
  webkit - align - items: center;
  align - items: center;
  padding: 2e m;
  position: relative;
}

.js.slide__content - scroller {
  position: fixed;
  min - height: 100 vh;
  width: 100 vw;
}

.slide__description {
  font - size: 1e m;
  font - weight: bold;
  margin: 0.25e m auto 3e m;
  text - indent: 4 px;
  letter - spacing: 4 px;
  text - transform: uppercase;
  color: #acacb3;
}

.button {
  font - weight: bold;
  margin: 0 1e m;
  padding: 0.5e m 1e m;
  color: #fff;
  border: none;
  border - radius: 2 px;
  background:
    #6cd84e;
}

.button:focus,
.button:hover {
outline: none;
background: # 464653;
}

.navbutton {
  position: absolute;
  z - index: 1;
  top: 50 % ;
  left: 50 % ;
  width: 100 px;
  height: 30 px;
  margin: 0;
  margin: -50 px 0 0 0;
  padding: 0;
  border: none;
  background: none;
}

.navbutton__line {
  -webkit - transition: stroke 0.2 s;
  transition: stroke 0.2 s;
}

.navbutton: focus {
  outline: none;
}

.navbutton: hover.navbutton__line {
  stroke: #464653;
}

.navbutton--next {
-webkit-transform: translate3d(220px,-125px,0);
transform: translate3d(220px,-125px,0);
}

.navbutton--prev {

transform: translate3d(-100%, 0, 0) translate3d(-220px,137px,0);


/* Helper classes */

.lockscroll {
position: fixed;
overflow-y: scroll;
height: 100vh;
}

.noscroll {
overflow: hidden;
height: 100vh;
position: fixed;
}

.noscroll .deco--expander {
display: none;
}

.scrollable {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: # fff;
}

.scrollable.slide__content - scroller {
  position: relative;
}

@media screen and(max - width: 50e m) {
  .deco--title {
    right: -50 px;
    left: -50 px;
  }
  .deco--circle,
  .slide__inner {
    width: 260 px;
    height: 260 px;
  }
  .deco--expander {
    margin: -130 px 0 0 - 130 px;
  }
  .deco--circle - left {
      right: calc(100 % -50 px);
    }
    .deco--circle - right {
      left: calc(100 % -50 px);
    }
    .slideshow {
      margin - top: 0;
    }
    .action--open {
      margin: 0 12 px 12 px 0;
    }
    .slide__content - scroller {
      -webkit - justify - content: flex - start;
      justify - content: flex - start;
    }
    .slide__img--large {
      margin: 0 auto 2e m;
    }
    .slide__title--preview,
    .slide__title--main {
      font - size: 0.85e m;
    }
    .slide__description {
      font - size: 0.5e m;
    }
    .navbutton--next {
      -webkit - transform: translate3d(75 px, -90 px, 0) scale3d(0.5, 0.5, 1);
      transform: translate3d(75 px, -90 px, 0) scale3d(0.5, 0.5, 1);
    }

}
}

Answer 1

尝试将此代码添加到main.js

以下代码位于main.js的第101行，我刚刚在线添加（在标题中添加一个类）

        this.items.forEach(function(item) {
        item.querySelector('.action--open').addEventListener('click', function(ev) {
            self._openContent(item);
            ev.target.blur();
            $(".cbp-af-header").toggleClass("shrinkage");
        });
    });

然后在</body>标记

之前包含以下jQuery cdn

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

在样式表中找到以下代码：component_002.css

.cbp-af-header.cbp-af-header-shrink h1 {
    font-size: 2em;
}

然后在

之后添加以下css

.cbp-af-header.shrinkage {
    height: 90px;
}

.cbp-af-header.shrinkage h1,
.cbp-af-header.shrinkage nav a {
    line-height: 90px;
}

.cbp-af-header.shrinkage h1 {
    font-size: 2em;
}

全部。

顶部菜单贴在旋转木马上

1 个答案: