menue-javascript

eisman

Aktives Mitglied
Thread Starter
Dabei seit
22.01.2005
Beiträge
2.056
Reaktionspunkte
105
hallo ihr javacracks,ich brauche eure hilfe.habe bei javarea ein nenuescript runtergeladen.aber abscheind hat der schreibeling ein unvollständiges script
geschrieben.dieses menue ist mit untermenues angelegt.geht man auf das
erste hptmenue öffnet sich das untermenue.soweit sogut.geht man
auf das zweite hptmenue öffnet sich auch das untermenue.aber jetzt kommt's.dann schließt sich nicht das erste Hptmenue mit seinen unterlinks.
wer kann von euch das script vervollständigen?
würde ja gerne direkt den progammierer von javarea anmailen,aber irgendwie klappt das einloggen nicht.die cookies sind akteviert.ob safari,mozilla und explorer,bei allen browsertypen klappt es nicht.
vieleicht weiß einer von euch woran das liegt.laut javaera funktionirt das einloggen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>Cascade Menu</title>
<style type="text/css">
<!--
body { font: 12px tahoma }
//-->
</style>
<script language="JavaScript">
function goToURL() { history.go(-1); }
</script>
<style>
.menu
{
background-color:#2B6Ebb;
border:1px solid darkblue;
width:150px;
font-size:11px;
font-family:verdana;
position: absolute;
font:bold;
color: #ffffff;
cursor: hand;
}
.item_panel
{
width:150px;
border-left:1px solid darkblue;
border-right:1px solid darkblue;
clip:rect(0,150,0,0);
position:absolute;
}
.item_panel a
{
text-decoration:none;
color:black;
cursor:hand;
}
.item
{
background-color: #E9F0F8;
width: 148px;
font-size: 10px;
font-family: verdana;

}
</style>

<script language="JavaScript">
var height = 20; // Hoehe der Menuekoepfe
var iheight = 15; // Hoehe der Menueelemente
var bgc = "#E9F0F8" // background color of the item
var tc = "black" // text color of the item
var over_bgc = "white";
var over_tc = "#004891";
var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152;
var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;
for(i=0;i<Link.length;i++)
{
la = Link.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 class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' 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 class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}

document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' 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 = "darkblue";
obj.style.borderBottomWidth = 1;
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(i=0;i<nr;i++)
{
if(self_menu[2] == 1)
{open_item += self_menu[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 (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 = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (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 = "";
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
if(self_menu[3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}
</script>
</head>
<body>
<table width=150>
<tr>
<td>
<script language="JavaScript">
//Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"
var Link = new Array();
Link[0] = "0|JavaScripte";
Link[1] = "1|Javarea.de|http://www.javarea.de|";
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://.p|";
Link[11] = "0|noch mehr";
Link[12] = "1|bla bla|";
startup(4);
</script>
</td>
</tr>
</table>
</body>

</html>
 
Das Menü ist unterste Schublade, auch wenn es funktionieren würde. Die Navigation ist das wichtigste (vom Content mal abgesehen) auf der Seite und sollte auch ohne JS benutzbar sein. Wenn JS im Menü dann nur unterstützend. Ich rate Dir von diesem Script jedenfalls ab.
 
dms schrieb:
Das Menü ist unterste Schublade, ...

Stimmt. Da fehlen Semikoloms und "schließende Klammern" ohne Ende...
Mit OS9 lief es in keinem Browser – nada, niente... .
 
Schau Dir lieber das Menu von ... an, das ist ganz gut gemacht.
 
Zuletzt bearbeitet von einem Moderator:
kommt mir vor als wollte jemand mir seine navigation andrehen.
mag ja sein das es für euch ein menue auf den untersten level ist.aber ich wollte eins was vertikal in einem frame mit einer tabellenzeile eingebunden wird. schaut euch mal die www.jamp.de an .das ist eine navigation die im schlichten design funktioniert.
 
Zuletzt bearbeitet von einem Moderator:
Was heisst im schlichten Design? Jedenfalls ist das Ding ebenfalls beschissen. ;) Ohne JS kein Menü.
Schau Dir mal dieses Beispiel an. Das will ich Dir nicht andrehen. ;) Ist nur ein Beispiel wie man ein Menü mit optionalen JavaScript-Funktionalitäten macht.
 
Zuletzt bearbeitet von einem Moderator:
da kommt man der sache schon näher dran(beispielseite).nur ne frage,kann
man die navigation nur mit layers erstellen ? so wie erkenne ist die mit 3 ebenen aufgebaut
 
Was meinst Du mit "nur Layer"? Ich habe verschachtelte Listen verwendet. Listen bieten sich für Menüs an. Du kannst aber auch jedes beliebige Element-Konstrukt verwenden, denn das Erscheinungsbild wird ja durch CSS definiert.
 
ja ok.wenn du nichts dagegen hast, würde ich gerne die navigation
modefiziert übernehmen.habe aber jetzt was anderes zu tun.melde mich
morgen so wie ich zeit habe. aber trotdem vorab ein danke und weiteres
gelingen.
 
eisman schrieb:
kommt mir vor als wollte jemand mir seine navigation andrehen.
mag ja sein das es für euch ein menue auf den untersten level ist.aber ich wollte eins was vertikal in einem frame mit einer tabellenzeile eingebunden wird. schaut euch mal die www.jamp.de an .das ist eine navigation die im schlichten design funktioniert.

Nein, ist nicht meines. Aber ich fand es ganz gut. Na ja etwas verkürzen kann man es noch. :)

Hernehmen kannst Du im Endeffekt alles was Du Ein- und Ausblenden kannst unter Javascript. Layers, Divs, Grafiken usw.
 
Hallo Eisman!

Erstens: Was für Eissorten hast Du?
Zweites: Mach das Menü doch einfach aus CSS.
 
So viel Javaarbeit nur für ein Menü ???
Nimm doch einfach CSS. Dieses Thema wurde doch schon zigfach hier besprochen.
 
Und nochmal. ;) Was ist mit dem IE?

Vorausgesetzt der Nutzer lässt .htc-Files zu, kann man es unter Win fixen. Jedoch nicht unter Mac und auch nicht in alten Browserns die kein CSS2 können.

Edit: Ein Hybrid wäre vlt. interessant
Ich würde auf jeden Fall nicht auf .htc zurückgreifen
 
Zuletzt bearbeitet von einem Moderator:
Wie findest du das hier? Selbstgemacht, versteht sich ;)

HTML:
<html>
<head>
<title>JS-Test</title>

<style type="text/css">
<!--
body
{
background-color:dodgerblue;
}

.layer_class
{
width:100px;
position:absolute;
background-color:gainsboro;layer-background-color:gainsboro;
visibility:hidden;
border:0px solid red;
text-align:center;
z-index:2;
}

ul.navigation
{
border:0px solid red;
padding:0px;
margin:5px 0px;
}

ul.navigation li
{
list-style:none;
}
 
ul.navigation a, ul.navigation a:active, ul.navigation a:visited
{
border:0px solid black;
padding:0.5em 0em;
margin:0em 0em;
display:block;
color:black;
text-decoration:none;
text-align:left;
padding-left:1em;
}

ul.navigation a:hover
{
background-color:silver;
}

.menu
{
cursor:pointer;
width:100px;
border:0px solid gainsboro;
background-color:gainsboro;
text-align:center;
padding:6px 0px;
}
//-->
</style>

<script language="javascript" type="text/javascript">
<!--
var layerid;

function zeigelayer(layerid)
{
 document.getElementById(layerid).style.visibility = "visible";
}

function verbergelayer(layerid)
{
 document.getElementById(layerid).style.visibility = "hidden";
}
-->
</script>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="3">
 <tr>
  <td>
   <div class="menu" id="menu_layer1" onmouseover="zeigelayer('layer1');" onmouseout="verbergelayer('layer1');">Weblinks</div></a>
   <div id="layer1" class="layer_class" onmouseover="zeigelayer('layer1');" onmouseout="verbergelayer('layer1');">
    <ul class="navigation">
     <li><a href="https://www.macuser.de">mu-Forum</a></li>
     <li><a href="http://www.pornolize.com">pornolizer</a></li>
     <li><a href="http://www.dsdt.info">dsdt.info</a></li>
     <li><a href="http://www.ksta.de">ksta</a></li>
     <li><a href="http://www.kicker.de">kicker</a></li>
   </ul> 
   </div>
  </td>

  <td>
   <div class="menu" id="menu_layer2" onmouseover="zeigelayer('layer2');" onmouseout="verbergelayer('layer2');">Galerie</div></a>
   <div id="layer2" class="layer_class" onmouseover="zeigelayer('layer2');" onmouseout="verbergelayer('layer2');">
   <ul class="navigation">
    <li><a href="#">Galerie1</a></li>
    <li><a href="#">Galerie2</a></li>
    <li><a href="#">Galerie3</a></li>
    <li><a href="#">Galerie4</a></li>
   </ul>
   </div>
  </td>

 </tr> 
 <tr>
  <td colspan="2">
   fgsjdfgsdl kfghjls dfgjhksdl<br> fgh jdsf lhgjdl hfg hjfh jsyhfjsh
  </td>
 </tr>
</table>
</body>
</html>
 
Zuletzt bearbeitet:
hossa schrieb:
da klappt bei mir nix ;-)
ja, ich seh schon, die html-tags vom bulletin-board machen da aus unempfindlichen
gründen ne lücke rein:

getElementById(layerid).style.v isibility = "visible";

=> die lücke zwischen "v" und "isibility" wegmachen
 
Zurück
Oben Unten