Navigation per Menue und klickbare Icons

[WiMu]

Hallo Forum,

mein Problem ist etwas kompliziert zu erklären ... bitte Geduld ;)

Ich habe auf meiner Seite eine vertikale Menue-Leiste mit drei Haupmenuepunkten und direkt darunter – ebenfalls vertikal angeordnet - zu jedem Menuepunkt ein Unterverzeichnis. Per hover und einer Klasse für das gerade aktierte Menue, wird per CSS entsprechendes Untermenue angezeigt bzw. versteckt. Das Hauptmenue ist zentriert und die Untermenues werden linksbündig angezeigt, d.h. der erste Eintrag im Unterverzeichnis befindet sich genau unter dem ersten Eintrag im übergeordneten Verzeichnis, auch wenn gerade der zweite oder dritte Hauptmenuepunkt aktiviert ist oder mit der Maus überfahren wird. Alles soweit in Ordnung und funktioniert problemlos.
Jetzt kommt der Haken:
Zusätzlich zu den links im Menue soll der Nutzer auf einigen Seiten per klickbaren Icons navigieren können, die über die ganze Seite verteilt sind (sowas wie 'ne Imagemap). Da, wie im Menue, immer nur das aktivierte oder mit der Maus berührte Icon sichtbar sein soll, dachte ich mir, packe ich doch einfach die Icons mit ins Menue und lasse die eben wie die links selbst ein- bzw. ausblenden; ungefähr so:

  
<!-- da ist 'n div drum mit text-align:center -->  
<ul id="menue">	  
	<li class="active"><h5><a href="1">Hauptmenue 1</a></h5>  
		<ul>  
			<li>  
				<a href="1.1.">Untermenue 1</a>  
				<img class="icon" src="...1.png" />  
			</li>  
			<li>  
				<a href="1.2.">Untermenue 2</a>  
				<img class="icon" src="...2.png" />  
			</li>  
			<li class="active">  
				<span>Untermenue 3</span>  
				<img class="icon" src="...3.png" />  
			</li>  
		</ul>  
	</li>  
	<li><h5><a href="2">Hauptmenue 2</a></h5>  
		<ul>  
			<!-- usw. -->  
		</ul>  
	</li>  
</ul>  

Das Anzeigen und Verstecken der jeweiligen Bilder selbst dürfe kein allzu großes Problem werden, aber:
wie kann ich per CSS beim Überfahren der Bilder auf den link im Menue zugreifen (um dessen Farbe zu ändern) und das jeweilige Untermenue switchen? Klar krieg' ich das mit Javascript hin, aber geht's vielleicht auch ohne?

Und zweitens: um das jeweilige Untermenue linksbündig unter den allerersten Hauptmenuepunkt zu kriegen, musste ich das Menue relativ positionieren, so dass ich die Icons nun ebenfalls nur relativ zum Menue positionieren kann – wenn aber der Benutzer z.B. nicht die entsprechende Schriftart installiert hat, ändert sich damit nicht nur die Größe des Menues, sondern eben auch die Position der Icons – und die müsste schon pixelgenau sein. Wie krieg' ich das position:relative weg, damit ich die Bilder immer von der linken oberen Ecke der ganzen Seite aus an die richtige Stelle schieben kann?

Mein CSS sieht im Moment ungefähr so aus:

  
ul#menue {  
	display:inline-block;  
	position:relative;  
	list-style-type:none;  
	height:49px;  
	padding:0;  
	margin:0;  
}  
  
ul#menue li {  
	float:left;  
	margin:0;  
	padding:0 10px;  
}  
  
ul#menue li h5 {  
	margin:0;  
	padding:0;  
	font-size:18px;  
	font-weight:normal;  
	cursor:default;  
}  
  
ul#menue li:hover  h5, ul#menue li.active  h5 {  
	color: #f78b1f;  
}  
  
ul#menue li.active:hover  h5 {  
	color: #f78b1f !important;  
}  
  
ul#menue:hover li.active h5 {  
	color: #fff;  
}  
  
