CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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? :)

Synes godt om

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.

Synes godt om

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. :(

Synes godt om

w13 Novice

11. december 2007 - 21:54 #3

Hvad hvis du lægger samme onmouseocer og -out på div'en?

Synes godt om

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

Synes godt om

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>

Synes godt om

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 :(

Synes godt om

rane Nybegynder

21. december 2007 - 11:30 #7

Nå jeg fandt en anden løsning andetsteds. Ellers tak for forsøget :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS