FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: JavaScript-Menü fixen vom 20.12.2005

	MGi Foren-Übersicht -> Allgemeines - Nonprint -> JavaScript-Menü fixen
	Seite: 1, 2 Weiter

Autor

Nachricht

sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 37
Geschlecht: Weiblich

Verfasst Di 20.12.2005 11:19
Titel

JavaScript-Menü fixen

huhu!

habe folgendes problem. hab in meiner hp eine javascript-navigation, die durch folgendes definiert und auf der hp ausgerichtet wurde:

Code:

var nNumberOfMenus=3
var nMwidth=101
var nPxbetween=40
var nFromleft=277
var nFromtop=208
var nBgcolor='#003366'
var nBgcolorchangeto='#003366'
var nImageheight=25

problem ist jetzt, dass sich beim verkleinern des browserfensters die navigation natürlich wegen der pixelangabe nicht prozentual mitverschiebt.

auf dieser seite ist das irgendwie anders gelöst, komm nur ned drauf wie *Schnief*

klick mich

könnt ihr mir helfen?

Anti78

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht: Männlich

Verfasst Di 20.12.2005 11:22 Titel

Also wenn ich mich nicht täusche, ist auf der Beispielseite das Menü im Container mit drin und der wird mittig ausgerichtet.

caZpa
Account gelöscht

Ort: -

Verfasst Di 20.12.2005 11:40
Titel

jup

Code:

sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 37
Geschlecht: Weiblich

Verfasst Di 20.12.2005 11:46 Titel

dankeschön

sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 37
Geschlecht: Weiblich

Verfasst Do 22.12.2005 10:56
Titel

Hallo,

habe, das mit dem container ausprobiert...nur funktioniert es immer noch nicht wirklich..

container im header:

Code:

und dann die buttons im body in ner tabelle:

Code:

letztendlich ändert sich am ergebnis nix, die buttons verschieben sich nicht mit...
liegt das evtl daran, dass sie jetzt doppelt definiert sind?
weil die pixelangabe durch

Code:

var nNumberOfMenus=3
var nMwidth=101
var nPxbetween=40
var nFromleft=277
var nFromtop=208

im header gibtz ja immernoch...nur wenn ich die weglassen gehts garnüschd mehr Lächel

*confused*

helft mir Lächel

liebe grüße, sunny

Zuletzt bearbeitet von sunshineXY am Mi 01.03.2006 12:58, insgesamt 1-mal bearbeitet

sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 37
Geschlecht: Weiblich

Verfasst Do 22.12.2005 13:20 Titel

kann niemand helfen?

caZpa
Account gelöscht

Ort: -

Verfasst Do 22.12.2005 14:59 Titel

zeig mal kompletten qt

sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 37
Geschlecht: Weiblich

Verfasst Do 22.12.2005 15:14
Titel

hier der komplette code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.clTopMenu {position:absolute; width:101px; height:150px; clip:rect(0px 101px 14px 0px); layer-background-color:#003366; background-color:; z-index:31; visibility:hidden;}
.clTopMenuBottom {
position:absolute;
width:101px;
height:3px;
clip:rect(0px 101px 3px 0px);
top:34px;
layer-background-color:#003366;
background-color:#003366;
z-index:2;
left: 54px;
}
.clTopMenuText {position:absolute; width:91px; left:5px; top:35px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#F5EBD3; z-index:1;}
</style>

<style type="text/css">
#content { position:absolute; top:1%; left:0%; width:600; height:100%; z-index:0; }
</style>

<script language="JavaScript" type="text/javascript">

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()

nPlace=0

var nNumberOfMenus=3
var nMwidth=101
var nPxbetween=40
var nFromleft=277
var nFromtop=200
var nBgcolor='#003366'
var nBgcolorchangeto='#003366'
var nImageheight=35

function makeNewsMenu(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
   this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}

var px = bw.ns4||window.opera?"":"px";

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_bgChange(color){this.css.backgroundColor=color; this.css.bgColor=color; this.css.background=color;}
function b_clipTo(t,r,b,l){
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
   if(this.y>ystop){
      this.moveIt(this.x,this.y-5); eval(wh)
      setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
   }else{
      this.slideactive=false; this.moveIt(0,ystop); eval(fn)
   }
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
   if(this.y<ystop){
      this.moveIt(this.x,this.y+5); eval(wh)
      setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
   }else{
      this.slideactive=false; this.moveIt(0,ystop); eval(fn)
   }
}
}

function newsMenuInit(){
oTopMenu=new Array()
zindex=10
for(i=0;i<=nNumberOfMenus;i++){
   oTopMenu[i]=new Array()
   oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
   oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
   oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
   oTopMenu[i][1].moveIt(0,nImageheight)
   oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
   if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
   else{
      oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
      oTopMenu[i][0].css.zIndex=zindex--
   }
   oTopMenu[i][0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}

//Calls the init function onload if the browser is ok...
if (bw.bw) onload = newsMenuInit;

</script>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="103%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<tr>
<td width="20%" height="100%" valign="top" bgcolor="#003366"> </td>
<td width="60%" height="100%" align="center" valign="top" bgcolor="#FFFFFF" style="background-image:url(img/hintergrund3.jpg); background-repeat:no-repeat;">
<br>
<br>

<p> </p>
<p> </p>

<div id="content">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" align="center">
<div id="divTopMenu0" class="clTopMenu"><a href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
<div id="divTopMenuText0" class="clTopMenuText"> Text1

<br>Text2
<br>Text3
<br>
<br>
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
</td>
<td width="25%" align="center">
<div id="divTopMenu1" class="clTopMenu"><a href="#" onMouseOver="menuOver(1)" onMouseOut="menuOut(1)" onClick="topMenu(1); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
<div id="divTopMenuText1" class="clTopMenuText"> Text1<br>
Text2<br>
Text3<br>
Text4<br>
<br>
</div>
<div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
</div>
</td>
<td width="25%" align="center">
<div id="divTopMenu2" class="clTopMenu"><a href="#" onMouseOver="menuOver(2)" onMouseOut="menuOut(2)" onClick="topMenu(2); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
<div id="divTopMenuText2" class="clTopMenuText"> Text1
<br>Text2
<br>
<br>
</div>
<div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
</div>

</td>
<td width="25%" align="center">
<div id="divTopMenu3" class="clTopMenu"><a href="#" onMouseOver="menuOver(3)" onMouseOut="menuOut(3)" onClick="topMenu(3); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
<div id="divTopMenuText3" class="clTopMenuText"> Text1 <br>
Text2
<br>
<br></div>
<div id="divTopMenuBottom3" class="clTopMenuBottom"></div>
</div>
</td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
<p> </p></td>
<td width="20%" height="100%" bgcolor="#003366"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Zuletzt bearbeitet von sunshineXY am Mi 01.03.2006 13:00, insgesamt 1-mal bearbeitet

Ähnliche Themen

javascript menü
Javascript menü
[javascript] menü anpassen
Suche Javascript Menü
[JavaScript] Hilfe bei Menü
CSS Drop-Down Menü mit Javascript

	Seite: 1, 2 Weiter
	MGi Foren-Übersicht -> Allgemeines - Nonprint

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.