ul#menue li h5 a {  
	color:inherit;  
}  
  
ul#menue li ul li a {  
	color: #52525e;  
}  
  
ul#menue li ul li a:hover {  
	color: #fff;  
}  
  
ul#menue li ul li.active span {  
	color: #fff;  
}  
  
ul#menue li ul {  
	list-style-type:none;  
	margin:0;  
	font-size:17px;  
	position:absolute;  
	left:0;  
	bottom:0px;  
	width:100%;  
	height:auto;  
	padding:9px 0 0 25px;  
}  
  
ul#menue li ul li {  
	margin:0 20px 0 0;  
	padding:0;  
}  
  
/* Menue anzeigen und vesrtecken per CSS */  
  
ul#menue li ul, ul#menue:hover li.active ul {  
	display:none;  
}  
  
ul#menue li:hover ul, ul#menue li ul:hover, ul#menue li.active ul, ul#menue li.active:hover  ul {  
	display:block;  
}  
  
/* und dann kommt natürlich noch ul#menue li ul li img { top:xy; left:xy } */  

Habe schon mit verschiedenen Kombinationen von display:inline/block; und margin:auto und width:irgendwas und so herumprobiert, hat mir aber immer entweder das ganze Ding nicht zentriert, oder das Untermenue nicht links-gebundet, so dass nur die Lösung mit inline-block (die mir gar nicht behagt) ürigblieb – auch mach ich sonst immer alles schön brav mit relativen Größenangaben, was aber leider in dem Fall (pixelgenau musses sein) nicht geht ...

Grüße,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

zunächst ist es sinnvoll, die Bilder als Hintergründe der li-Elemente zu verwenden. Diese als Sprites.

Den Menüpunkt der aktuellen Seite formatierst du als li und die Links als li a.

Das dürfte dein Problem schon ein wenig vereinfachen.

Matthias

[suit]

zunächst ist es sinnvoll, die Bilder als Hintergründe der li-Elemente zu verwenden. Diese als Sprites.

in li-Elementen ... mit variabler Höhe? ;)

Spassvogel.

[apsel]

Om nah hoo pez nyeetz, suit!

in li-Elementen ... mit variabler Höhe? ;)

Spassvogel.

Aus dem Posting geht nicht hervor, dass die Höhen der li-Elemente sich beim hovern ändern (sollen). Oder hab ich da was falsch verstanden.

Matthias

[suit]

Aus dem Posting geht nicht hervor, dass die Höhen der li-Elemente sich beim hovern ändern (sollen). Oder hab ich da was falsch verstanden.

Was it mit z.B. mehrzeiligen Menüpunkten oder Schriftgrößenänderungen?

[apsel]

Om nah hoo pez nyeetz, WiMu!

Da offensichtlich die Grafiken nichts mit dem Menü zu haben sollen

<li>
    <a href="1.1.">Untermenue 1</a>
    <img class="icon" src="...1.png" />
</li>

könnte der Nachbarselektor sinnvoll sein.

Dazu müsste allerdings

<li>
    <img class="icon" src="...1.png" />
    <a href="1.1.">Untermenue 1</a>
</li>

die Reihenfolge vertauscht werden, damit man

img + a  bzw.

img:hover + a

verwenden kann.

Dann kann das Bild auch sonstwo in der Seite liegen.

Matthias

[WiMu]

Da offensichtlich die Grafiken nichts mit dem Menü zu haben sollen

<li>

<a href="1.1.">Untermenue 1</a>
    <img class="icon" src="...1.png" />
</li>

>   
> könnte der Nachbarselektor sinnvoll sein.  
  
Nachbarselektor ... kannte ich noch gar nicht. 1000Dank, man lernt nie aus! Jetzt muss/sollte das nur noch auch der doofe IE interpretieren können. Mal ausprobieren;  
Bleibt in jedem Fall das Problem mit der Positionierung.  
  
Grüße,  
  
WiMu

[suit]

könnte der Nachbarselektor sinnvoll sein.

Nachbarselektor ... kannte ich noch gar nicht.

