learnMedlem sedan jan. 20051 130 inlägg 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 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 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 Föresten, vad är fördelen med <li>, kan jag inte skriva så här: getElementsByTagName('div')??
sl0kMedlem sedan maj 2005562 inlägg 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 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 learnMedlem sedan jan. 20051 130 inlägg 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 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 HEJ!
Har du varit inne på https://dynamicdrive.com och tittat?
De brukar ha en del också.
learnMedlem sedan jan. 20051 130 inlägg
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 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 aldrig testat ..
men
...
obj.onmouseover = funtction() { ; };
..
borde fungera.. lr helt enkelt
obj.onmouseover = "";
learnMedlem sedan jan. 20051 130 inlägg obj.onmouseover = "";
Funkar inte.
obj.onmouseover = function() { ; };
Verkar fungera, men det känns lite fel... Är det verkligen "rätt" sätt?
