Wie lege ich eine "Startseite" fest?

Dori

Ich glaube mein Anliegen ist sehr simpel aber ich komme einfach nicht drauf und hoffe auf eure Hilfe... (Danke vorab!)

Ich habe eine Seite (yay) welche über ein Accordeon-Menü navigiert wird. Hier vereinfacht im Fiddle: https://jsfiddle.net/tazpjqwk/10/

Hover auf dem "Menü-Button" klappt Menü aus. Klick auf Menü-Eintrag 1 öffnet Content 1. Klick auf Menü-Eintrag 2 öffnet Content 2. Soweit so gut.

Ich möchte jetzt allerdings gerne einen Start-Content festlegen. Sprich Content, der angezeigt wird, noch bevor ich einen Menü-Eintrag anwähle - also eine Startseite quasi.
Wenn ich dann meinen Content im Menü wähle, soll dieser Start-Content natürlich auch wieder verschwinden...

Wie löse ich das?
Ich steh da grad völlig auf dem Schlauch. Wo muss meine <div id="contentstart"> hin? Innerhalb des <section id="content"> tags?
Und wie definiere ich, dass sie beim Aufruf der Seite sichtbar ist, solange bis ein Content aus dem Menü gewählt wird?

Sempervivum

Du brauchst nur dem betr. content-div ein display:block zu geben:

#content1 {

width: 490px;
height: 490px;
border: 1px solid;
margin: auto;
display: block !important;

}

Warum ich das !important brauchte, erschließt sich mir nicht ganz. Offenbar hat

#content > div {

padding: 10px;
display: none;

}
eine höhere Priorität. Aber warum? Adressierung mit ID hat IMO eine höhere Spezifität als Adressierung mit Tagname.

Dori

Hi und schon mal Danke!

Habs probiert. Die "Startseite" sieht super aus... allerdings verschwindet sie nicht beim Aufruf des Contents aus dem Menü.
Guck: https://jsfiddle.net/tazpjqwk/11/

Sempervivum

Das habe ich auch gerade gemerkt. Einfacher geht es, wenn Du #content1 an die URL anhängst. Das funktioniert nicht beim Fiddle, weil das getestete dort in einem iFrame liegt.

Wenn das mit der URL nicht geht, fällt mir nur noch eine Lösung mit Javascript ein, entweder, indem man einen Klick auf den Link simuliert:
https://developer.mozilla.org/en-US/docs/Web…iggering_events
https://jsfiddle.net/Sempervivum/jx1fcs06/1/

oder indem man das #content1 automatisch an die URL anhängt:
https://wiki.selfhtml.org/wiki/JavaScript/Location/hash

Dori

Für meine Zwecke könnte ich sicher das "#contentstart" an die URL anfügen - fand ich nur so unelegant ;). Dachte echt es liegt nur an einer falschen Platzierung meiner <div id="contentstart"> und/oder einem "display: block;" was vergessen wurde...

Java wollte ich bei der Site eigentlich vermeiden aber das automatische Anhängen des "#xy" wäre eine Option. Aber das Beispiel kann ich nicht richtig nachvollziehen bzw für meine Zwecke anpassen

Sempervivum

Zitat

das automatische Anhängen des "#xy" wäre eine Option.

Das würde auch Javascript erfordern.
Wenn es für dich unverzichtbar ist, könntest Du auf eine Alternative umstellen, die Radiobuttons verwendet:
https://jsfiddle.net/Sempervivum/jx1fcs06/6/

Ich mag diese Trickserei mit :target sowieso nicht, u. a. weil sie den Nebeneffekt hat, dass der Browser auch zu dem Anker scrollt.

Dori

Cool, das ist doch ne ganz gute Lösung mit den Radiobuttons...
https://jsfiddle.net/Die_Dori/jx1fcs06/10/

Danke!!

MrMurphy

Hallo

Zitat

Ich möchte jetzt allerdings gerne einen Start-Content festlegen. Sprich Content, der angezeigt wird, noch bevor ich einen Menü-Eintrag anwähle - also eine Startseite quasi.

Dafür kannst du das Attribut checked verwenden.

Hast du bei deinem Problem auch an die Nutzer von Touchscreens gedacht, die bekanntlich keinen hover-Effekt kennen? Oder sollen die deine Seite nur eingeschränkt nutzen können?

Gruss

MrMurphy

Dori

Hi MrMurphy,

die Seite wird ausschließlich stationär an PCs dargestellt, ich kann also Touchscreens außer Acht lassen.

Dein Vorschlag mit dem Attribut Checket geht in die gleiche Richtung wie Sempervivum schon angemerkt hatte, oder?

LG

Sempervivum

Ja, wenn man sich mein letztes Fiddle ansieht, erkennt man, dass ich genau das Attribut "checked" verwendet habe, um die Startseite festzulegen.

Sempervivum

Sag mal Dori, hattest Du nicht auch einen Thread, wo es darum ging, Bereiche in einem Bild festzulegen und beim Hover ein Menü aufzuklappen?Was ist denn daraus geworden, bist Du zum Ziel gekommen?

Jetzt mitmachen!