Avatar billede rane Nybegynder
11. december 2007 - 10:09 Der er 6 kommentarer og
1 løsning

Dropdown onmouseover

Heya,

er igang med et projekt hvor jeg får brug for en meget simpel dropdown topmenu:

1. Hovedpunkterne skal være grafikker og udskiftes med et andet billede onmouseover samtidig med at undermenuen vises nedenunder. Den "aktive" hovedpunkt grafik skal fortsætte med at være aktiv mens man browser gennem submenuen - så snart man flytter musen væk fra sub- eller hovedmenu, så nulstilles grafikken igen.

2. Submenuen skal bare være en div som skal kunne placeres nedenunder hovedpunktet som jeg så selv kan definere med 80% transparency osv.

I bund og grund vel en almindelig show/hide, men med den forskel at det aktive hovedmenupunkt (som er grafik)...skal forblive aktivt indtil man flytter musen væk.

Menuen skulle helst ikke have nogen delays men virke smooth og hurtig hvis det kan lade sig gøre.  Nogen der kan hjælpe? :)
Avatar billede w13 Novice
11. december 2007 - 18:31 #1
Evt. således:
----------------------------------------------------------
<script type="text/javascript">
function ToggleMenu(o,img,id){
  id=document.getElementById(id);
  id.style.top=o.offsetTop+"px";
  id.style.left=o.offsetLeft+"px";
  id.style.display=id.style.display==""?"none":"";
  o.setAttribute("src",img)
}
</script>

<img src="noget1.gif" onmouseover="ToggleMenu(this,'noget2.gif','menu1')" onmouseout="ToggleMenu(this,'noget1.gif','menu1')">

<div id="menu1" style="position:absolute;display:none">Menu1<br>
Menu2</div>
----------------------------------------------------------
Det er dog helt utestet, så nu håber jeg, der ikke er nogle fejl i. Ellers har jeg en fuldt fungerende kode derhjemme, men jeg er lige på job pt.
Avatar billede rane Nybegynder
11. december 2007 - 20:25 #2
Koden virker umiddelbart, men tager desværre ikke højde for når man bevæger musen fra billedet og ned på menu1....lige nu forsvinder menu1 og billedet går tilbage til noget1.gif desværre. :(
Avatar billede w13 Novice
11. december 2007 - 21:54 #3
Hvad hvis du lægger samme onmouseocer og -out på div'en?
Avatar billede rane Nybegynder
11. december 2007 - 22:05 #4
Umiddelbart det samme. Men nu placerer den også menu1 et par pixels under billedet...men synes ellers jeg er hurtigt nede med musen på undermenuen
Avatar billede w13 Novice
11. december 2007 - 23:06 #5
Her er min originale kode:
----------------------------------------------
<html>
<head>
<script type="text/javascript">
var menunormalcolor="";
var menuhovercolor="#c0c0c0";

function ShowSubmenu(elm,submenu){
    elm.style.backgroundColor=menuhovercolor;
    if(submenu=document.getElementById(submenu)){
        submenu.style.top=elm.offsetTop+elm.offsetHeight;
        submenu.style.left=elm.offsetLeft;
        submenu.style.display="inline";
    }
}
function HideSubmenu(elm,submenu){
    elm.style.backgroundColor=menunormalcolor;
    if(submenu=document.getElementById(submenu)) submenu.style.display="none";
}
</script>
</head>
<body>

<span onmouseover="ShowSubmenu(this)" onmouseout="HideSubmenu(this)">Forside</span>
<span onmouseover="ShowSubmenu(this,'submenu_andet')" onmouseout="HideSubmenu(this,'submenu_andet')">Andet</span>
<span onmouseover="ShowSubmenu(this,'submenu_mere')" onmouseout="HideSubmenu(this,'submenu_mere')">Og mere til</span>

<div id="submenu_andet" style="position:absolute;display:none;border:1px solid #000000;padding:10px">Hej<br>Test<br>Test2</div>

<div id="submenu_mere" style="position:absolute;display:none;border:1px solid #000000;padding:10px">Hello<br>Goodbye<br>Farewell</div>

</body>
</html>
Avatar billede rane Nybegynder
12. december 2007 - 09:20 #6
Fin kode. Men den fjerner bare submenuerne igen når man prøver at gå ned for at vælge et undermenupunkt. Det gør den både i IE og FF her :(
Avatar billede rane Nybegynder
21. december 2007 - 11:30 #7
Nå jeg fandt en anden løsning andetsteds. Ellers tak for forsøget :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester