In der rechten Spalte ein Side Menü auf Basis der Linklist. Die Klassen list-group und List-group-item sorgen für die Optik
(BootStrap-Standard Klassen). Das Menü im Content gleiche Basis.
Hier habe ich einfach die Links verschiedener Seiteninhalte dieser Webseite eingetragen.
Als Basis dient das default.tmpl der Linklist. Die Breite ist derzeit unbeschränkt weil die Spalte die Breite reguliert. Verwendung könnte es auch als Seitenmenü für eine Webseite als OnePage finden. ein Muster für eine OnePage Lösung gibts bei Pepe
Dran denken, Klicken der verschiedenen Links (Buttons) führt weg von diesem Artikel
Home / Startseite | de.html Text content + Left & Right | ?text-content-left-right News Isotope | news-isotope/sort.html Bilder DIV mit Hover Effekt | ?bilder-div-hover-effekte Ende der Seite | #footer
mein Template zum Sidemenü rechts:
<!--LINKLIST_START//-->
<div class="sidebar hidden-xs" role="navigation">
[TITLE]<h3 class="list-group-item active">{TITLE}</h3>[/TITLE]
<!-- [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE] //-->
[LINKLIST]
<ul class="scroll list-group" id="linklist{ID}">
{LINKLIST}
</ul>
[/LINKLIST]
</div>
<!--LINKLIST_END//-->
<!--LINKLIST_ENTRY_START//-->
[LINK]
<a href="{LINK}" class="list-group-item" {TARGET}{LINKTITLE} role="button">{LINKNAME}</a>
[/LINK]
<!--LINKLIST_ENTRY_END//-->
<!--LINKLIST_SPACE_START//-->
<!--LINKLIST_SPACE_END//-->
Scrolling der Sidebar
Die Sidebar bleibt beim Scrolling immer sichtbar. Hierzu habe ich folgendes JavaScript verwendet.
Script für Scrolling der Sidebar
document.addEventListener("DOMContentLoaded", () => {
const sidebar = document.querySelector(".sidebar");
if (!sidebar) return;
const start = sidebar.offsetTop;
const padding = 120;
let target = 0;
let current = 0;
const ease = 0.12; // kleiner = ruhiger
function animate() {
current += (target - current) * ease;
sidebar.style.marginTop = current.toFixed(2) + "px";
requestAnimationFrame(animate);
}
window.addEventListener("scroll", () => {
const scrollTop = window.scrollY;
target = Math.max(0, scrollTop - start + padding);
}, { passive: true });
animate();
});
Für das Menü könnte man auch affix aus Bootstrap nutzen, hat aber den Nachteil, das eventuell darunter liegende Inhalte unterhalb des Menüs weiter scrollen. Deshalb hab ich das hier mal über ein Script gelöst.