-
Menü aufklappen
Hi,
ich bin grade etwas am verzweifeln.
Also es handelt sich um diese Seite
Startseite
Wenn man auf "Einrichtungsberatung" klickt, sollte langsam ein Menü herunterklappen mit weiteren Untertiteln (als gif Datei).
Man sollte aber noch auf der Startseite bleiben.
Dasselbe soll passieren wenn man auf die Punkte "Homestaging, Vita und Kontakt" klickt
Das nicht vorhandene onmouseover für "Vita" ist Absicht, da ich den Button noch nicht in dem lila Farbton erhalten habe.
Ich hab zwar einige Klappmenüs ausprobiert, aber der gewünschte Effekt trat nicht wirklich auf.
Liebe Grüße
-
Multilevel Drop Down Navigation Menus: Examples and Tutorials - Noupe Design Blog Wie wärs damit? Bislang versteh ich nicht so genau was Du meinst, aber es gibt auch 'n einfaches Script, wo 'n "+" davor steht, wenn man drauf klickt klappts runter.. Aber kA mehr wo ich das mal gelesen hatte /:
-
Also ich suche sowas wie hier
Cascade Menu powered by javarea.de
nur statt Javarea.de sollen da meine Buttons (als gif) sein, die zusätzlich noch ein mouseover haben..
Also ein SLIDE DOWN Menü suche ich^^
-
Dann schau dir doch da mal den Code an, maybe kannste das einfach mit 'nem einfachem HTML Background Befehl händeln?
EDIT // Oder im CSS
Hab nicht sonderlich viel erfahrung was das alles angeht /: Versuch Dir einfach nur Denkanstöße zu geben :-)
background-color: #2b6ebb;
-
So also ich habs nicht so mit Javascript aber vielleicht gehts ja so.
Ich hab den Code ein wenig geändert, ja wahrscheinlich sieht er sehr komisch aus
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cascade Menu</title>
<style type="text/css">
<!--
.menu
{
background-color: #;
border: 1px solid #;
font-family: Verdana;
position: absolute;
font-weight: bold;
padding-top: 3px;
font-size: 10px;
cursor: pointer;
width: 150px;
color: #fff;
}
.item_panel
{
border-left: 1px solid #;
border-right: 1px solid #;
clip: rect(0, 150, 0, 0);
position: absolute;
width: 150px;
}
.item_panel a
{
text-decoration: none;
cursor: pointer;
color: #000;
}
.item
{
background-color: #;
font-family: Verdana;
font-size: 10px;
width: 148px;
}
//-->
</style>
<script type="text/javascript">
<!--
// www: http://www.javarea.de
// Copyright by javarea.de
// Link[nr] = 'position [0 is menu/1 is item] | Link name | url | target (blank|top|frame_name)'
var Link = new Array();
Link[0] = '0|<img src="Bilder/index_06.gif">';
Link[1] = '1|<img src="Bilder/index_09.gif">|http://';
Link[2] = '1|Javarea.de|http://www.javarea.de|';
Link[3] = '1|Javarea.de|http://www.javarea.de|';
Link[4] = '1|Javarea.de|http://www.javarea.de|';
Link[5] = '0|Html Hilfe';
Link[6] = '1|selfhtml|http://|';
Link[7] = '1|lerne html|http://|'
Link[8] = '0|Sonst';
Link[9] = '1|Gästebuch|http://|';
Link[10] = '1|Kontakt|http://|';
Link[11] = '0|noch mehr';
Link[12] = '1|bla bla|';
var height = 20; // Hoehe der Menuekoepfe
var iheight = 15; // Hoehe der Menueelemente
var bgc = '#000000' // background color of the item
var over_bgc = '#fff';
var tc = '#000' // text color of the item
var over_tc = '#000000';
var speed = 0;
var timerID = 0;
var width = 152;
var N = (document.all) ? 0 : 1;
var self_menu = new Array();
function write_menu()
{
smc = 0;
mn = 0;
mni = 1;
start = -1;
document.write('<div style="position: absolute;">');
for (var i = 0; i < Link.length; i++)
{
la = Link[i].split('|');
if (la[0] == 0)
{
if (start == 0)
{
document.write('</div>');
h = csmc * iheight;
tmn = mn; // - h;
self_menu[smc] = new Array(tmn, h, 0, -2);
smc++;
mn--;
}
csmc = 0;
document.write('<div id="down' + smc + '" class="menu" '
+ 'style="top: ' + mn + 'px; height: ' + height + 'px;" '
+ 'onclick="pull_down(' + smc + ', ' + mni + ');">'
+ ' ' + la[1] + '</div>');
self_menu[smc] = new Array(mn, height, 0, mni);
smc++;
mni++;
mn += height;
start = 1;
}
else
{
if (start == 1)
{
if (N)
mn += 2;
document.write('<div id="down' + smc + '" class="item_panel" '
+ 'style="top: '+ mn + 'px;">');
start = 0;
}
document.write('<a href="' + la[2] + '"'
+ ((la[3] != '') ? ' target="' + la[3] + '"' : '')
+ '><div id="d' + i + '" class="item" '
+ 'style="height: ' + iheight + 'px;'
+ ((N) ? ' width:150px;' : '')
+ '" onmouseover="color(this.id);" '
+ 'onmouseout="uncolor(this.id);">'
+ ' ' + la[1] + '</div></a>');
csmc++;
}
}
if (start == 0)
{
document.write('</div>');
h = csmc * iheight;
tmn = mn + 5; // - h;
self_menu[smc] = new Array(tmn, h, 0);
name = 'down' + (self_menu.length - 1);
obj = document.getElementById(name);
obj.style.borderBottomColor = '#008';
obj.style.borderBottomWidth = '1px';
obj.style.borderBottomStyle = 'solid';
}
document.write('</div>');
}
function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc;
}
function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc;
}
function pull_down(nr, c)
{
if (timerID == '')
{
to = self_menu[nr + 1][1]
begin = nr + 2;
if (timerID != '')
clearTimeout(timerID);
if (self_menu[nr + 1][2] == 0)
{
self_menu[nr + 1][2] = 1;
if (nr == (self_menu.length - 2))
to++;
epull_down(begin, to, 0);
}
else
{
to = 0;
self_menu[nr + 1][2] = 0;
name = 'down' + (nr + 2);
open_item = 0;
for (var i = 0; i < nr; i++)
if (self_menu[i][2] == 1)
open_item += self_menu[i][1];
if (N == false)
open_item -= (c * 1);
if (nr == (self_menu.length - 2))
{
val = self_menu[self_menu.length - 1][1];
to = -1;
}
else
val = parseInt(document.getElementById(name).style.top) - (open_item) - (c * height);
epull_up(begin, to, val);
}
}
}
function epull_down(nr, to, nowv)
{
name = 'down' + (nr - 1);
obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + (nowv + 1) + ', 0)';
for (var i = nr; i < self_menu.length; i++)
{
name = 'down' + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top) + 1;
}
nowv++;
if (nowv < to)
timerID = setTimeout('epull_down(' + nr + ', ' + to + ', ' + nowv + ');', speed);
else
timerID = 0;
}
function epull_up(nr, to, nowv)
{
name = 'down' + (nr - 1);
obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + nowv + ', 0)';
for (var i = nr; i < self_menu.length; i++)
{
name = 'down' + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top) - 1;
}
nowv--;
if(nowv > to)
timerID = setTimeout('epull_up(' + nr + ', ' + to + ', ' + nowv + ');', speed);
else
timerID = 0;
}
function startup(nr)
{
write_menu();
if (nr != 0)
{
for (var i = 0; i < self_menu.length; i++)
{
if (self_menu[i][3] == nr)
pull_down(i, nr);
i == self_menu.length;
}
}
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
startup(1);
//-->
</script>
</body>
</html>
Das rot makierte Bild wird wie gewollt sogar angezeigt ;b
So nun meine eigentliche Frage, wie bekomm ich es bei dem rot makierten Bild hin, dass dieses Bild geändert wird bei onMouseover?
Den onmouseover direkt dahinter zu schreiben, funktioniert anscheinend nicht.
hat sich geklärt hab ein anderes script genommen
