Detaillierte Implementierung des CSS3-Designs für einseitige Navigationsmenüschnittstellen

Dies ist ein einseitiger Navigationsmenü-Interface-Designeffekt, der mit reinem CSS3 erstellt wurde. Bei diesem Seiteneffekt wird eine Reihe von Navigationsschaltflächen vertikal auf der linken Seite der Seite angeordnet. Wenn auf die Navigationsschaltfläche geklickt wird, wird die entsprechende Seite auf der rechten Seite des Bildschirms angezeigt.

So verwenden Sie

HTML-Struktur

Die HTML-Struktur der einseitig umschaltbaren Navigationsmenüoberfläche ist wie folgt:

<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>

CSS-Stil

Die einseitige Navigationsmenüoberfläche verwendet Transformation und Übergang, um einen Seitenwechsel zu erstellen Animationseffekte. Und verwenden Sie das Pseudoelement :target, um den Seitenwechsel abzuschließen, wenn auf die Schaltfläche geklickt wird. Der vollständige CSS-Code lautet wie folgt. Das Präfix des Browserherstellers wird dem Code nicht hinzugefügt.

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;   
}

Ich hoffe, dass die obige einfache Implementierung des reinen CSS3-Navigationsmenü-Schnittstellendesigns den gesamten Inhalt teilt Es kann Ihnen eine Referenz geben und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Für eine detailliertere Implementierung des Designs der CSS3-Navigationsmenüschnittstelle für einseitige Umschaltung und verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!