Implémentation détaillée de la conception de l'interface du menu de navigation à commutation d'une seule page CSS3

Il s'agit d'un effet de conception d'interface de menu de navigation à commutation d'une seule page réalisé en CSS3 pur. Dans cet effet de page, un ensemble de boutons de navigation sont disposés verticalement sur le côté gauche de la page. Lorsque vous cliquez sur le bouton de navigation, la page correspondante glisse hors du côté droit de l'écran.

Comment utiliser

Structure HTML

La structure HTML de l'interface du menu de navigation de commutation d'une seule page est la suivante :

<p class="ct" id="t1">
  <p class="ct" id="t2">
    <p class="ct" id="t3">
      <p class="ct" id="t4">
         <p class="ct" id="t5">
          <ul id="menu">
            <a href="#t1"><li class="icon fa fa-bolt" id="uno"></li></a>
            <a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a>
            <a href="#t3"><li class="icon fa fa-rocket" id="tres"></li></a>
            <a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a>
            <a href="#t5"><li class="icon fa fa-plus-circle" id="cinco"></li></a>
          </ul>
          <p class="page" id="p1">
             <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">...</section>
          </p>
          <p class="page" id="p2">
            <section class="icon fa fa-keyboard-o"><span class="title">Type</span></section>
          </p>
          <p class="page" id="p3">
            <section class="icon fa fa-rocket"><span class="title">Rocket</span></section>
          </p>
          <p class="page" id="p4">
            <section class="icon fa fa-dribbble">
              <span class="title">Dribbble</span>
              <p class="hint">
                Im ready to play, <span class="hint line-trough">invite me </span> find me   
              </p>
              <p class="hint">...</p>
            </section>
          </p>
          <p class="page" id="p5">
            <section class="icon fa fa-plus-circle">
              <span class="title">More</span>
              <p class="hint">
                ...   
              </p>
            </section>
          </p>
        </p>
      </p>
    </p>
  </p>
</p>

Style CSS

L'interface du menu de navigation de changement de page unique utilise la transformation et la transition pour créer un changement de page effets d'animation. Et utilisez le pseudo-élément :target pour terminer le changement de page lorsque vous cliquez sur le bouton. Le code CSS complet est le suivant. Le préfixe du fabricant du navigateur n'est pas ajouté au code.

html, body, .page {   
  width: 100%;   
  height: 100%;   
  margin: 0;   
  padding: 0;   
  transition: all .6s cubic-bezier(.5, .2, .2, 1.1);   
  color: #fff;   
  overflow: hidden;    
}   

* {   
  font-family: 'open sans', 'lato', 'helvetica', sans-serif;   
}   

.page {   
  position: absolute;   
}   

#p1 {   
  left: 0;   
}   

#p2, #p3, #p4, #p5 {   
  left: 200%;   
}   

#p1 { background: darkslateblue; }   
#p2 { background: tomato; }   
#p3 { background: gold; }   
#p4 { background: deeppink; }   
#p5 { background: #9b59b6; }   

#t2:target #p2,   
#t3:target #p3,   
#t4:target #p4,   
#t5:target #p5 {   
  transform: translateX(-190%);   
  transition-delay: .4s !important;   
}   

#t2:target #p1,    
#t3:target #p1,   
#t4:target #p1,   
#t5:target #p1{   
  background: black;   
}   

#t2:target #p1 .icon,    
#t3:target #p1 .icon,   
#t4:target #p1 .icon,   
#t5:target #p1 .icon {   
  -webkit-filter: blur(3px);   
  filter: blur(3px);   
}   

.icon {   
  color: #fff;   
  font-size: 32px;   
  display: block;   
}   

ul .icon:hover {   
  opacity: 0.5;   
}   

.page .icon .title {   
  line-height: 2;   
}   

#t2:target ul .icon,   
#t3:target ul .icon,   
#t4:target ul .icon,   
#t5:target ul .icon{   
  transform: scale(.6);   
  transition-delay: .25s;   
}   

#t2:target #dos,   
#t3:target #tres,   
#t4:target #cuatro,   
#t4:target #cinco {   
  transform: scale(1.2) !important;   
}   

ul {   
  position: fixed;   
  z-index: 1;   
  top: 0;   
  bottombottom: 0;   
  left: 0;   
  margin: auto;   
  height: 280px;   
  width: 10%;   
  padding: 0;   
  text-align: center;   
 }   

#menu .icon {   
  margin: 30px 0;   
  transition: all .5s ease-out !important;   
}   

a {   
  text-decoration: none;   
}   

.title, .hint {   
  display: block;   
}   

.title {   
  font-size: 38px;   
}   

.hint {   
  font-size: 13px;   
}   

#p4 .hint {   
  display: inherit !important;   
}   

.hint a {   
  color: yellow;   
  transition: all 250ms ease-out;   
}   

.hint a:hover {   
  color: #FFF;   
}   

.line-trough {   
  text-decoration: line-through;   
}   

.page .icon {   
  position: absolute;   
  top: 0;   
  bottombottom: 0;   
  rightright: 10%;   
  left: 0;   
  width: 270px;   
  height: 170px;   
  margin: auto;   
  text-align: center;   
  font-size: 80px;   
  line-height: 1.3;   
  transform: translateX(360%);   
  transition: all .5s cubic-bezier(.25, 1, .5, 1.25);   
}   

.page#p1 .icon {   
  height: 220px;   
}   

.page#p1 .icon {   
  transform: translateX(10%) !important;   
}   

#t2:target .page#p2 .icon,   
#t3:target .page#p3 .icon,   
#t4:target .page#p4 .icon,   
#t5:target .page#p5 .icon {   
  transform: translateX(0) !important;   
  transition-delay: 1s;   
}

La simple implémentation de la conception de l'interface de menu de navigation à commutation d'une seule page CSS3 ci-dessus est tout le contenu partagé par l'éditeur I. j'espère que cela pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Pour une implémentation plus détaillée de la conception de l'interface du menu de navigation à commutation d'une seule page CSS3 et des articles connexes, veuillez faire attention au site Web PHP chinois !