Onepager mit dem Smartmenu
Diese Onepager-Seite wurde mit dem Smartmenu realisiert.
- Die Menüpunkte sind normale TYPO3-Seiten vom Typ "Link zu externer URL" (doktype: 3)
- Als URL wird der entsprechende Anker auf der Zielseite gesetzt. Den Anker haben wir im Content-Element benannt.
- Jede Menüseite (doktype3) hat zusätzlich im Feld
tx_min_sitecore_page_class
die Klasse "onepagerlink".
Das Smartmenu "erkennt" den doktype 3 + die klasse und setzt im a-tag des Menus die Klasse "scroll".
Ich als Überschrift...
...bin flexibel sticky bis der Content rechts zu Ende ist.
Box 2:
Laaaaaanger Inhalt neben fixiertem Bild und flex-sticky-Überschrift
Ich bin ein langer Text, damit man das Verhalten des Bildes und der Überschrift links sehen. Das gesamte Konstrukt orientiert sich an 100% Höhe des Viewports.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.
Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Box 3 mit Vegas Content
Ultrices ligula sit lacus id aenean ipsum risus cras lacus nibh pretium, aenean leo viverra purus lectus turpis nisi, tellus massa in a etiam sapien viverra suscipit convallis egestas sed.
Sit tincidunt diam velit et lobortis nunc morbi pharetra, mauris diam ultricies odio libero cras feugiat libero, habitant faucibus egestas cum dolor aliquet ultrices feugiat a. Ultricies ornare in tellus dictum at parturient vulputate etiam viverra ullamcorper lacinia, phasellus duis viverra est in elit. Aliquam sapien vel erat venenatis dictum eu et mauris sed. Egestas blandit turpis nisi tortor ultrices. Integer sed donec massa adipiscing.
Box 5
Elit sed säpien bibendum egestas. Pharetra in urnä faucibus est eget, Nunc Sapien Vitae urna est tellus morbi lacus dignißim Euismod, nec turpis Velit ipsum Arcu non Dis Orci ultricies sed porttitor Amet läcus venenatis Viverrä.
Venenätis massa Törtor dignissim Egestas nibh Vel volutpät, sit eget dui Cräs diam fermentum Suspendisse Orci tortor amet euismod. Ac Convällis Morbi arcu Consectetur?