:active fehlerhaft?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
blocken
boxen
code
dank
definierten eigenschaften
dienst
display
eigenschaft
element
http
internet
list
maus
navigation
notierung
null
objekt
stehen
text
url
-
Hallo,
bin grade am rumkämpfen mit ner navigation
ich möchte das die unternavigation beim anklicken erscheint und dort stehen bleibt bis ich was anderes anklicke.
normalerweise sollte das ja einfahc mit :active umzusetzen sein. doch irgendwie verhält sich active bei mir im FF komisch. in IE gehts ja eh garnicht.
Wenn ich den Navigationspunkt anklicke erscheint die unternavikurz aber verschwindet sofort wieder. nur wenn ich den navigatiosnklick anklicke, die maus halte und etwas ziehe, adnn bleibt es danach stehen.
Is das normal?
Aber da es im IE eh nich geht wer dich mir wohl sowieos ne JavaScript-Lösung suchen müssen, aber komisch finde ich es trotzdem?
Grüße
Fabi -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Let me google this for you.
Zitat aus selfhtml:
Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.
Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf die Pseudoklasse a:hover. Der Internet Explorer interpretiert :focus als :active. Opera ignoriert zunächst :focus und wendet die für diesen Zustand definierten Eigenschaften erst bei nachfolgendem :hover zusätzlich an.
Die Pseudoklassen :focus, :hover und :active gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:active CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird, die definierten Eigenschaften an. Im Internet Explorer bis einschließlich Version 6 funktioniert keine dieser allgemeingültigen Pseudoklassen und in Version 7 lediglich :hover.
Beitrag zuletzt geändert: 6.10.2009 1:11:40 von census -
Du könntest uns helfen, indem du die entsprechende Seite hochlädst, den Link postest und dann kann man nochmal schauen. Mit :active etwas zu realisieren sollte grundlegend schwer werden. Es gibt für Navigationsmenüs ein zumindest ein gutes Beispiel auf selfhtml, danach folgt dann die noch bessere JS-Version.
Willst du das die Navigation erst dann aufklappt, wenn man auf den Link drückt? -
var Evil_Devil = {} Evil_Devil.Dropdown = function() { mainDrops = []; // ids of main menu elements with dropdown subDrops = []; // ids of submenu elements currentDrop = null; timeout = null; interval = null; time = 2000; // default will be 2 seconds function attachDrops() { // start with main for (var i=0, il=this.mainDrops.length; i<il; i++) { var drop = document.getElementById(this.mainDrops[i]); drop.onmouseover = (function(obj, index) { return function() { showDrop(obj, index); }; })(drop, i); drop.onmouseout = (function(obj, index) { return function() { prepareHideDrop(obj, index); }; })(drop, i); this.mainDrops[i] = drop; } // handle subs for (var i=0, il=this.subDrops.length; i<il; i++) { var sub = document.getElementById(this.subDrops[i]); sub.onmouseover = (function(obj, index, refresh) { return function() { removeHideDrop(obj); }; })(this.mainDrops[i]); sub.onmouseout = (function(obj, index) { return function() { prepareHideDrop(obj, index); }; })(this.mainDrops[i],i); } }; function showDrop(obj, index) { hideCurrentDrop(); // retrieve the sub menu and display it. var sub = document.getElementById(this.subDrops[index]); sub.style.display = 'block'; this.currentDrop = sub; }; function hideDrop(obj) { if (obj !== null) obj.style.display = 'none'; // make sure everything is cleared! window.clearTimeout(this.timeout); this.timeout = null; } function removeHideDrop(obj) { if (this.timeout !== null) { window.clearTimeout(this.timeout); this.timeout = null; } } function prepareHideDrop(obj, index) { // selfattach to timer or refresh var sub = document.getElementById(this.subDrops[index]); this.timeout = window.setTimeout(function() { hideDrop(sub) },this.time); } function hideCurrentDrop() { // if we have a current drop, then hide it! if (this.currentDrop !== null) this.currentDrop.style.display = 'none'; // is there a timeout set? Then clear him if (this.timeout !== null) { window.clearTimeout(this.timeout); this.timeout = null; } }; return { initialize: function(main, sub, current, timeLength) { mainDrops = main; subDrops = sub; currentDrop = current !== null ? document.getElementById(current) : current; time = timeLength; attachDrops(); } }; };
Das automatische ausblenden eines UNterpunktes nach 2 Sekunden kannst du entweder deaktivieren oder so lassen.
Einziges Manko an diesem Script ist, dass du ihm sämtliche Namen der Haupt-IDs sowie der jeweiligen Untermenu-Ober-Elemente übergeben musst.
Musste das letztens für ein Projekt schreiben...
Beitrag zuletzt geändert: 6.10.2009 9:51:48 von evil-devil -
wielen dank evil-devil. wo muss ich denn die ids angeben? bin nich so fit in java
hier trotzdem nochma meine codes:
HTML Navi
<div id="naviinhalt"> <ul> <li><a href="index.html">Startseite</a></li> <li><a href="angebote.html">Angebote</a> <ul> <li><a href="treuebonus.html">Treuebonus</a></li> </ul> </li> <li><a href="galerie.html">Galerie</a></li> <li><a href="behandlungen.html">Behandlungen</a> <ul> <li><a href="bittebeachten.html">Bitte beachten!</a></li> <li><a href="produktpalette.html">Produktpalette</a></li> <li><a href="wasist.html">Was ist...?</a></li> </ul> </li> <li><a href="termin.html">Termin online buchen</a></li> <li><a href="shop.html">Onlineshop</a></li> <li><a href="#">Preise</a> <ul> <li><a href="preise_kosmetik.html">Kosmetik</a></li> <li><a href="preise_hand.html">Hand</a></li> <li><a href="preise_fuss.html">Fuß</a></li> </ul> </li> <li><a href="studio.html">Das Studio</a></li> <li><a href="referenzen.html">Referenzen</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </div>
und hier css:
ul { font-family:Helvetica,sans-serif; font-size:12px; color: #000000; text-align: left; text-decoration:none; border: 0; list-style: none; } ul li a:hover { color:#33aaa0; text-decoration:none; border: 0; } ul li ul li {display: none; text-decoration:none; border: 0; } ul li:hover ul li { display: block; font-size: 12px; text-decoration:none; border: 0; } ul li:active ul li { display: block; font-size: 12px; text-decoration:none; border: 0; } ul li:focus ul li { display: block; font-size: 12px; text-decoration:none; border: 0; }
So is momentan, bei hover öffnet sich das submenü. is aber zu hektisch wenn man die navi runterfährt, dann springt es ja auf, auch wenn man garnich die unternavi sehen will sondern den oberpunkt der darunter is. is also verwirrend.
probiert hab ichs dann so
ul { font-family:Helvetica,sans-serif; font-size:12px; color: #000000; text-align: left; text-decoration:none; border: 0; list-style: none; } ul li a:hover { color:#33aaa0; text-decoration:none; border: 0; } ul li ul li {display: none; text-decoration:none; border: 0; } ul li:active ul li { display: block; font-size: 12px; text-decoration:none; border: 0; } ul li ul li:active { display: block; font-size: 12px; text-decoration:none; border: 0; }
aber geht au net, es öffnet sich nun zwar bei klick, aber verschwindet sofort wieder. -
Zur Aufklärung:
:hover - Objekt beim darüberfahren mit der Maus
:visited - schon besuchter Link
:active - Objekt WÄHREND dem Klick mit der Maus
Mit der Funktion :active lässt sich nur beschreiben, wie ein Objekt sich verhalten (aussehen) soll, während man mit der Maus darauf klickt.
Man könnte es allerdings so machen, dass man die Unternavigation in eine Box steckt, und nur sichtbar macht wenn man mit der Maus auf die Box zeigt (:hover). Ich weiß aber nicht ob das so ne' gescheite Lösung ist.
Ich wüsste sonst nur wie man es mit PHP löst, falls dir das etwas hilft, dann muss man halt immer die Seite neu laden.
Das funktioniert mit Javascript oder Flash besser.
Mfg -
danke joi
di hover-lösung habe ich ja im moment. ist aber nicht so dolle, da wenn man einfach nur über die oberpunkte fahren will die unternavis jedesma ausklappen und da dann die obernavigationspunkte nach unten rutschen. wenn jetz einer auf den obernavipunk direkt unter so nem subnavibereich will is es total nervig.
darum such ich so ne "click" variante. bin hier auch schon fleißig am scripts testen aber irgendwie wills nich so hinhauen
von javascript hab ich leider so ziemlich null ahnung warum ich da nich viel rumprobieren kann außer fertige scripts kopieren und versuchen anzupassen, aber das klappt eben nich so.
oh man meine nerven liegen langsam blank, seit Tagen probier ich rum probiere zich scripts und nix funzt ich mach iwas falsch.
Kann mir vll die navi so wie ich es möchte in das bestehende html basteln - würde türlich auch bezahlen (darf man hier "jobs" vergeben?)
Beitrag zuletzt geändert: 6.10.2009 20:35:00 von f-bieberstein -
Ansonsten lad dir ne Testversion Flash runter, da gibt’s auf Youtube viel wirklich gute Tutorials für Untermenü-Lösungen.
Mit JS hab ich mich leider auch noch nicht viel beschäftigt.
Glg Joi -
danke für den tipp aber flash möcht ich nich anwenden, da doch einige den flashplayer nich haben oder nich aktuell etc. und wenn dann die navigation nich läuft is scheisse.
ich mein cih weiß javascript kann man auch ausschalten, aber ich denke das sind doch relativ wenige im gegesatz zu veralteten/nichtinstallierten flash-playern -
Moin.
Ja, Flash ist natürlich böse. Auf keinen Fall. Das kommt bei Google auch ganz schlecht an...
JS ist aushältlich, wenn's barrierefrei ist. Also müssen die Sub-Cats erstmal offen sein und erst durch JS manipuliert werden.
Mit CSS geht das auch. Man muss sich aber ein wenig drumrumschummeln. -
ja aber ich bekomms nicht gebacken*grmml*
wie gesagt, ich weiß nich ob "jobtickets" hier erlaubt sind?
Beitrag zuletzt geändert: 7.10.2009 0:02:44 von f-bieberstein -
f-bieberstein schrieb:
ja aber ich bekomms nicht gebacken*grmml*
wie gesagt, ich weiß nich ob "jobtickets" hier erlaubt sind?
sicher sind die erlaubt, warum sollten die auch verboten sein?
Wenn Dir also nicht schon mit der Antwort vor mir geholfen wurde , biete ich meine Dienste gerne an. -
ich hab ein script gefunden, was so einfach is das auch ich es einbinden konnte ohne es zu zerschießen=)
vielen dank staymyfriend!! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
