EventHandling: Anfänger Probleme OnMouseOver / OnMouseOut @ tutorials.de: Tutorials, Forum & Hilfe

deAndro · 26.11.11 19:03

Hi,

hau grad ein kleines Menü für das Ein- und Ausblenden ovn Submenüs bei einem DropDown Menü.

Das Einblenden klappt hervorragend, ausblenden auch. Aber ich komm natürlich bei folgendem Beispiel nicht an die SubMenü Einträge. Wie löst man so was sauber in JavaScript?

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
 
<style type="text/css">
<!--
#pageMainMenu 
{
    height: 33px;
    padding-left: 115px;
    background-image: url(cssDesignRoom/img/clsPageMainMenue.jpg);
    margin: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
#pageMainMenu .clsLeftMenu {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #000;
}
#pageMainMenu a {
    color: #CFC;
    text-decoration: none;
    font-weight: bold;
    line-height: 33px;
    height: 33px;
    display: block;
    float: left;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: #000;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
}
#pageMainMenu a:hover 
{
    color: #FF0;
    text-decoration: none;
    font-weight: bold;
    background-image: url(cssDesignRoom/img/clsPageMenuBar_Hover.jpg);
    line-height: 33px;
    height: 33px;
}
.clsPageSubMenu {
    margin: 5px;
    padding: 5px;
    border: 1px solid #CCC;
    display: inline;
    height: auto;
    position: absolute;
    z-index: 100;
    left: 139px;
    top: 50px;
}
.clsPageSubMenu a {
    display: block;
}
 
-->
</style>
 
<script type="text/javascript" language="javascript">
 
    function onLoad()
    {
        placeSubMenues();
    }
    
    function placeSubMenues()
    {
        var menuNode = document.getElementById('pageMainMenu').childNodes;
        var iEnd = menuNode.length;
        
        for(var i=0; i<iEnd; i++)
        {
            if( menuNode.item(i).className == "clsMainLeftMenuLink"  ||  menuNode.item(i).className == "clsMainMenuLink" )
            {
                var topPos = menuNode.item(i).offsetTop + document.getElementById("HomeMenu").offsetHeight -10;
                var leftPos = menuNode.item(i).offsetLeft;
                var itemIdent = menuNode.item(i).id;
                itemIdent += "Sub";
                document.getElementById(itemIdent).style.top = topPos+"px";
                document.getElementById(itemIdent).style.left = leftPos+"px";
                document.getElementById(itemIdent).style.visibility = "hidden";
            }
        }
    }
    
    function onMouseOverMainMenuLink(ElementId)
    {
        document.getElementById(ElementId+"Sub").style.visibility = "visible";
    }
    
    function onMouseOutMainMenuLink(ElementId)
    {
        document.getElementById(ElementId+"Sub").style.visibility = "hidden";
    }
    
</script>
</head>
 
<body onload="onLoad();">
 
<div id='pageMainMenu'>
    <a class='clsMainLeftMenuLink' id="HomeMenu" href="#1" onmouseover="onMouseOverMainMenuLink('HomeMenu');" 
        onmouseout="onMouseOutMainMenuLink('HomeMenu');">DropDown1</a>        
    <a class = 'clsMainMenuLink' id = "sndMenu" href="#2" onmouseover="onMouseOverMainMenuLink('sndMenu');" 
        onmouseout="onMouseOutMainMenuLink('sndMenu');">NormalLink1</a>
    <a class = 'clsMainMenuLink' id = "trdMenu" href="#3" onmouseover="onMouseOverMainMenuLink('trdMenu');" 
        onmouseout="onMouseOutMainMenuLink('trdMenu');">DropDown2</a>
    <a class = 'clsMainMenuLink' id = "frtMenu" href="#4" onmouseover="onMouseOverMainMenuLink(''frtMenu);" 
        onmouseout="onMouseOutMainMenuLink('frtMenu');">NormalLink2</a>
</div>
<div class='clsPageSubMenu' id='HomeMenuSub'><a href="#s1">ErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
<div class='clsPageSubMenu' id='sndMenuSub'><a href="#s1">xErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
<div class='clsPageSubMenu' id='trdMenuSub'><a href="#s1">yErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
<div class='clsPageSubMenu' id='frtMenuSub'><a href="#s1">zErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
 
</body>
</html>

***CPoly*** · 26.11.11 19:51

Wie bereits gestern (http://www.tutorials.de/javascript-a...ml#post1979050) folgender Hinweis:

Das geht auch ohne JavaScript und dein Markup ist nicht schön.

Beispiel: http://www.cssplay.co.uk/menus/basic-dropdown.html

deAndro · 27.11.11 05:25

Moin,

was ist an dem Markup nicht schön?
Das Beispiel aus Deinem Link ist auch mit JavaScript, wie es scheint.

LG deAndro

deAndro · 27.11.11 05:28

Sorry, Menu geht, auch wenn JavaScript gelöscht ist. Werde mir das mal ansehen.

deAndro · 27.11.11 05:30

Im Code steht:

Code :

1	.menu li.fly > a

Weist was das > a zu bedeuten hat?

edit:
Selber rausgefunden:
Bezieht sich auf Childs die direkt in diesem Tag stehen.

***CPoly*** · 27.11.11 09:55

Zitat von deAndro

was ist an dem Markup nicht schön?

Das beantworte ich dir mit einem Bild.

deAndro · 27.11.11 11:03

Zitat von CPoly

Das beantworte ich dir mit einem Bild.

Ah, OK, Stimmt. Nicht schön....
Wenns feddisch ist parsed PHP mir auch die Tabs...

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

onmouseover- onmouseout- Problem.

onMouseDown - onmouseover - onmouseout

Probleme mit OnMouseOut / OnMouseOver beim einblenden von Texten

onmouseover, onmouseout

onMouseOver & onMouseOut

E-Mail:

Abonnieren Abbestellen