nicht angemeldet
DHTML Menü
0 unfassbar...
0 0 0 0
DHTML Menü
Moin moin,
ich hätte da gern mal ein Problem
Ich bin dabei eine neue Menüführung auf eine Page zu basteln.
So solls sein:
* Menüleiste mit den Top-Level Menüeinträgen (TLM)
* onmouseover (onmouseout) Event zum aufklappen der Second-Level Menüs (SLM)
Bin ja eigentlich schon ziemlich weit, allerdings hat das Menü nach jetzigem Stand zwei grössere Schönheitsfehler.
Wenn mir dabei jemand helfen könnte -- wäre super.
Problem 1:
Die Second-Level Menüs befinden sich in der gleichen Tabellenzelle wie der Top-Level Eintrag. Das hat den Nachteil, das wenn die Einträge der SLM breiter sind wie die festgelegte Zellenbreite der TLM-Einträge sich das Tabellenlayout verschiebt (sieht ehlich gesagt doof aus). Ich habe ein Tabellenlayout für das TLM gewählt, um besseren Einfluss auf gleiche Abstände der Menüeinträge zu haben)
So hätte ich es gern:
Die SLM sollen an der linken unteren Ecke des TLM-Eintrages aufklappen. Die Breite des SLM soll unabhängig von der Breite des TLM-Eintrages nach rechts expandieren, ohne das sich die TLM-Einträge verschieben.
Problem 2:
Wenn mir meine SLM's aufklappen, verschiebt sich entsprechend um die Höhe des aufgeklappten Menüblocks der Rest der Seite nach unten. Ich hätte aber gern das sich die SLM-Blöcke ÜBER den Rest der Seite legen, sich also nichts mehr nach unten verschiebt.
Hab da ein Menü gefunden, das genau diese zwei angesprochenen Punkte realisiert hat (das Hauptmenü der Seite, nicht das Codebeispiel):
Hier mal der abstrahierte Code meiner Seite mit dem Menü (der komplette quelltext):
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>test</title>
<style type="text/css">
.bereich{
display: block;
color: #FFFFFF;
background-color: #330000;
text-align: center;
font-family: Arial;
font-size: 10px;
text-decoration: None;
width: 95px;
height: 20px;
}
a.link{
display: block;
color: #FFD700;
font-family: Arial;
font-size: 10px;
text-decoration: None;
border-bottom: solid 1px #FFFFFF;
width: 120px;
height: 20px;
}
a.link.bereich{
display: block;
background-color: #330000;
}
a.link:hover{
display: block;
color: #000000;
background-color: #FFD700;
}
</style>
</head>
<body bgcolor="#000000" link="#ffffff" vlink="#ffffff" alink="#ffffff" text="#ffffff">
<script type='text/javascript'>
function anzeigen(das){
if(document.getElementById(das).style.display=='none')
document.getElementById(das).style.display='block';
else document.getElementById(das).style.display='none';}
</script>
<table cellPadding=0 cellSpacing=0 align=center>
<tr>
<td valign=middle style="vertical-align: top">
<div class="bereich" onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')">
<a href="" class="bereich">TLM-Eintrag 01</a>
<span id="menue#1" style="DISPLAY: none"></span></div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#2')" onMouseout="anzeigen('menue#2')">
<a href="" class="bereich">TLM-Eintrag 02</a>
<span id="menue#2" style="DISPLAY: none">
<a href="" class="link">SLM-Eintrag 01</a>
<a href="" class="link">SLM-Eintrag 02</a>
</span>
</div>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#5')" onMouseout="anzeigen('menue#5')">
<a href="" class="bereich">TLM-Eintrag 03</a>
<span id="menue#5" style="DISPLAY: none">
<a href="" class="link">SLM-Eintrag 01</a>
<a href="" class="link">verschiebtimmerwegenÜberbreitedasTLM</a>
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#6')" onMouseout="anzeigen('menue#6')">
<a href="" class="bereich">TLM-Eintrag 04</a>
<span id="menue#6" style="DISPLAY: none">
<a href="" class="link">SLM-Eintrag 02</a>
<a href="" class="link">SLM-Eintrag 03</a>
<a href="" class="link">SLM-Eintrag 04</a>
</span>
</div>
</tr>
</table>
<p align="center">dieser Text sollte beim aufklappen des menüs nicht nach unten verschoben werden, sondern das menü sollte sich über den text legen</p>
</body>
</html>
-
Hallo MarioL,
ich hätte da gern mal ein Problem
Oh, welch seltsamer Spezie gehörst Du an? ;-)
Mit freundlichem Gruß
Micha -
Hallo,
ich hätte da gern mal ein Problem
Find ich gut!
Ich habe viele Probleme. Welches möchtest du zuerst?gruß aus Hosena
-
Hallo Mario,
So solls sein:
* Menüleiste mit den Top-Level Menüeinträgen (TLM)
* onmouseover (onmouseout) Event zum aufklappen der Second-Level Menüs (SLM)wie gefällt Dir Christoph Gärtners CSS-Menü im verlinkten Entwurf?
Freundliche Grüße
Vinzenz
-
Hi,
ich hätte da gern mal ein Problem
Wer nicht? ;-)
Ich bin dabei eine neue Menüführung auf eine Page zu basteln.
Das ganze waere auch mit CSS loesbar. Wie das geht ist hier beschrieben.
Ein Vorteil davon ist, dass das Menue auch fuer Anwender verfuegbar ist, die JS deaktiviert haben.mfG,
steckl -
Hi,
ich hätte da gern mal ein Problem
Gerne doch, such dir eins aus ;)
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
