navi mit 3 bildern

cycorps

Hi,

ich will für meine Navigation jeweils 3 Bilder Pro Button verwenden (normal, mouseover, und "aktiv" also wenn die Seite geöffnet ist)

Wie macht man es am besten? Ich wollte eig ein div machen mit dem bild als Background-image und dann per hover etc die eigenschaften ändern.?

Richtiger Weg oder gibts bessere Möglichkeiten? Fürs erste muss es nicht dynamisch sein.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

JonnyBauer

Für aktive Elemente, z.B. von wp_list_categories, gibt es extra die Klasse "current-cat" dasselbe für wp_list_pages (current-page-item) ;)

für mouseover ist :hover der richtige weg ;)

cycorps

wenn ich aber nicht mit den wp-listes arbeite? Ich die Links fest per CSS/HTML definiere?

was gibts dann für eine Möglichkeit?

alchymyth

ich hatte das gleiche problem und habe von den folgenden beitraegen gelernt (leider in englisch, aber die html und css sollte klar sein)

beispiel 1

beispiel 2

cycorps

Danke für deine Antwort. Interessant zu wissen. Allerdings weiß ich nicht ob es mir bei meinem Problem hilft.

Mit "active" oder "visited" schaffe ich es ja nicht, den Button anders darzustellen, wenn die Seite aktuell aufgerufen ist.

cycorps

Alternative, um es mit wp_list zu machen:

horizontale Navigation wird via wp_listxxx eingebunden nimmt aber nur die Seiten, die unter die Oberkategorie/Oberseite "headnavigation" sortiert wurden.

möglich?

kaiser

Hab´s vor kurzem einmal gebraucht und mir zuerst lokal erstellt. Hier also der Code in "Reinform":

Anm.: Die Lösung hat mehrere Vorteile:

Valide in allen Browsern
Bilder werden per Css vorgeladen - keine zusätzlichen Ladezeiten oder "blank"s bis das Bild geladen wird

Einzige Voraussetzung ist, dass Du die Hover-States ins ursprüngliche Bild unterhalb gleich mit einfügst. Du verschiebst das Bild an der linken oberen Ecke. Werte entsprechend anpassen.

Code

<style>


a {outline: none;}


#container {position: absolute top; padding: 0; margin: 0;}
#menu ul {padding: 0; margin: 0; font-size: 0px; text-indent: -900%;}
#menu li {height: 36px; float: left; list-style-type: none; overflow: hidden;}


#menu a img {border: 0;}


#menu img.a         {position: relative; left: 0px; top: -36px;}
#menu img.a:hover     {position: relative; left: 0px; top: 0px;}


#menu img.b {position: relative; left: 0px; top: 0px;}
#menu img.b:hover {position: relative; left: 0px; top: -72px;}
#menu img.b:active {position: relative; left: 0px; top: -36px;}


</style>


<div id="container">
<ul id="menu">


<li><a href="#"><img class="a" src="AAA.png"></a></li>
<li><a href="#"><img class="b" src="BBB.png"></a></li>
<li><a href="#"><img class="b" src="CCC.png"></a></li>


</ul>
</div>

Alles anzeigen

Sieh´s als Rat der Weisen (besser geht ned). :mrgreen:

koslowski

Moin,

Zitat von kaiser

Sieh´s als Rat der Weisen (besser geht ned). :mrgreen:

sorry wenn ich das mal so anmerke, aber ein wenig besser gehts schon. ;-)

Warum a:active da mit reingenommen wird ist mir ein Rätsel, da es ja nur im Moment des Klicks gilt.

Die Grafiken haben ja keinen Bezug zum Inhalt und gehören deshalb nicht ins Markup.

Wenn die Grafiken ausgeschaltet sind ist "Ende Gelände" mit der Navi.

Tutorial eines einfachen, horizontalen, grafischen Menüs(vertikal ist ja noch einfacher, nur ist die Grafik da 240x40px!):

Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
Normalzustand ist oben in der Grafik, der Hoverzustand darunter

Doctype ist "strict" um immer im Standardmodus zu sein.
Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

XHTML:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafisches Menü</title>
</head>
<body>
<ul>
    <li id="navi01"><strong><span></span>Startseite</strong></li>
    <li id="navi02"><a href="#"><span></span>Kontakt</a></li>
    <li id="navi03"><a href="#"><span></span>Galerie</a></li>
</ul>
</body>
</html>

Alles anzeigen

Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:

Code

* {
    padding:0;
    margin:0;
}
ul  {
    width:400px;
    margin:2em auto;
}
li  {
    float:left;
    width:120px;
    list-style-type:none;
}

