Hjälp med dynamisk meny.

dahlgren79Medlem sedan jan. 20042 inlägg

Frågan31 jan. 2004 00:53#1

Hittade ett menyexempel på en sida, men jag undrar om det går att modifiera detta lite? http://w1.510.telia.com/~u51010287/meny.html

1. Går det att få en underline på menyalternativen när man för musen över textraderna?

2. Går det att byta ut textraderna till bilder istället. Lägga bild med onmouseover-funktion på 1:a menyalternativen (avdelning 1, 2 o.s.v)
Funkar det med detta scriptet?

Tänk er menyn på denna sidan,
http://home.swipnet.se/folkesson/priser.htm fast med textbaserade undermenyer med "underline on hover"....en sån meny vill jag ha. :)

Jättetacksam om ni skulle vilja hjälpa mej med detta.

Peter SMedlem sedan dec. 20025 483 inlägg

1 feb. 2004 19:28#2

Hej och välkommen till webForum!

Exempel:

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">

#menu{
    font: small verdana;
}

#menu ul{
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
}

#menu ul li a{
    text-decoration: none;
}

#menu ul li a:hover{
    text-decoration: underline;
}

</style>

<script type="text/javascript">

var imgArr = [
    "mo_r.gif",
    "ha_r.gif",
    "ny_r.gif",
    "pr_r.gif",
    "ro_r.gif",
    "mo.gif",
    "ha.gif",
    "ny.gif",
    "ro.gif"
], aLen = imgArr.length;

while ( aLen-->0 ) ( new Image() ).src = imgArr[aLen];

function fnShowHide(obj) {
    if ( typeof obj.nextSibling == "undefined" || typeof obj.nodeName == "undefined" )
	location.href = obj.href;

    var elm = null;
    while ( (elm = obj.nextSibling).nodeName != "UL" )
	obj = obj.nextSibling;

    elm.style.display = ( elm.style.display == "block" ) ? "none" : "block";

    return false;
}

function fnMouseEffect(obj, img) {
    if ( typeof obj.childNodes != "object" ) return;

    var elm = null, iLen = obj.childNodes.length;
    while ( (elm = obj.childNodes[ --iLen ]).nodeName != "IMG" );

    if ( !elm ) return;

    elm.src = img;
}

</script>

</head>

<div id="menu">
    <a href="avdelning1.html" onmouseover="fnMouseEffect( this, 'mo_r.gif' )" onmouseout="fnMouseEffect( this, 'mo.gif' )" onclick="return fnShowHide( this )"><img src="mo.gif" height="15" width="104" border="0" alt="Avdelning 1"></a><br>

    <ul>
	<li><a href="">Länk 1</a></li>
    	<li><a href="">Länk 2</a></li>
    	<li><a href="">Länk 3</a></li>
    </ul>
    <a href="avdelning2.html" onmouseover="fnMouseEffect( this, 'ha_r.gif' )" onmouseout="fnMouseEffect( this, 'ha.gif' )" onclick="return fnShowHide( this )"><img src="ha.gif" height="15" width="104" border="0" alt="Avdelning 2"></a><br>
    <ul>

	<li><a href="">Länk 1</a></li>
    	<li><a href="">Länk 2</a></li>
    	<li><a href="">Länk 3</a></li>
    </ul>
    <a href="avdelning3.html" onmouseover="fnMouseEffect( this, 'ny_r.gif' )" onmouseout="fnMouseEffect( this, 'ny.gif' )" onclick="return fnShowHide( this )"><img src="ny.gif" height="15" width="104" border="0" alt="Avdelning 3"></a><br>
    <ul>
	<li><a href="">Länk 1</a></li>

    	<li><a href="">Länk 2</a></li>
    	<li><a href="">Länk 3</a></li>
    </ul>
    <a href="avdelning4.html"><img src="pr_r.gif" height="15" width="104" border="0" alt="Avdelning 4"></a><br>
    <a href="avdelning5.html" onmouseover="fnMouseEffect( this, 'ro_r.gif' )" onmouseout="fnMouseEffect( this, 'ro.gif' )" onclick="return fnShowHide( this )"><img src="ro.gif" height="15" width="104" border="0" alt="Avdelning 5"></a><br>
    <ul>
	<li><a href="">Länk 1</a></li>

    	<li><a href="">Länk 2</a></li>
    	<li><a href="">Länk 3</a></li>
    </ul>
</div>
<div>-------------------------------------------------------</div>

dahlgren79Medlem sedan jan. 20042 inlägg

2 feb. 2004 13:34#3

Du är ju helt underbar.... TACK !!! :)

nitro2k01Medlem sedan aug. 20039 340 inlägg

2 feb. 2004 15:31#4

Jag säger också välkommen. Som ny medlem på wF kan jag tipsa om funktionen "acceptera som slutgiltigt svar" som finns bredvid varje svar och gör det lätt för andra att se om frågan har fått en lösning. Och ha en bra dag! ;)

dectgapMedlem sedan sep. 20021 655 inlägg

2 feb. 2004 17:53#5

Ett litet tips, dahlgren79:
Det är Peter S' svar som innehåller lösningen och som därför ska markeras som accepterat svar ;)