spezielles Menü - Mischfunktion

[m-werk]

Hallo Leute, wie würdet ihr folgendes Lösen.

Ich habe in der Seitenstruktur 4 Seiten, die mit Artikeln befüllt sind.
Auf der Startseite habe ich mehrere Artikeln ABER zu einem Artikel soll zusätzich dies im Menü erscheinen. Dieser Artikel enthällt einen Anker, damit dieser im Menü runter scrollt.

Wie würdet Ihr dies Lösen, so dass im Menü diese 4 Seitenstrukturen erscheinen und zusätzlich dazwischen ein Menüpunkt, der auf der Startseite dann runter scrollt.

Ich könnte schon einen Artikel machen, aber mir geht's auch um die formatierung im Menü. Wenn der Menüpunkt angeklickt wird, soll dieser auch fett dann sein. (z.B). Das geht nicht, wenn ich es mit einem Artikel löse, oder doch?

Mir wäre lieber, es gäbe eine Menüfunktion, wo ich manuell einen eigenen Menüpunkt hineinschreiben kann, und diesen dann auch verlinken kann.

[tab]

Kann man z.B. einse Seite anlegen an für die Menü-Reihenfolge passender Stelle, diese als (externe) Weiterleitung einstellen und den passenden Link zur Seite inklusive Anker eingeben.

[m-werk]

Leider hab ich jetzt das nicht ganz verstanden. Könntest du mir das nochmals genauer erklären?

[m-werk]

Ok, ich hab es nun so geschaft.

Aber leider hab ich den Effekt nicht, dass bei diesem Link die Classe "active" dazugeschrieben wird. Bei allen anderen Menüpunkten funktioniert dies.

[tab]

Naja, eine Seite anlegen und in den Einstellungen als Seitentyp externe Weiterleitung auswählen. Bei interner Weiterleitung wirst du wohl den Anker nicht angeben könnenDann musst du eine URL angeben, wohin die Weiterleitung gehen soll. Da trägst du dann eben die URL ein, z.B. http://deinedomain.tld/deineseite.html#deinanker. Die neu angelegte Seite erscheint dann im Menü und beim Klick darauf wirst du hoffentlich zu deinem angegebenen Ankerlink weitergeleitet.
Edit: Ich hoffe die Funktion gibt es noch in 4.4, ich habe gerade nur eine 3.5 zur Hand.

[m-werk]

Das hab ich doch gemacht.

Es funktioniert ja auch, aber genau diesen Link kann ich nicht in CSS ändern, wenn dieser angeklickt wird.

Bei allen anderen Menüpunkten, wird, wenn dieser aktiv ist, im Quelltext aus <a class......> ein <strong....>

Bei einer Externen Weiterleitung bleibt im Quelltext <a class....> stehen, wenn man diesen anklickt.

Das habe ich damit gemeint.

[tab]

Kannst du das nicht irgendwie über die target-Pseudoklasse stylen?
Edit: Hmm, wahrscheinlich eher nicht

[m-werk]

Hier der HTML-Ausschnitt, wie es aussieht, wenn ein ganz normaler Seitenlink angeklickt wird.

<ul class="level_1">
    <li class="active daseberhart_menu first">
        <strong class="active daseberhart_menu first" itemprop="name">Das Eberhart</strong>
    </li>
    <li class="die_appartements">
        <a class="die_appartements" href="#appartements_anker" title="Die Appartements" itemprop="url">
            <span itemprop="name">Die Appartements</span>
        </a>
    </li>
    <li class="aktuelleangebote_menu">
        <a class="aktuelleangebote_menu" href="aktuelle-angebote.html" title="Aktuelle Angebote" itemprop="url">
            <span itemprop="name">Aktuelle Angebote</span>
        </a>
    </li>
</ul>

Hier sieht man schön, dass der 1. Menüpunkt angeklickt wurde. Somit ist dieser auch AKTIV.

Und hier sieht man, dass der 2. Menüpunkt angeklickt wurde (oder auch nicht). Zumindest funktioniert es so. Nur eben stylen kann ich diesen nicht, da kein "aktiv" irgendwo steht:

<ul class="level_1">
    <li class="daseberhart_menu first">
        <a class="daseberhart_menu first" href="das-eberhart-5.html" title="Das Eberhart" itemprop="url">
            <span itemprop="name">Das Eberhart</span>
        </a>
    </li>
    <li class="die_appartements">
        <a class="die_appartements" href="#appartements_anker" title="Die Appartements" itemprop="url">
            <span itemprop="name">Die Appartements</span>
        </a>
    </li>
    <li class="aktuelleangebote_menu">
        <a class="aktuelleangebote_menu" href="aktuelle-angebote.html" title="Aktuelle Angebote" itemprop="url">
            <span itemprop="name">Aktuelle Angebote</span>
        </a>
    </li>