Ich auch nicht ;) das liegt vermutlich daran, dass adjacent sibling für "angrenzendes Geschwist(er)" steht.

[apsel]

Om nah hoo pez nyeetz, suit!

könnte der Nachbarselektor sinnvoll sein.

Nachbarselektor ... kannte ich noch gar nicht.

Ich auch nicht ;)

Böser Lindwurm ;)

Matthias

[suit]

Böser Lindwurm ;)

Ich kann nix für die mangelnden Übersetzungsfertigkeiten der SELFHTML-Autoren.

[apsel]

Om nah hoo pez nyeetz, suit!

Ich kann nix für die mangelnden Übersetzungsfertigkeiten der SELFHTML-Autoren.

Ich auch nicht, höchstens für meine eigenen. Aber ich denke, "Nachbar" trifft es ganz gut, zumindest im Zusammenhang mit den Erläuterungen im Wiki.

Matthias

[suit]

Om nah hoo pez nyeetz, suit!

Ich kann nix für die mangelnden Übersetzungsfertigkeiten der SELFHTML-Autoren.

Ich auch nicht, höchstens für meine eigenen. Aber ich denke, "Nachbar" trifft es ganz gut, zumindest im Zusammenhang mit den Erläuterungen im Wiki.

Das ist richtig - aber im DOM- oder CSS-Kontext heisst ein "benachbartes" Element nunmal "sibling" und nicht "neighbor" ;)

Welcher der Listen ist wohl die schlüssigste?

Eltern, Kinder, Geschwister, Nachfahren
Eltern, Kinder, Nachbarn, Nachfahren
Photovoltaik, Biomasse, Kernspaltung, Wind

[apsel]

Om nah hoo pez nyeetz, WiMu!

Nachbarselektor ... kannte ich noch gar nicht. 1000Dank, man lernt nie aus! Jetzt muss/sollte das nur noch auch der doofe IE interpretieren können. Mal ausprobieren;

<7 kannst du vergessen.

Bleibt in jedem Fall das Problem mit der Positionierung.

#menu ul li
{  position: relative; }

#menu ul li ul
{  position: absolute;
   left: -999em;
}
#menu ul li:hover ul, #menu ul li:focus ul
{  position: relative;
   left: auto;
}

Erläuterung: Die Listenelemente der Hauptpunkte bekommen position: relative, damit sich nachfolgend positionierte Elemente daran orientieren (siehe Artikel zu position)

Die Liste der untergeordneten Menüpunkte bekommt position:absolute, damit sie den benötigten Platz freigibt und die Hauptnavi zusammenrutscht.

Beim Einblenden relative, damit ihr Platz jetzt wieder berücksichtigt wird und die Hauptnavi quasi Platz macht.

Für die Bilder bietet sich position:absolute und ein genauer Ort z.B. mit left und top an, falls ich dich richtig verstanden habe. Beachte, dass in diesem Fall das 2. ul-Element der Bezugspunkt ist.

Matthias

[WiMu]

Hi, Matthias

<7 kannst du vergessen.

Das ist in Ordnung ... am liebsten würde ich <9 vergessen ;)
Das mit dem Adjacent sibling combinator (so heißt das Teil laut w3c *g*) klappt wie am Schnürchen (auch im IE7 & 8); musste gar nicht viel umbauen.

#menu ul li

{  position: relative; }

#menu ul li ul
{  position: absolute;
   left: -999em;
}
#menu ul li:hover ul, #menu ul li:focus ul
{  position: relative;
   left: auto;
}

  
Habe ich ausprobiert; leider ohne Erfolg ... möglicherweise beißt sich da was mit dem Rest des Stylesheets  
  

> Beachte, dass in diesem Fall das 2. ul-Element der Bezugspunkt ist.  
  
