Meny - funderingar kring onMouseOver osv...

13 svar · 401 visningar · startad av learn 14 feb. 2006

learnMedlem sedan jan. 20051 130 inlägg

Frågan14 feb. 2006 09:43#1

Om man skall göra en enkel meny där bilden/knappen skall bytas ut vid onMouseOver så finns det ju en hel uppsjö med olika skript att välja mellan, många är långa och avancerade. Men i ärlighetens namn, är det inte enklast att bara göra typ så här:

Menyelement:

<div id="meny1" onMouseOver="menyOver('meny1')" onMouseOut="menyOut('meny1')"><a href="hejhej">Länk</a></div>

Funktionerna:

function menyOver (obj) {
 document.getElementById(obj).style.backgroundImage='url(menyover.gif)';
}

function menyOut (obj) {
 document.getElementById(obj).style.backgroundImage='url(menyout.gif)';
}

Nu vill jag veta alla (väsentliga) för- och nackdelar. Är ovan beskrivna exempel ett säkert sätt som fungerar oberoende av webbläsare osv??

sl0kMedlem sedan maj 2005562 inlägg

14 feb. 2006 11:26#2

det bör fungera i de flesta webbläsare.
dock kan det bli lite mycket att skriva in för varje länk, speciellt om du har många länkar
enligt rekommendationer ska man använda <li> till menyer..

ett ex med <li>.. du behöver bara lägga till fler <li> för fler menyalternativ.. javascriptet fixar med onmouseover
på så sätt kan man även separera javascript, css och html mer

<head>
<style type="text/css">
ul.meny { margin:0; padding:0; list-style:none; }
ul.meny li { background-image: url('meny_out.gif'); }
</style>
<script type="text/javascript">
function fixaMeny() {
	var meny = document.getElementsByTagName('li');
	for (i=0;i<meny.length;i++) {
		meny[i].onmouseover = function(){this.style.backgroundImage="url('meny_over.gif')";};
		meny[i].onmouseout = function(){this.style.backgroundImage="url('meny_out.gif')";};
	}
}

window.onload=fixaMeny;
</script></head>
  <body>
	<ul class="meny">
	<li><a href="http://www.sida1.se">sida1</a></li>
	<li><a href="http://www.sida2.se">sida2</a></li>

	<li><a href="http://www.sida3.se">sida3</a></li>
	</ul>
  </body>

learnMedlem sedan jan. 20051 130 inlägg

14 feb. 2006 11:56#3

Aha, smart. Ska kika på det! Hur är det med laddningstiden då, finns det risk att hover-effekten blir seg??

learnMedlem sedan jan. 20051 130 inlägg

14 feb. 2006 11:58#4

Föresten, vad är fördelen med <li>, kan jag inte skriva så här: getElementsByTagName('div')??

sl0kMedlem sedan maj 2005562 inlägg

14 feb. 2006 12:08#5

jo det kan du .. men <li> är rekommenderat till menyer.. hittar ingen referenssida just nu men kika på ex https://www.alistapart.com

tror inte det blir nån laddningstid.. när sidan laddats klart lägger skriptet på onmouseover objekten på element, precis som om de hade legat där från början, dock blir htmlstrukturen betydligt renare så här

EDIT: finns inga nackdelar med att använda <li> till menyer.. kika ex på
http://www.alistapart.com/articles/dropdowns
http://www.htmldog.com/articles/suckerfish/example/

learnMedlem sedan jan. 20051 130 inlägg

14 feb. 2006 12:45#6

Schyssta exempel! Finns det något exempel på hur man gör en dropdownmeny vertikalt. Alltså en "expanderbar" meny uppbyggd på samma sätt med <li> och <ul>.

sl0kMedlem sedan maj 2005562 inlägg

14 feb. 2006 13:59#7

ja .. leta lite på alistapart.com finns massor av artiklar där

http://www.alistapart.com/d/horizdropdowns/horizontal2.htm
http://www.alistapart.com/articles/horizdropdowns/

learnMedlem sedan jan. 20051 130 inlägg

14 feb. 2006 14:14#8

Hmm, ja det är ju en variant, men jag vill alltså ha en expanderbar meny, där man klickar på ett menyelement så visas dess undersidor under. När man sedan klickar på ett annat så "stängs" det föregående osv... Man ska även kunna klicka på samma igen för att stänga. Hittade själv inget sådant på ALA... Hjälp

learnMedlem sedan jan. 20051 130 inlägg

14 feb. 2006 15:06#9

Någon som har tips på vart jag kan hitta ett exempel på en expanderbar meny? Jag har sökt runt överallt känns det som och allt jag hittar är fula DHTML-menyer. Jag vill ha en enkel och funktionell, gärna uppbyggd mha <ul> och <li>....

Tack på förhand!

J.N.Medlem sedan apr. 20031 660 inlägg

14 feb. 2006 16:40#10

HEJ!

Har du varit inne på https://dynamicdrive.com och tittat?

De brukar ha en del också.

learnMedlem sedan jan. 20051 130 inlägg

14 feb. 2006 18:13#11

J.N. skrev:

HEJ!

Har du varit inne på https://dynamicdrive.com och tittat?

De brukar ha en del också.

Hittade inget där heller, mest en massa oskönt DHTML. Jag vill ha en plain CSS-modell (+ JS-kod om så behövs)... Någon??

learnMedlem sedan jan. 20051 130 inlägg

15 feb. 2006 16:16#12

Hur gör man för att ta bort onMouseOver-funktionen på ett objekt?

function fixaMeny() {
	var meny = document.getElementsByTagName('li');
	for (i=0;i<meny.length;i++) {
		meny[i].onmouseover = function(){this.style.backgroundImage="url('meny_over.gif')";};
		meny[i].onmouseout = function(){this.style.backgroundImage="url('meny_out.gif')";};
	}
}

sl0kMedlem sedan maj 2005562 inlägg

15 feb. 2006 16:33#13

aldrig testat ..
men

...
obj.onmouseover = funtction() { ; };
..

borde fungera.. lr helt enkelt
obj.onmouseover = "";

learnMedlem sedan jan. 20051 130 inlägg

15 feb. 2006 16:48#14

obj.onmouseover = "";

Funkar inte.

obj.onmouseover = function() { ; };

Verkar fungera, men det känns lite fel... Är det verkligen "rätt" sätt?