zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafisches Menü (a la Vista) mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.04.2008, 19:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.04.2008
Beiträge: 1
tlloyd72 befindet sich auf einem aufstrebenden Ast
Standard Grafisches Menü (a la Vista) mit CSS

Hallo liebe Leute!

Ich hoffe, daß mir jemand bei einem Problem einen Tipp geben kann:
Ich have versucht, über CSS ein Menü zu erstellen, daß dem in Vista ähnelt.

Hierfür habe ich 3 verschiedene Grafiken erstellt, die die 3 Zustände
1. Normal | 2. Hover | 3. Gedrückt
darstellen, und Zeige diese über "background-image:url" an.

Das CSS dazu sieht so aus:


a {color:#fff;}
a:visited {color:#fff;}
a:active {color:#fff;}
a:hover {text-decoration:none;}

a.button {display:block; height:29px; width:120px; float:left; background-image: url(images/button.jpg); text-decoration:none; font-size:11px; font-family:arial, sans-serif; letter-spacing:1px; line-height:29px;}

a.button:hover {border:0; height:29px; width:120px; background-image:url(images/button_hover.jpg); cursorointer;}

a.button:active {height:29px; width:120px; background-image: url(images/button_pressed.jpg);}



Das klappt auch soweit so gut. Nun soll aber der ausgewählte Menüpunkt isolange m Zustand "gedrückt" bleiben, bis ein anderer Menüpunkt ausgewählt ist, auch wenn man in dem Inhaltsframe irgendwo hinklickt...

Dazu habe ich folgendes Javascript gefunden und ebenfalls in die menu.htm mit eingebaut:

<script type="text/javascript"><!--
function addClass( obj, _className)
{
return ( obj.className += " " + _className );
}
function removeClass( obj, _className)
{
var regExp = new RegExp("\s*" + _className + "\s*");
return ( obj.className = obj.className.replace(regExp, "") );
}
function setActive() {
var aElements = document.getElementsByTagName("a");
for(var i=0; i<aElements.length; i++) {
removeClass(aElements[i], "a-active");
aElements[i].onclick = new Function("setActive(this)");
}
for(var i=0; i<setActive.arguments.length; i++ ) {
addClass(setActive.arguments[i], "a-active");
}
}
window.onload = function() {
setActive();
}
//-->
</script>

Dazu noch das CSS:
.a-active {font-weight:bold; height:29px; width:120px; background-image: url(images/button_pressed.jpg);}


Nun meine Frage(n), wo ich einfach nicht weiterkomme:

1. Das Script scheint zu funktionieren, denn die Schrift wird fett und bleibt so, bis ein anderer Menüpunkt gewählt wird, aber das unter a-acticve angegebene Bild "button_pressed.jpg" wird nicht angezeigt.
Stattdessen springt er wieder in den Anfangszustand zurück. Warum???

2. Bei Firefox funktioniert noch nicht einmal das mit den CSS Buttons richtig. Hier wechselt der Button schon auf den Anfangszustand zurück, sobald man mit der Maus vom Button geht. Weiß jemand, wieso?

Hier ein Link zu der Seite, damit Ihr es Euch "live" ansehen könnt:
Nabu Bielefeld Test

Vielen Dank im Voraus für Eure Tipps!!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 12:49
herunterfahrendes Menü mit CSS Pablo CSS 1 27.12.2007 18:07
CSS Menü - Buttonfrage Ralgar CSS 6 01.12.2006 18:14
Mysteriöses in CSS Dropdown Menü ph!L CSS 3 21.07.2006 13:31
Menü mit CSS aber mit JS Animation? xy2er CSS 6 20.03.2005 21:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:55 Uhr.