Wenn ich das richtig verstehe, ist doch genau das mein Problem. Ich kann mir ja nicht 100%ig sicher sein, wo dieses 2. ul-Element positioniert ist, da das ja auch von den installierten Schriften (`font-family: Georgia, Times, Times New Roman, serif;`{:.language-css}) und Browsereinstellungen abhänhig ist. An sich nicht weiter tragisch, aber damit verschiebt's mir dann (wenn ich dich richtig verstanden habe) eben auch die Icons.  
Die Bildchen zu fixieren geht leider auch nicht, da das Ganze dann von der Bildschirmgöße abhängig würde. Einzige Möglichkeit, die mir noch einfällt, wäre, das Manue in 'ne Tabelle zu packen; dann wäre das nebeneinander von zentriert und linksbündig auch ohne `position:relative`{:.language-css} möglich, so dass ich die Grafiken mit Bezugspunkt der linken oberen Ecke des kompletten Dokuments (absolut) positionieren könnte. Aber Tabellenlayout ist ja \*pfui\* ... werde ich evtl. trotzdem machen, da die Zeit langsam knapp wird (erste Entwürfe sollen in spätestens zwei bis drei Tagen online sein ... und javascripten muss ich auch noch \*puh\*)  
  
Bin für jede Hilfe dankbar.  
  
Grüße,  
  
WiMu  
  

[apsel]

Om nah hoo pez nyeetz, WiMu!

vielleicht ist es dir ja möglich, mal ein Beispiel online zu stellen, damit man genauer schauen kann, was du möchtest.

Matthias

[WiMu]

vielleicht ist es dir ja möglich, mal ein Beispiel online zu stellen, damit man genauer schauen kann, was du möchtest.

Daran habe ich auch schon gedacht, aber dummer Weise verwende ich proprietäres Bildmaterial für die Entwürfe und möchte deswegen nur ungern screenshots irgendwo hochladen. Hm ... ich lass' mir was einfallen.

Grüße und Dank,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

Screenshot ist schon ein wenig besser. Optimal wäre ein Online-Beispiel. Du kannst ja das Teil in einen geschützen Bereich hochladen und uns dann den Benutzernamen und das Passwort verraten oder zumindest den Inhalt vor SuMas verstecken. In der robots.txt "User-agent: * Disallow: /" eintragen.

Matthias

[WiMu]

Om nah hoo pez nyeetz, WiMu!

Screenshot ist schon ein wenig besser. Optimal wäre ein Online-Beispiel. Du kannst ja das Teil in einen geschützen Bereich hochladen und uns dann den Benutzernamen und das Passwort verraten oder zumindest den Inhalt vor SuMas verstecken. In der robots.txt "User-agent: * Disallow: /" eintragen.

Matthias

Ach, was soll's ... ich lad' das gerade auf'n server (ohne Passwort und Gedöhnse); kann's ja heute abend oder so wieder löschen. Link kommt gleich (kann sich nur um Stunden handeln)

Grüße,

WiMu

[WiMu]

verdammt ... aus irgend einem Grund wird der Ordner mit den einzelnen Seiten gerade nicht gefunden (merke: nicht mehr auf'm localhorst programmieren). Egal. Das, worauf's ankommt funktioniert trotzdem (siehe v.a. "Part II"):

http://b-a-c-h.org/atlas

Werde ich heute abend wieder runterschmeißen.

P.S.: ist noch einiges im argen ... ich weiß ...

Grüße und nochmal Danke,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

Ich habe auf meiner Seite eine vertikale Menue-Leiste mit drei Haupmenuepunkten und direkt darunter

ne, hast du nicht: horizontal ist wie der Horizont, nämlich so ----- ;-)

Dann ist natürlich mein Positionierungsvorschlag nichtig.

So und jetzt nochmal, was soll wie positioniert werden? Verwende konkrete Namen wie Pferd.png, Part II oder Airport.

Matthias

[WiMu]

Erstmal Danke für's Drübergucken

ne, hast du nicht: horizontal ist wie der Horizont, nämlich so ----- ;-)

das verbuxel ich ständig ... ist ja noch komplizierter als links und rechts ;)

So und jetzt nochmal, was soll wie positioniert werden? Verwende konkrete Namen wie Pferd.png, Part II oder Airport.

