Menü soll mit scrollen. von KD-one, 09.01.2004 16:05

Menü soll mit scrollen.

Julian S Homepage des Autors 09.01.2004 15:39

javascript

Hallo,

ich habe ein Problem , und zwar will ich in mein Javascriptmenü auf: http://www.dacrazycrew.de.vu eine funktion einbauen, das das menü wenn man auf einer Seite herunterscrollt, mit scrollt.

Hier ist mein Code von meinem Menü:

--------------------------------

var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items[id] = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items[i].visibility(false);
this.items[i].switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items[id];
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items[id];
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items[i];
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
   this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
   curr_item.switch_style (
    curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items[id].switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
   + this.id +'" class="m' + this.container.id + 'l' + this.depth
   +'o" href="' + this.fields[1] + '" style="position: absolute; top: '
   + this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
   + this.container.pos['width'][this.depth] + 'px; height: '
   + this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
   +' background: black; color: white; z-index: ' + this.depth + ';" '
   + 'onclick="return menus[' + this.container.id + '].onclick('
   + this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
   + this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
   + this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
   + this.id + ');"><div class="m' + this.container.id + 'l' + this.depth + 'i">'
   + this.fields[0] + "</div></a>\n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
   this.element.style.visibility = 'visible';
else if (this.depth)
   this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left'][i]
+ this.arrpath[i] * this.container.pos['left'][i];
return (value);posi=setTimeout('positionieren()',200)
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top'][i]
+ this.arrpath[i] * this.container.pos['top'][i];
return (value);posi=setTimeout('positionieren()',200)
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles[state];
for (var i = 0; i < style.length; i += 2)
if (style[i] && style[i+1])
   eval('this.element.style.' + style[i] + "='"
   + style[i+1][this.depth] + "';");
   posi=setTimeout('positionieren()',200)
}
function vs_multilink(URL1,F1,OP1,URL2,F2,OP2,URL3,F3,OP3)

{URL=new Array(); F=new Array(); OP=new Array(); URL[1] = URL1; URL[2] = URL2; URL[3] = URL3; F[1] = F1; F[2] = F2; F[3] = F3; OP[1] = OP1; OP[2] = OP2; OP[3] = OP3;

for(i=1;i<=3;i++){if(URL[i] != "") {

if(F[i] == "_blank") {window.open(URL[i])}

else{ if(F[i] == "_self") {location.href=URL[i];}

else{ if(F[i] == "_top") {top.location.href=URL[i];}

else{ if(OP[i] != "") {vs_openbr(URL[i], F[i], OP[i])}

else{ parent.frames[F[i]].location.href=URL[i];}}}}}}}

--------------------------------------------
Ich habe auch ein Menü in Internet gefunden wo das Funktioniert, auf:

http://www.wschwartz.de/scripte/weiter.php?URL1=men003.htm

Der Code steht da, deswegen werde ich ihr hier nicht posen, weil er sowiso zu lang ist.

Sorry das ich den ganzen Code poste, aber ich habe kein Plan von Javascript.
Meine Frage nun:
Was muss ich aus den 2. Code einbinden, das MEIN menü mitscrollt?

In anderen Foren wurde mir nur gasagt, das ich doch das andere Menü nehmen soll, aber das will ich nicht.

Danke schonmal fürs lesen

Viele Grüße
Julian

Beitrag melden

– Informationen zu den Bewertungsregeln

Menü soll mit scrollen.
KD-one Homepage des Autors 09.01.2004 16:05

javascript
– Informationen zu den Bewertungsregeln
Hallo Julian,

[...]

Ich habe auch ein Menü in Internet gefunden wo das Funktioniert, auf:
http://www.wschwartz.de/scripte/weiter.php?URL1=men003.htm

</faq/#Q-19> <-- http://www.wschwartz.de/scripte/weiter.php?URL1=men003.htm

Der Code steht da, deswegen werde ich ihr hier nicht posen, weil er sowiso zu lang ist.

Das hättest du uns bei deinem Code auch ersparen sollen, ein Link auf die Datei hätte genügt.

Sorry das ich den ganzen Code poste, aber ich habe kein Plan von Javascript.
Meine Frage nun:
Was muss ich aus den 2. Code einbinden, das MEIN menü mitscrollt?

An Besten gar nichts. Hast du schon mal gesehen, wie hässlich das Menü beim Scrollen springt? Mach es besser mit CSS.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position
Und für den IE gibt's auch noch einen Hack:
http://www.fabrice-pascal.de/artikel/posfixedie6/index.php

In anderen Foren wurde mir nur gasagt, das ich doch das andere Menü nehmen soll, aber das will ich nicht.

Nun, du kannst schon das Menü nehmen, welches du willst, auf alle Fälle solltest du nicht auf die Alternative für jene, die Javascript deaktiviert haben, vergessen.
Stichwort: <noscript>.

Gruß

Kurt

--
"Keine Kunst ist es, alt zu werden, es ist eine Kunst, es zu ertragen." (Johann Wolfgang von Goethe; dt. Dichter, Jurist u. Staatsminister; 1749-1832)
http://elektro-dunzinger.at
http://shop.elektro-dunzinger.at
Beitrag melden

–
Informationen zu den Bewertungsregeln
Menü soll mit scrollen.
wahsaga Homepage des Autors 09.01.2004 16:06

javascript
– Informationen zu den Bewertungsregeln
hi,

ich habe ein Problem , und zwar will ich in mein Javascriptmenü auf: http://www.dacrazycrew.de.vu eine funktion einbauen, das das menü wenn man auf einer Seite herunterscrollt, mit scrollt.

du willst vermutlich, dass es _nicht_ mitscrollt, sondern stehen bleibt?
(wenn es mitscrollt, verschwindet es ja aus dem blickfeld.)

Hier ist mein Code von meinem Menü:

bravo.

lies </faq/#Q-07c>, zweiter absatz.

für solche zwecke gibt es in CSS position:fixed.
da dies der IE noch immer nicht beherrscht, brauchst du für diesen einen workaround. befrage dazu das </archiv/>.

gruss,
wahsaga
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Julian S: Menü soll mit scrollen.