Sub-Menüs rechtsbündig ausrichten

P

PaulKik

Grünschnabel
Hallo,

vor kurzem bin ich auf das geschlossene Thema http://www.tutorials.de/javascript-ajax/131875-javascript-menue.html gestoßen und habe dabei das Menü von Sven gefunden. In der Hoffnung, dass auch ich das Menü nutzen darf, habe ich dieses auf meine Bedürfnisse angepasst (z.B. Grafiken anstatt Textinhalt in den Tabs etc.). Des Weiteren habe ich das gesamte Menü in einen übergeordneten Div gepackt, damit ich es über "position:absolute; top:142px; right:4px;" rechtsbündig ausrichten konnte (hat auch alles geklappt). Da ich aber nun ein Sub auf 5 Spalten erweitert habe, verrutscht mir alles. Das heißt, bis zum ersten aktivieren steht das Menü nicht mehr rechtsbündig (right:4px) und beim anzeigen des Subs rutscht das Sub über den rechten Rand des übergeordneten Divs hinaus. Weiterhin ragt (nur bei diesem Sub) die erste Tabellenzelle (Inhalt der Zellen der oberen Zeile ist jeweils eine Grafik mit den Maßen 130x90px) deutlich nach oben über das gesamte Menü hinaus. Als Lösungsansatz hatte ich mir gedacht, dass ich die Subs nicht mehr linksbündig ausrichte, sondern ebenfalls rechtsbündig, sodass sie sich nach links ausstrecken. Dieses würde auch nicht auffallen, da die Subs alle die gleiche Größe haben (ausgenommen das 5-spaltige Sub) wie die Menüüberpunkte. Da ich dieses nicht hinbekommen habe, muss ich Euch um Hilfe bitten.

Vielen DANK vorab.



HTML: 
<html>
<head>

<script type="text/javascript">
<!-- 
 
//Korrektur der Submenu-Position
intXPadding = 0;
intYPadding = -4;
 
//Zeit bis zum Schliessen(ms)
intTimeout = 50;
 
//hier werden später die Timeouts gespeichert... jeweils separat für jedes Submenu
arrTimeouts = new Array();
 
/**
* liefert beim Initialisieren des Menues zum jeweiligen Hauptmenupunkt 
* die passende Tabbelle
* objMenu=Elternknoten der Hauptmenu-Tabelle
* intSub=Index des Menupunktes
**/
 
function get_sub(objMenu, intSub)
{
intTable =- 1;
 
for(j = 0; j < objMenu.childNodes.length; ++j)
{
intTable += (objMenu.childNodes[j].tagName=='TABLE') ? 1 : 0;
 
if(intTable==intSub)
{
return(objMenu.childNodes[j]);
} 
arrTimeouts.push(false);
}
return false;
}
 
 
/**
* Initialisiert das Menu beim ersten mouseover der Hauptmenupunkte-Tabelle
* ansonsten anzeigen/verstecken der jeweiligen Submenu-Tabelle
* objElem = (erster Aufruf)?Hauptmenupunktabelle:Index Menupunkt
* blnEvt = (!erster Aufruf)?(over=1||out=0):nix;
**/
 
 
function menu(objElem, blnEvt)
{
 
//initalisieren de Menues beim ersten Aufruf
if(arrTimeouts.length == 0)
{
objElem.onmouseover = new Function('f','return false');
objMenu = objElem.parentNode;
 
for(i = 0; i < objElem.rows[0].cells.length; ++i)
{
objCell = objElem.rows[0].cells[i];
objCell.onmouseover = new Function('f', 'menu('+i+', 1)');
objCell.onmouseout = new Function('f',' menu('+i+', 0)');
objSub = get_sub(objMenu, i+1);
objSub.style.position = 'absolute';
objSub.style.left = intXPadding + 
(objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft));
objSub.style.top = intYPadding +
objCell.offsetHeight +
(objCell.offsetTop + (objSub.offsetTop - objSub.rows[0].cells[0].offsetHeight));
objSub.id = 'sub'+i;
objSub.width = 1; //fixt opera-Macke mit Tabellenbreite
objSub.onclick = new Function('f', 'this.style.visibility = "hidden"');
objSub.onmouseover = new Function('f', 'menu('+i+', 1)');
objSub.onmouseout = new Function('f', 'menu('+i+', 0)');
objSub.className = 'sub';
}
return;
}
 
//Zeigen
if(blnEvt)
{
clearTimeout(arrTimeouts[objElem]);
document.getElementById('sub'+objElem).style.visibility = "visible";
}
//Verstecken
else
{
arrTimeouts[objElem] = setTimeout('document.getElementById("sub'+objElem+'").style.visibility="hidden"', intTimeout);
}
 
}
//-->
</script>


<style type="text/css">
<!--
body {margin: 0 0 0 0;}
#mittig {position: absolute;
width: 1000px;
height: 350px;
left: 50%;
top: 20px;
margin-left: -500px;
margin-top: 0px;
border:solid 0px #ffffff;
}
-->
</style>


<title>Testseite</title>

</head>


<body background="higru.jpg">

<div id="mittig">


<div align="center"><center>
<table border="4" cellpadding="0" cellspacing="0" width="1000" bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF">
    <tr>
        <td><table border="0" cellpadding="0" cellspacing="0" width="1000">
            <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" width="1000" height="140" background="1024-140.jpg">
                    <tr>
                        <td></td>
                    </tr>
                </table>
                
                </td>
            </tr>
            <tr>
                <td>