Das Menue soll so sein, wie's jetzt ist; in der Gänze zentriert und das Untermenue linksbündig. Die Icons sollen exakt da sein, wo entsprechendes Bildchen bei der Hintergrundgrafik zu sehen ist, so dass beim mouseover aus dem s/w-Icon ein farbiges Icon wird. Bei mir funktioniert das auch, da ich die entsprechende Schriftart (Georgia) installiert und das Verwenden vom Standard abweichender Schriftarten gestattet habe.

Ich hab' mal ein PDF mit ein paar Entwürfen hochgeladen:

http://b-a-c-h.org/atlas/Entwuerfe.pdf

Bin jetzt dann gleich auf ein Käffchen verabredet; kann also erst am späten Nachmittag weiterarbeiten/antworten.

Grüße,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

Im MOment ist deine "Linkliste" nicht erreichbar, weil, wenn du "Part 3" nicht mehr hoverst, deine zweite ul weg ist. Man könnte durch geschicktes Padding erreichen, dass sich die entsprechenden Elemente überlappen und somit dein hover nicht verloren geht.

Oder du blendest mit onmouseover die 2. Menues entsprechend dauerhaft ein, aber auch dann ist die Navi nicht besonders intiutiv.

Matthias

[WiMu]

Im MOment ist deine "Linkliste" nicht erreichbar, weil, wenn du "Part 3" nicht mehr hoverst, deine zweite ul weg ist. Man könnte durch geschicktes Padding erreichen, dass sich die entsprechenden Elemente überlappen und somit dein hover nicht verloren geht.

