BlackCat CMS Forum

Bin mir nicht sicher ob die Frage hier richtig platziert ist, es handelt sich "mal wieder" um ein Bootstrap Thema ...

creativecat hat mir seinerzeit geholfen bei einem OnePager ein Menü zu erstellen welches auf die definierten Anker der Seite zugreift.

In der Template index.php sieht es so aus:

Code: Alles auswählen

$dwoodata['SEC_ANCHOR']	= SEC_ANCHOR; // das ist der Name der Anker
$dwoodata['sections']	= CAT_Sections::getActiveSections($page_id);
$parser->output('index.tpl',$dwoodata);

In der .tpl sieht der NAV Bereich so aus:

Code: Alles auswählen

<ul class="navbar-nav ml-auto my-2 my-lg-0">
	{foreach $sections item}
		{if $item.name!='no name'}
			<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#{$SEC_ANCHOR}{$item.section_id}">{$item.name}</a>
			</li>
		{/if}
	{/foreach}
</ul>

Alle Sections mit Namen werden so im Menü angezeigt. Soweit so gut

Bei meinem neusten Projekt, einem Bootstrap OnePager, ist nun aufgefallen das es keinen "active" Item im Menü gibt (?)

Vermutlich fehlt die Bedingung dazu

Code: Alles auswählen

{if $item.is_current} active{/if}

aber is_current oder current funktionieren dabei nicht.

Geht das überhaupt mit einer Bedingung? Oder ist das anders lösbar?

"Current" Sections gibt es nicht, nur eine Seite kann "current" sein. Anders gesagt, Du befindest Dich ja bereits auf der "aktuellen" (current) Seite, und iterierst dort alle "aktiven" Sektionen. Ich vermute mal, Du möchtest die Sektion hervorheben, die Du per Anker angesprungen hast? Das kriegst Du mit JavaScript / jQuery hin.

Probier mal sowas wie (ungetestet):

Code: Alles auswählen

$("navbar-nav li a").on("click", function(e) {
	$("navbar-nav li a").removeClass("active"); // alle "active" Markierungen entfernen
	$(this).addClass("active"); // aktiven Link (wieder) hervorheben
});

Eventuell solltest Du der Navbar eine ID oder eine eindeutige CSS-Klasse spendieren, falls es mehrere auf der Seite gibt, sonst wirkt sich das evtl auf alle aus.

Statt alle "active"-Klassen zu entfernen, könntest Du auch gezielt hingehen:

Code: Alles auswählen

$("navbar-nav li a.active").removeClass("active");

Danke für die Info, war mir so nicht ganz klar ...

shadowcat hat geschrieben: Di 5. Jan 2021, 09:14 "Current" Sections gibt es nicht, nur eine Seite kann "current" sein. Anders gesagt, Du befindest Dich ja bereits auf der "aktuellen" (current) Seite, und iterierst dort alle "aktiven" Sektionen. Ich vermute mal, Du möchtest die Sektion hervorheben, die Du per Anker angesprungen hast? Das kriegst Du mit JavaScript / jQuery hin.

Mit copy&paste hat es erstmal nicht funktioniert:

Code: Alles auswählen

$("navbar-nav li a").on("click", function(e) {
	$("navbar-nav li a").removeClass("active"); // alle "active" Markierungen entfernen
	$(this).addClass("active"); // aktiven Link (wieder) hervorheben
});

Aber mit dem Ansatz kann ich ja weiter probieren.

Meld Dich einfach, wenn Du nicht klar kommst, dann schau ich nochmal.

Muss mich korrigieren .. Deine Variante hat doch geklappt, vermutlich habe ich beim ersten Mal irgendetwas verbaselt.
Final nutze ich es nun so:

Code: Alles auswählen

$(document).ready(function(){
$("#mainNav a").on("click", function(e) {
	$("#mainNav a.active").removeClass("active"); // aktiven Link entfernen
	$(this).addClass("active"); // aktiven Link (wieder) hervorheben
});
});

Vielleicht kannst du mir trotzdem nochmals helfen

, denn ich habe bei stöbern im Netz eine, wie ich finde, ziemlich coole Menü Funktion in den Bootstrap Bibliotheken gefunden: "scrollspy.js"
Hier werden die jeweiligen Menüeinträge (href) mit den DIV ID's "verglichen". Scrollt man nun auf der Seite wird beim Erreichen des entsprechenden DIV's der dazugehörige Menüpunkt "active".
Nach meinem Verständnis ist die Grundveraussetzung diese:
Nav Struktur selbst muss im Bootstrap Stil sein (class: navbar navbar-expand-lg navbar-light nav-item nav-link).
Body Tag:

Code: Alles auswählen

<body id="page-top" style="position: relative">

Dann kann über die Data-Attribute:

Code: Alles auswählen

<body id="page-top" style="position: relative" data-spy="scroll" data-target="#mainNav" data-offset="50">

oder über Javascript:

Code: Alles auswählen

$('body').scrollspy({ target: '#mainNav' })

die Funktion aufrufen.
Doch in beiden Fällen funktioniert es nicht, leider kommt auch keine Fehlermeldung in der Browser Console ...
und mit meinen Java Fähigkeiten komme ich auch nicht weiter

In der Hoffung es ist nicht zu umfangreich.

Hm, damit kenne ich mich nicht aus, und ich hab auch keine Testseite parat. Ich habe ja nicht mal eine Vorstellung, wie das bei Dir aussieht.

Die Idee entstand durch dieses Template:
https://startbootstrap.com/theme/creative

Neben der original Beschreibung auf Bootstrap, finde ich diese auch ganz gut:
http://holdirbootstrap.de/javascript/#scrollspy

Bin für jede Unterstützung dankbar.

Hm... hast Du das richtige JS geladen?

Ich hab jetzt folgendes gemacht:

* Das Creative-Template runtergeladen
* Ein BC Template draus gemacht (Inhalt aber hartcodiert drin gelassen)
* Eine footers.inc.php ins Template-Verzeichnis gepackt, Inhalt siehe unten
* body-Tag angepaßt

Funzt.

footers.inc.php

Code: Alles auswählen

<?php
$mod_footers = array(
    'frontend' => array(
        'js'  => array(
            '/modules/lib_bootstrap_4/vendor/js/bootstrap.bundle.min.js',
        ),
    ),
);

Hier mal der obere Teil vom Template:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="en">
    <head>
	   {get_page_headers}
    </head>
    <body id="page-top" style="position:relative" data-offset="50" data-target="#mainNav" data-spy="scroll">
<!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto my-2 my-lg-0">
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Masthead-->

Bei mir sieht die footers.inc.php so aus:

Code: Alles auswählen

$mod_footers = array(
    'frontend' => array(
        'js'  => array(
            '/modules/lib_bootstrap_4/vendor/js/bootstrap.bundle.js',
			'/templates/bootswatch/js/jquery.easing.js',
			'/templates/bootswatch/js/scripts.js'
        ),
    ),
);

Die Scripts.js kommt aus dem Creative Template.

In allen Beispielen die ich so gefunden habe wird im Menü auf statische DIV ID's "gezeigt" und da funktioniert es immer.
Das Problem scheint mit den dynamisch ermittelten Menüeinträgen zu sein (Vermutung

)

Gib doch mal das HTML der Seite. Kannst es mir gern per PN schicken. Ich glaub nicht, dass das an dem dynamischen liegt, wenn die Seite dem JS vorgeworfen wird, ist es ja nicht mehr dynamisch.

BlackCat CMS Forum

BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax

Re: BC 1.3 Frage zu Menü Syntax