Pfeile zur nächsten, vorherigen Seite in TYPO3
#TYPO3 #Code

Pfeile zur nächsten, vorherigen Seite in TYPO3 erstellen

Eine einfache Seitennavigation mit einem Pfeil zur nächsten und zur vorherigen Seite lässt sich sehr einfach in TYPO3 erstellen.

Das TypoScript wird in die Konfigurations-Datei eingebunden und sieht wie folgt aus:

 

lib.submenuArrow = COA
lib.submenuArrow {
  10 = HMENU
  10 {
    special = browse
    special.entryLevel = 1
    special.items = prev
    
    1 = TMENU
    1 {
      NO = 1
      NO.ATagParams =
    }
  }
  
  20 < .10
  20 {
    special.items = next
    1.NO.ATagParams =
  }
}

 

Das Menü muss nun noch in unser Template eingebunden werden. Das folgende Snippet kann an beliebigen Stellen im Fluidtemplate platziert werden.

 

<f:cObject typoscriptObjectPath="lib.submenuArrow" />

 

Was jetzt noch fehlt ist das Styling für die Pfeile. Für die Darstellung der Pfeile wurde die Iconfont "Font-Awesome" verwendet, die natürlich durch eine beliebig Andere ersetzt werden kann.

 

.pageArrow {
  display: inline-block;
  position: fixed;
  top: 43%;
  background-color: #f03931;
  color: #fff;
  width: 250px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: .2s;
}

.pageArrow:after {
  font-family: fontAwesome;
  position: absolute;
  background-color: #f36761;
  padding: 20px;
  top: 0;
  transform: translateZ(1px);
}

.prev {
  left: -200px;
  padding: 20px 75px 20px 20px;
}

.prev:after {
  content: "\f053";
  right: 0;
}

.prev:hover {
  left: 0;
}

.next {
  right: -200px;
  padding: 20px 20px 20px 75px;
}

.next:after {
  content: "\f054";
  left: 0;
}

.next:hover {
  right: 0;
}