Alles anzeigen

<a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
overflow:hidden ist dafür, damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):

Code

a,
 strong  {
      position:relative;
      overflow:hidden;
      display:block;
      width:100%;
      height:40px;
}

Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:

Code

#navi01 a span  {
    position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(startseite.jpg) no-repeat 0 0;
}
 #navi01 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(startseite.jpg) no-repeat 0 -40px;
}
 #navi02 a span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(kontakt.jpg) no-repeat 0 0;
}
#navi02 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(kontakt.jpg) no-repeat 0 -40px;
}
#navi03 a span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(galerie.jpg) no-repeat 0 0;
}
#navi03 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(galerie.jpg) no-repeat 0 -40px;
}

Alles anzeigen

Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:

Code

#navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span  {
    background-position:0 -40px;
}

Mmh..., und damit ist auch der IE einverstanden??
Nicht ganz:
Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
Das wird ihm per CC wieder beigebracht.
Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern (oft) in der hover-position stehen
und springt nicht zurück auf die "Normal-Position".
Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber.

Code

<!--[if lte IE 7]>
  <style type="text/css">
   ul a span  {
    cursor:hand;
}
 * html a:hover  {
    background-position:0 0;
}
  </style>
<![endif]-->

Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte.
Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor
auf das betroffene Menü angewendet wird.

Es kann sein das Gilder/Levin bei WP etwas Probleme macht, dann schiebt man den Linktext einfach per CSS aus dem Viewport.
Evtl klappt das auch mit dem strong statt a nicht, das bräuchte man ne Funktion die das strong in WP einsetzt.
Vielleicht deshalb einfach auf strong verzichten, ganz normal a hinschreiben

Gruß
koslowski

kaiser

koslowski: Wie Du siehst, hab ich bei

ul {font-size: 0; text-intend: -900%} stehen. Das Du die Menüpunkte noch beschriften solltest ist klar. Nur in einem Beispiel natürlich ned drinnen. (Die Grafiken heißen nacher vermutlich auch ned AAA, BBB, oder?). Genauso wie man den Container nicht "absolute" positionieren sollte... Wie schon gesagt, es ist ein Beispiel, dass man sich kopieren und anpassen kann. Und genau wegen dem IE-background-position Fehler verwende ich Deine Lösung nicht mehr. Die Grafiken sind dann zwar im Mark-Up, aber nachdem ich Menüs immer separat mache und per include hole, ist´s mir gelinde gesagt wurscht.

So, aber jetzt bin ich auf´s Ergebnis unserer Bemühungen gespannt :D

cycorps

Huhu, danke für die Antworten.

Hab jetzt die Idee von Kaiser aufgegriffen. Funktioniert auch soweit allerdings habe ich folgende Probleme:

1.) Gebe ich den "Buttons" bei left: 2px um den Abstand zwischen den einzelnen Buttons zu erhöhen wird der Button immer auf der rechten Seite um 2px gekürzt? Warum welche Einstellung ist das?

2.) Wie bau ich dort jetzt das 3 Image ein, wenn eine Seite aktuell geöffnet ist?

3.) Kann ich das ganze Links orientieren? Die Buttons sind bei mir irgendwie zentriert.

kaiser

Ad 1) mach einfach in der Ausgangsdatei einen 2px Abstand und vergrößer den "top"-Parameter auch um 2px. Logisch, oder? Schau einmal in KOSLOWSKIS Kommentar oben. Er erklärt ganz gut, was es mit der 3-fach-Grafik auf sich hat.

Ad 2) Du musst via php eine Weiche einbauen, falls das Objekt aktiv ist: füge die Klasse "Current_page_item" ein: <li class="nav span-4 pull-menu <?php if ( is_page('BLABLA') ) { ?>current_page_item<?php } ?>"><a><img></a></li>

Ad 3) sollte eigentlich links orientiert sein. Poste doch einen Link, dann geht´s einfacher:
position: relative; left: 0px;

cycorps

1) hab einfach #menu li die eigenschaft: margin-right: 2px zugefügt. da es nicht genau bündig endet muss scheint es zu gehen.

2) werd ich mal probieren. Wie muss ich denn im style.css das 3 bild nennen?

Code

#menu img.home         {position: relative; left: 0px; top: 0px;}
#menu img.home:hover     {position: relative; left: 0px; top: -32px;}

so siehts momentan aus.

kaiser

