Wie lege ich eine "Startseite" fest?

Dori · 1. Februar 2017

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 · 1. Februar 2017

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 · 1. Februar 2017

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 · 1. Februar 2017

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/…ing_and_triggering_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 · 1. Februar 2017

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 · 1. Februar 2017

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 · 2. Februar 2017

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

Danke!!

MrMurphy · 2. Februar 2017

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 · 2. Februar 2017

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 · 2. Februar 2017

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

Sempervivum · 2. Februar 2017

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?

Wie lege ich eine "Startseite" fest?

Jetzt mitmachen!

Teilen