Also bei mir (FF 3.6, Opera 10.6, IE 8 - jeweils Windows 7) ist auch das submenue von Part 3 erreichbar (erfordert allerdings ein wenig Geduld ... liegt wohl auch daran, dass da so wenig Unterpunkte da sind und da kommen noch ein paar). Das mit dem padding ist schon drin (ul#menue li ul { padding:9px 0 0 25px; }) ... in 'ner früheren Version hatte ich das noch extremer, das kann ich ja wieder machen.

Oder du blendest mit onmouseover die 2. Menues entsprechend dauerhaft ein

ja, habe ich auch vor. Neben dieser reinen CSS-Version wird alles noch zusätzlich gejavascriptet, mit animiertem ein- und ausblenden (opacity und so). Ist eigentlich auch schon mehr oder weniger fertig, nur hatte ich zwischenzeitlich an einem server-seitigem script gearbeitet, so dass ich das javascript jetzt nicht so ohne weiteres wieder einbauen kann, sondern alles erstmal anpassen muss.

aber auch dann ist die Navi nicht besonders intiutiv.

ja, keine Frage. Aber ich denke, das gibt sich, wenn erstmal der Inhalt da ist. Dann werden die einzelnen Bereiche ja auch im content miteinander verlinkt und was unter den einzelnen Menuepunkten zu verstehen ist, wird dann auch verständlicher.

Hast du denn 'ne Idee wegen der Positionierung ohne position:relative? Oder soll ich das einfach mit 'ner Tabelle machen? An sich ja ein no-go ... aber so schön einfach ...

Grüße und Danke,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

Hast du denn 'ne Idee wegen der Positionierung ohne position:relative?

Schau dir mal bitte die Österreich-Karte auf billiger-im-urlaub.de an. So könntest du die Imagemap machen. Ist allerdings eine JS-Lösung. womit wir wieder bei den Sprites wären.

Damit wäre dann auch das einfärben kein Problem mehr, du könntest auf den Nachbarselektor g verzichten und würdest stattdessen mit einem passenden Eventhandler die Grafik verschieben.

Matthias

[WiMu]

Ist allerdings eine JS-Lösung. womit wir wieder bei den Sprites wären.

ne ... ich mach' doch den ganzen Terz, um eine Fassung mit ohne js hinzukriegen.

Noch zur Verdeutlichung, wie's ungefähr mit aktiviertem javascript aussehen soll, hier eine frühe statische Fassung (ich denke nicht, dass man das mit solchen Sprites hinkriegt):

http://b-a-c-h.org/atlas/test/satic.html

... funktioniert derzeit aber noch nicht im IE und die Icons und das Menue sind noch nicht miteinander verknüpft (auch das wird wesentlich einfacher, wenn beide Elemente Kinder des selben Elternknotens sind).

Müsste nur irgendwie das doofe position:relative aus dem ul#menue wegkriegen, dann wäre alles andere ein Kinderspiel

Grüße,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

(ich denke nicht, dass man das mit solchen Sprites hinkriegt):

kriegt man:

Dies ist der Hintergrund, der entsprechend verschoben wird.

Eine Image-Map sollte auch ohne JS funktionieren. Ich bin mir im Moment nicht sicher, ob map area:hover ein gültiger Selektor ist.

Matthias

[WiMu]

da hast du für jeden Bereich, den man hovern kann zwei Farben, hellblau und dunkelblau (+ weiß).
Wenn ich das mit visibility und opacity mache, kann ich nahezu beliebig viele frames mit jeweils einer eigenen Schattierung irgendwo zwischen s/w (bzw. hellblau) und 100% Farbe (bzw. dunkelblau) machen (das geht allerdings dann auch nur noch mit javascript). Aber unabhängig davon, ist das mit einer einzigen Hintergrundgrafik, deren Position man verschiebt natürlich in den meisten Fällen immer noch besser, als z.B. für jeden klickbaren button zwei oder mehr Grafiken vorladen zu müssen.

Eine Image-Map sollte auch ohne JS funktionieren.

Ja, sicher geht das, aber selbst wenn map area:hover ein gültiger Selektor ist (geh' ich eigentlich von aus), kann man mit der Pseudoklasse kaum auf ein Element im Menue zugreifen und umgekehrt (ich wüsste jetzt jedenfalls nicht wie)

Grüße,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

Ja, sicher geht das, aber selbst wenn map area:hover ein gültiger Selektor ist (geh' ich eigentlich von aus), kann man mit der Pseudoklasse kaum auf ein Element im Menue zugreifen und umgekehrt (ich wüsste jetzt jedenfalls nicht wie)

und genau da beißt sich die Katze in den Schwanz.

Matthias

[WiMu]

Problem gelöst (nicht schön, aber naja).

Statt display:inline-block kriegt das ganze Ding (v.a. die li-Elemente) ein display:inline verpasst (positiver Nebeneffekt: das versteht auch IE<8 ohne mit zoom:1 ein hasLayout provozieren zu müssen). Nun kann ich die drei Hauptmenuepunkte problemlos mit text-align:center zentrieren.

  
ul#menue { text-align:center; }  
ul#menue li { display:inline; }  

Das Untermenue wird absolut positioniert, und da bei ul#menue nun position:relative fehlt, absolut zum umgebenden div-Element (Header mit logo und Zeugs). Mit bottom:0 und left:0 hängt das Teil jetzt also an der unteren linken Ecke des Kopfbereichs. Nun muss ich (leider) das Untermenue per padding-left da hin schieben, wo's hin soll - unter den ersten Hauptmenuepunkt. Das passt also nur dann 100%ig, wenn entsprechende Schriften installiert sind und der Nutzer Größenänderungen der Schriften gestattet (relative Angaben, also padding-left:5em oder so, gehen leider nicht, da je kleiner die Schrift, desto rechts der erste Hauptmenue-Punk, nicht umgekehrt). Aber auch selbst wenn es nicht ganz genau passt, bleibt der Bezugspunkt für die Positionierung der Icons nun der komplette Kopfbereich, der 100% Breite des Seiteninhalts einnimt. Mit margin-top kann ich die Icons jetzt noch einen Tick nach unten schieben, so dass position:absolute, top:0 und left:0 genau der oberen linken Ecke des contents (also der Hintergrundgrafik) entspricht.

Nicht Ideal, aber scheint zu funktionieren. Später kann ich das Untermenue dann noch clientseitig an die richtige Stelle schieben, so dass es zumindest bei aktiviertem javascript in jedem Fall passgenau ist.

Grüße und nochmals Danke für die Hilfe,

WiMu