kostenloser Webspace werbefrei: lima-city


:active fehlerhaft?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. c****s

    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
  4. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    danke, das habe ich bei selfhtml auch gefunden.

    aber es geht ja um firefox?

    Die notierung habe ich insofern eingehalten, das ich hover weggelassen habe. oder is das vll der knackpunkt, das hover dabei stehen muss, abe rmit display: none;?

  5. w******s

    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?
  6. e********l

    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
  7. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    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&szlig;</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.
  8. 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
  9. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    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
  10. 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
  11. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    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
  12. 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.
  13. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    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
  14. 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.
  15. Autor dieses Themas

    f-bieberstein

    f-bieberstein hat kostenlosen Webspace.

    ich hab ein script gefunden, was so einfach is das auch ich es einbinden konnte ohne es zu zerschießen=)

    vielen dank staymyfriend!!
  16. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!