</ul>

[mlweb]

Wenn Du das Ganze mal Online zeigst, kann man mal ein bisschen mit den Online-Tools spielen. Habe jetzt keine Lust das nachzubauen für einen Test.

[mlweb]

Ansonsten fällt mir noch ein beim Klicken mit js eine Klasse active zu setzen, wenn auf den Link geklickt wurde und entsprechend zu löschen, sobald etwas anderes geklickt wurde oder über einen anderen Ankerlink hinaus gescrollt wurde. Als Quelle für so eine Lösung würde ich das js von Onepager-Navigationen unter die Lupe nehmen. Die machen nämlich in vielen Fällen so etwas.

[m-werk]

Hier meine Seite: http://test.daseberhart.at

Ich verwende schon ein jquery

$( document ).ready(function() {

	$('.die_appartements a').on('click', function(e){
	  var href = $(this).attr('href');
	  $('html, body').animate({
	    scrollTop:$(href).offset().top -245
	  },800);
	  e.preventDefault();
	});
});

Leider hab ich hier auch noch das Problem, dass dieser nicht greift, wenn der User von einem anderen Link auf diesen wieder zurück kehrt. Man muss immer entweder 2x oder 3x auf den "Die Appartements" klicken, damit es so erscheint dass es passt.

[Andreas]

Das lässt sich alles lösen, sieht aber nach einem Auftrag für einen Entwickler aus.

Am einfachsten wäre es, wenn du direkt alles mit JS machen würdest. Gib der Seite mit der Ankernavigation ne Klasse - Beispiel "ankernav". Dann kann man die erforderlichen Menüpunkte rein bringen, nachdem man mit JS die Artikel in der Hauptspalte "gesammelt" hat.

Damit das auch funktioniert, wenn man mit soner URL auf die Seite kommt, muss zuerst der location.hash der URL ausgelesen werden, dann kann man mit JS darauf reagieren.

ps Dein Beispiel mit

href="#appartements_anker"

würde nicht funktionieren (nur auf der Startseite), bzw. man würde immer auf der Startseite landen, weil es ja einen BASE-Tag im HEAD gibt. Der Pfad der Seit müsste also noch dazu geschrieben werden - meine-seite.html#appartements_anker.

[mlweb]

würde nicht funktionieren (nur auf der Startseite), bzw. man würde immer auf der Startseite landen

Ich hatte bisher gedacht, dass das genauso gewollt ist und nur die Formatierung des aktiven Zustands angeglichen werden sollte. Ein solches Menü finde ich persönlich zwar ausgesprochen ungewöhnlich, aber manchmal muss man nicht alles verstehen.

[m-werk]

So, hab mal folgendes gemacht, was aber überhaupt nicht funktioniert, bzw. das Scrollen geht nicht.

Ich hab im Header ein Custom-Nav eingebunden.
In der Seitenstruktur hab ich einen Menüpunkt erstellt, der eine Externe Weiterleitung hat und als Link "home.html#appartements_anker" eingetragen.

In der Seitenstrukture "home" hab ich einen Artikel mit "appartements" angelegt und im Artikel dann als html hab ich folgen Code eingebaut:

<div class="anker_1"></div>
<div id="appartements_anker"></div>

Darunter hab ich nun ein Text-Element eingefügt.

Soweit sogut, funktioniert der Ankerlink.
Nur das Scrollen funktioniert NICHT. Der Ankerlink steht hier auch immer ganz oben am Bildschirmrand.

Ich hab für das Scrollen ein Template "j_scrolling_js.html5" erstellt mit folgendem Inhalt. (Dieses jquery hab ich auch im Seitenlayout eingebunden)

<script>
$(document).ready(function() {

	$('a[href*="#"]:not([href="#"])').click(function() {
    	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    		var target = $(this.hash);
    		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    		if (target.length) {
        		$('html, body').animate({
        			$(window.location.hash).offset().top -245
        		}, 500);
        		return false;
    		}
    	}
	});
});
</script>

Es funktioniert aber das Scrollen nicht.

[m-werk]

So, da mir das jetzt zu bunt wurde, wurde nun vereinbart, dass KEIN Ankerpunkt gesetzt werden muss. Jetzt hab ich eine ganz normale Seite und das passt auch so.

Somit ist jetzt mal dieses Thema für mich erledigt.