Ad 2) Die Klasse liefert Wordpress: .current_page_item (wie i d if-Weiche oben). Du hast übrigens auch noch andere Stati/Pseudoelemente zur Verfügung: ":link, :visited, :focus, :hover & :active" sind möglich.

Ein Bsp: ".current_page_item {cursor: default; position: relative; left: 0px; top: -64px;} UND #menu img.home:active {position: relative; left: 0px; top -64px;}"

Im Bsp ist der UND-Teil mit Pseudoelement active dafür zuständig dann für den Zustand während die Maustaste gedrückt ist, denselben Zustand zu zeigen, wie wenn der Menüpunkt die gerade aktive Seite anzeigt. Das cursor: default; mache ich um Punkto Useability besser zu zeigen, dass die Seite gerade dargestellt wird (Der Link bleibt trotzdem ein Link).

Ad 1) Mach lieber Deine Grafik 2px breiter. Alles was Code spart, schafft Übersichtlichkeit und erhöht die Wahrscheinlichkeit, dass Du den Code wieder verwenden kannst.

Zeig Deine Seite einmal her, damit man sieht wobei wir helfen konnten.

EDIT: Weil ich mein Bsp oben gerade angesehen habe: Die Klassen pull, push, span, etc. sind aus dem Blueprint-Css-Framework, dass ich auf jeden Fall empfehlen kann.

koslowski

Moin,

Zitat von cycorps
Code
#menu img.home:hover     {position: relative; left: 0px; top: -32px;}
so siehts momentan aus.

bei dieser Angabe solltest du allerdings bedenken das der IE6 :hover nur in Verbindung mit a kennt, weshalb er diese Anweisung ignorieren wird. ;)

Gruß
koslowski

cycorps

ok,

weiß jemand was zum IE 7? Der zeigt bei mir nämlich die ganze Grafik an. Sprich beide.

http://img38.imageshack.us/img38/3918/unbenannttes.jpg

kaiser

2 Mögliochkeiten: (a = nicht sicher)

a) den umgebenden div mit overflow:hidden versehen
b) Du hast keine <a> um die Bilder.

koslowski

Hi,

Zitat von cycorps

ok,
weiß jemand was zum IE 7? Der zeigt bei mir nämlich die ganze Grafik an. Sprich beide.

normal braucht li ne Höhe und ne Breite und zwar die der halben Grafik( wenn sie zwei Zustände enthält).
a braucht dann wohl display:block und height/width:100% (damit es auf die Ausmasse von li ausgedehnt wird).

cycorps

Zitat von koslowski

Hi,

normal braucht li ne Höhe und ne Breite und zwar die der halben Grafik( wenn sie zwei Zustände enthält).
a braucht dann wohl display:block und height/width:100% (damit es auf die Ausmasse von li ausgedehnt wird).

was wenn die Grafiken alle unterschiedlich "breit" sind?

koslowski

Moin,

Zitat von cycorps

was wenn die Grafiken alle unterschiedlich "breit" sind?

das ist doch wohl überhaupt kein Problem.

Hast du mein Beispiel mal durchgearbeitet, um zu verstehen wie das technisch funktioniert? Ich glaube mal eher nicht.

Dort hat jeder Listenpunkt eine eigene id, kann also gesondert per CSS angesprochen werden.

Genau genommen bräuchtest du sogar nur eine Grafik für alle Links und alle Linkzustände.
Aber das ist etwas schwieriger, deshalb habe ich in meinem Beispiel für jeden Link eine Grafik genommen.

Die Technik ist unter dem Namen CSS-Sprites bekannt und im März 2004 von David Shea vorgestellt worden. Guckst du hier.
Deutsche Artikel gibts auch einige dazu. Dafür guckst du hier z.B.

Okay ich hab das noch mit Image Replacement nach Gilder/Levin gemischt, damit die Links bei ausgesch- Grafiken und/oder CSS noch funktionieren.

Ich mag solche Techniken auch schon deshalb, weil ich damit meiner HP nen schönen Look verpassen kann und trotzdem nicht auf "Barrierearmut" verzichten muss. ;)

Gruß
koslowski

cycorps

Code

#menu li {height: 32px; float: left; list-style-type: none; overflow: hidden;margin-right: 2px;}

Das jeder Button einen eignen CSS-Abschnitt hat weiß ich. Du hast aber geschreiben, dass die height: (halbehöhe der Grafik) in Li soll. und da kann ich ja schlecht 100 verschiedene Breiten angeben

wenn ich LI die höhe 32px gebe, presst IE7 die Grafiken von 64px höhe in die 32px große LI.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

navi mit 3 bildern

Jetzt mitmachen!