Ausfahrbares Menu mit JavaScript
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auffahren
beispiel
code
display
eintragen
funktionieren
hauptproblem
helfen
kenntnis
machen
mode
navigation
parameter
point
problem
programm
punkt
scheitern
verlieren
zeile
-
Hi
Ich habe eine Menübar oben rechts und links daneben ein div, welches auffahren soll wenn man über einen der 4 Menüpunkte fährt und wieder winfahren soll, wenn man den Punkt mit der Maus verlässt.
html
<div id="navigation_info"> </div> <div id="navigation"> <img src="grafiken/nav_videos.png" alt="Videos" title="" id="navigation_videos" class="navigation" onmouseover="navigation_info(1,1)" onmouseout="navigation_info(0,1)"/> <img src="grafiken/nav_vote.png" alt="Vote" title="" id="navigation_vote" class="navigation" onmouseover="navigation_info(1,2)" onmouseout="navigation_info(0,2)"/> <img src="grafiken/nav_pages.png" alt="Pages" title="" id="navigation_pages" class="navigation" onmouseover="navigation_info(1,3)" onmouseout="navigation_info(0,3)"/> <img src="grafiken/nav_home.png" alt="Home" title="" id="navigation_home" class="navigation" onmouseover="navigation_info(1,4)" onmouseout="navigation_info(0,4)"/> </div>
dazu volgendes JS:
//Navigation_info function navigation_info(mode, point){ if(mode == 1){ document.getElementById('navigation_info').style.width = 0 + 'px'; } else if(mode == 0){ document.getElementById('navigation_info').style.width = 627 + 'px'; } ninf_scroll(mode); } function ninf_scroll(mode){ if((mode == 1) & (document.getElementById('navigation_info').offsetWidth < 640)){ if (document.getElementById('navigation').style.display != 'block'){ document.getElementById('navigation_info').style.display = 'block'; } document.getElementById('navigation_info').style.width = document.getElementById('navigation_info').offsetWidth + 20 + 'px'; window.setTimeout(function(){ninf_scroll(mode);},1); } else if((mode == 0) & (document.getElementById('navigation_info').offsetWidth > 0)){ document.getElementById('navigation_info').style.width = document.getElementById('navigation_info').offsetWidth - 20 + 'px'; window.setTimeout(function(){ninf_scroll(mode);},1); } else if(mode == 0){ alert(); document.getElementById('navigation_info').style.display = 'none'; } }
aber leider klappt das nicht, weil es vorkommt, das das div hin und her zittert, da in js ja eine funktion mehrmals aufgerufen werden kann und so gegeneinander spielen kann. Ich habe jetzt schon einiges versucht, hat aber alles nicht geholfen bzw nur noch mehr Probleme bereitet. Ich hoffe ihr könnt mir helfen!
vielen Dank und MVG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mal wieder ein recht simples Problem, an dem aber viele scheitern, oft weil sie die Übersicht über ihr "Programm" verlieren, aber naja, ich habe dir mal eine Lösung geschrieben, die eigentlich funktionieren sollte, ich hab sie nicht getestet, aber ich vertrau da auf meine Kenntnisse, allerdings musst du dafür deinen HTML-Sourcecode etwas aufräumen, nimm einfach die onmouseover- und ounmouseoutattribute raus, denn das JS macht das von alleine, außerdem ist in deinem Beispiel ein "point" definiert, mit dem ich nichts anfangen konnte, aber ich hab ihn mal mit reingenommen, auch wenn dadurch das Script 3 Zeilen mehr braucht.
So jetzt habe ich lang genug beschrieben, wie ich mit deiner problembeschreibung umgegangen bin, hier also der Code:
ich hoffe doch sehr dass ich damit helfen konnte, ansonsten frag mich einfach nochmal, es steht ja auch in der Signatur weshalb.(function(){ var stepLength = 20, maxHeight = 640, speed = 1, // setTimeout-time in msec! navId = 'navigation', navInfoId = navId+'_info', $ = function(s){return window.document.getElementById(s);}, img = $('navigation').getElementsByTagName('img'), i = img.length, doOpen = false, height = 0, scroll = function(point){ if(point){ // Hier eintragen, was gemacht werden soll. // Das lasse ich leer, weil du es in deinem Beispiel hast, // aber nicht nutzt! } $(navInfoId).style.height = (height += stepLength * (doOpen ? 1 : -1))+'px'; if(height > 0 && height < maxHeight) window.setTimeout(scroll, 1); } for(;i--;){ (function(i){ img[i].onmouseover = function(){doOpen = true; scroll(i)}; img[i].onmouseout = function(){doOpen = false; scroll(i)}; })(i) } })() -
Dafür könntest du auch jQuery verwenden, dann brauchst du das ganze nicht selber basteln.
Schau dir jQuery mal an!
-
Hi
vielen vielen Dank erstmal! Dass ich die mouseovers und outs rauslassenkann ist super. Ich wusste das das geht, aber nicht wie ;)
Aber zum Hauptproblem. Ich habe jetzt mal deinen Code in eine JS datei gepackt und eingebunden und auch den html code angepasst.
doch leider bekomme ich im FF folgenden Fehler:
.$("Navigation") idt null
Ich mache javascript nur so nebensächlich und kenne mich daher auch nur oberflächlich aus. Deshalb wäre es bett wen du mir schnell erklären könntest wo der Fehler ist, und was as eigentlich machen soll... dann kann ichs nächstemal nähmlich ;)
Vielen Dank nochmal und MVG
wegen jquery:
das hab ich mir schon ein paar mal angeschaut und auch genutzt... ich habe mich aber jetzt noch nie soo intensiv damit beschäftigt, weil ich einfach noch kein gutes Tutorial dazu gefunden habe...
Beitrag zuletzt geändert: 18.5.2010 15:28:45 von programtools -
Hallo,
sowas kann man auch ganz ohne Javascript machen. Ist vielleicht besser, weil es immer noch Leute gibt, die Javascript deaktivieren.
<style type="text/css"> ul, li { margin:0; padding:0; list-style-type:none; } ul#navi a { padding:2px 10px; display:block; } ul#navi li { float:left; border:1px solid #000; } ul#navi ul { display:none; position:absolute; border:1px solid #000; } ul#navi li:hover ul { display:block; } ul#navi ul li { border:0 none; float:none; } </style> <ul id="navi"> <li> <a href="#">navi 1</a> <ul> <li><a href="#">subnavi 1</a></li> <li><a href="#">subnavi 2</a></li> <li><a href="#">subnavi 3</a></li> </ul> </li> <li><a href="#">navi 2</a></li> <li> <a href="#">navi 3</a> <ul> <li><a href="#">subnavi 1</a></li> <li><a href="#">subnavi 2</a></li> </ul> </li> </ul> -
sry aber ich verstehe nicht, wieso das Div navigation_info jetzt ausfährt, wenn ich über einen der Navigationspunkte fahre
und auch noch zum Hauptproblem: der Parameter point, sollte immer den Navigationspunkt enthalten. Kann ich wenn ich kein mouseover /out nutze, auch den aktuellen navigationspoint herausfinden??
MVG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
