Link List Menü's
Verschiedenes zu Linklist
Menü in der rechten Spalte als Sidebar
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
Code (Content)
so sieht das in der Linklist zum Menü oberhalb aus:
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
Code (Content)
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
Wyswyg (Content)
Die Sidebar bleibt beim Scrolling immer sichtbar. Hierzu habe ich folgendes JavaScript verwendet.
Script für Scrolling der Sidebar
Code (Content)
$(function() {
var offset = $(".sidebar").offset();
var topPadding = 120;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(".sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(".sidebar").stop().animate({
marginTop: 0
});
}
});
});