<div align="center"><center>



<table border="0" cellpadding="0" cellspacing="0" width="1000" height="20" bgcolor="#000000">
                    <tr>

<td>

<!-- 
*alle Menutabellen(und nur diese) in einem div verpacken 
*erste Tabelle für Hauptmenupunkt
*für jeden Hauptmenupunkt eine weitere Tabelle mit Submenu
*für leeren Hauptmenupunkt siehe 4. Tabelle
*in erste Tabelle [onmouseover="menu(this)"]
*andere Tabellen [style="visibility:hidden"]
*der Klassenname des div's ist nur für Gestaltung per CSS von Interesse
*die Submenue-Tabellen erhalten vom Skript den Klassennamen "sub"(auch zwecks Gestaltung) 
-->


<div style="position:absolute; top:142px; right:4px;" class="menu">
  <table onmouseover="menu(this)">



<tr>
<td style="width: 105" border="0" cellpadding="0" cellspacing="1" background="home.jpg" border="0" width="130" height="20"><a href="home.html"></a></td>
<td style="width: 130" border="0" cellpadding="0" cellspacing="1" background="sub1.jpg" border="0" width="130" height="20"><a href="java.html"></a></td>
<td style="width: 130" border="0" cellpadding="0" cellspacing="1" background="sub2.jpg" border="0" width="130" height="20"><a href="java.html"></a></td>
<td style="width: 130" border="0" cellpadding="0" cellspacing="1" background="sub3.jpg" border="0" width="130" height="20"><a href="java.html"></a></td>

</tr>
</table>


<table style="display:none">
    <tr><td></td></tr>
  </table>


<table style="width: 130; visibility:hidden">
<tr><td><a href="#">Test_1</a></td></tr>
<tr><td><a href="#">Test_2</a></td></tr>
<tr><td><a href="#">Test_3</a></td></tr>
<tr><td><a href="#">Test_4</a></td></tr>

</table>


<table style="width: 130; visibility:hidden">
<tr><td><a href="#">Test_1</a></td></tr>
<tr><td><a href="#">Test_2</a></td></tr>
<tr><td><a href="#">Test_3</a></td></tr>
<tr><td><a href="#">Test_4</a></td></tr>

</table>


<table border="0" cellpadding="0" cellspacing="2" style="width: 650; visibility:hidden">
<tr>
        <td><p align="center"><img src="mi1.jpg" align="top" width="130" height="93"></p>
        </td>
        <td><p align="center"><img src="mi2.jpg" width="130" height="93"></p>
        </td>
        <td><p align="center"><img src="mi3.jpg" width="130" height="93"></p>
        </td>
        <td><p align="center"><img src="mi4.jpg" width="130" height="93"></p>
        </td>
        <td><p align="center"><img src="mi5.jpg" width="130" height="93"></p>
        </td>
    </tr>
    <tr>
        <td><a href="#">Test_1</a></td>
        <td><a href="#">Test_2</a></td>
        <td><a href="#">Test_3</a></td>
        <td><a href="#">Test_4</a></td>
        <td><a href="#">Test_5</a></td>
    </tr>
    <tr>
        <td><a href="#">Test_1a</a></td>
        <td><a href="#">Test_2a</a></td>
        <td><a href="#">Test_3a</a></td>
        <td><a href="#">Test_4a</a></td>
        <td><a href="#">Test_5a</a></td>
    </tr>
    <tr>
        <td><a href="#">Test_1b</a></td>
        <td><a href="#">Test_2b</a></td>
        <td><a href="#">Test_3b</a></td>
        <td><a href="#">Test_4b</a></td>
        <td><a href="#">Test_5b</a></td>
    </tr>
    <tr>
        <td colspan="5"><p align="center"><a href="#">Wunsch</a></p>
        </td>
    </tr>

</table>

</div>

</td>
                    </tr>


</center></div>


                </table>
                </td>
            </tr>
            <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" width="1000" height="15">
                    <tr>
                        <td>PLATZHALERTAB 15px hoch</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td><table border="0" cellpadding="0" cellspacing="1" width="1000">
                    <tr>
                        <td width="*">&nbsp;</td>
                        <td align="center"><img src="startbild.jpg" width="985" height="400"></td>
                        <td width="*">&nbsp;</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" width="1000" height="15">
                    <tr>
                        <td>15px hoch</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td>NOCH KEIN INHALT</td>
            </tr>
        </table>
        </td>
    </tr>
</table>
</center></div>

</div>
</body>
</html>
 
In deinem schliessenden [/code]-Tag fehlt der Slash ;)

Seitennavigationen, die Untermenüebenen enthalten, werden heutzutage mit Listenelementen erzeugt, und bedürfen keines Javascripts, um die Submenüs einzublenden. Dies regelt alles CSS :)


Die Tabellen, die innerhalb dieser Menüs zum Einsatz kommen, sind lediglich den älteren IE-Versionen (bis einschließlich 6) gewidmet, die die allg. Pseudoklasse :hover für das <li>-Element nicht interpretieren, die zum Anzeigen der versteckten Menüebenen genutzt wird, und ersetzen hier die bekannten JS-Lösungen, die ansonsten für diese IE-Versionen vonnöten wären, damit in ihnen das Menü störungsfrei funktioniert - siehe als Gegenbeispiel Son of Suckerfish Dropdowns, wo dem IE5/6 mit JS Nachhilfe geleistet wird.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück