zum Menü in der rechten Spalte als Sidebar
In der rechten Spalte ein Side Menü. Die Klassen list-group und List-group-item sorgen für die Optik (BS). Begrenzt durch die Breite der rechtsen Spalte.
NAV_LIST_UL:B zeigt den Top-Link nicht mit an. Dran denken, auf die Butten Klicken und man ist weg von hier!!!
Text (Wyswyg im Content)
Code (Content)
{NAV_LIST_UL:B,49,0,current|nav_list_sidebar scroll,,,|,<div class="btn btn-default btn-block">|</div>,|}
Menü im Content
Im Content sieht das eben ohne Begrenzung der Breite aus wie unterhalb zu sehen. Macht zwar keinen Sinn, aber der Vollständigkeit halber. Weiterer Unterschied ist das der Top-Link mit angezeigt wird. NAV_LIST_UL:P zeigt den Top-Link mit an.
der Code
{NAV_LIST_UL:P,29,0,current|nav_list_sidebar scroll,,,|,<div class="btn btn-block">|</div>,|}
uns so siehts aus:
Menü-Überschrift
Html (im Content)
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();
});
Html (im Content)
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();
});