Frage zur Umsetzung

N

Netzheimer

Grünschnabel
Hallo

ich habe folgendes Problem. Ich möchte auf einer Seite eine Tabelle oder ähnliches(Das mit der Tabelle war mein erster Gedanke. Es sollte aber wie in einer Tabelle angeordnet werden) mit 3x3 Spalten.

Jede dieser Spalten ist ein Oberpunkt. Klickt man jetzt auf so einen Oberpunkt sollte darunter die Oberpunkte wie bei einem Dropdown die Unterpunkte ausfahren.

Das ganze sollte solange gehen bis in einem Unterpunkt ein Link ist der dann auf eine andere Seite verweist.


Das ganze sollte also wie eine Art Menü darstellen. Ich habe leider keine Ahnung wie das zum Umsetzen ist. Aber da es ja Dynamisch ist dachte ich dass ich im Bereich JavaScript nicht so falsch liegen kann.

Ich hoffe ihr habt für mich einen Denkanstoß

Grüße
Netzheimer
 
sowas?

<html>
<head>
<title>Menü</title>
<style type="text/css">
.bereich{
display: block;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}

a.link{
display: block;
color: #FFD700;
font-family: Verdana, Arial;
font-size: 13px;
text-decoration: None;
border-bottom: solid 1px #FFFFFF;
}

a.link.bereich{
display: block;
background-color: #000000;
width: 100px;
height: 25px;

}

a.link:hover{
display: block;
color: #000000;
background-color: #FFD700;
}
</style>

<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>
</head>
<body>

<table cellPadding=0 cellSpacing=0 style="position: absolute; top: 10px; left: 150px;">
<tr>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')">
<img src="http://wow-factorhomestaging.com/files/user/page1/twitter-100x25.jpg" width=100 height=25>
<span id="menue#1" style="display: none;">
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#2')" onMouseout="anzeigen('menue#2')">
<img src="http://dermazone.org/img/button1_100x25_over.gif" width=100 height=25>
<span id="menue#2" style="display: none;">
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#3')" onMouseout="anzeigen('menue#3')">
<img src="http://dermazone.org/img/button1_100x25.gif" width=100 height=25>
<span id="menue#3" style="display: none;">
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
</span>
</div>
</td>
</tr>
</table>

</body>
</html>
 
Das geht schon in dir richtige Richtung. Nur muss wenn bei einem der neun Menüeinträge das Untermenü geöffnet wird der darunterliegende Oberpunkt nach unten gehen bis die Unterpunkte platz haben. Ich hab dazu mal eine Bsp. Grafik erstellt
 

Anhänge

  • bsp.png
    bsp.png
    28,4 KB · Aufrufe: 4
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück