Gegen Bilderklau - Das Original (https://www.gegen-bilderklau.net/index.php)
- Design, Website, Copyright (https://www.gegen-bilderklau.net/board.php?boardid=80)
--- Homepagehilfe (https://www.gegen-bilderklau.net/board.php?boardid=27)
---- Homepagehilfe - Archiv (https://www.gegen-bilderklau.net/board.php?boardid=139)
----- [JS] Html Code Klappmenü (https://www.gegen-bilderklau.net/thread.php?threadid=125819)


Geschrieben von Playa Bunny am 04.01.2008 um 12:18:

  Html Code Klappmenü

Hallo

ich suche den Html Code für ein Klappmenü. Aber keines wo man die unterseite erst erstellen muss, sondern wo man das mit dem code eingeben ´kann.

hat das jemand?

Lg Geraldine



Geschrieben von Jenny am 04.01.2008 um 12:33:

 

Meinst du sowas? Das such ich auch schon lange..



Geschrieben von Playa Bunny am 04.01.2008 um 13:16:

 

so in der art, ja...



Geschrieben von _negel am 04.01.2008 um 13:23:

 

Ich weiß nicht, ob's was hilft, aber das ist der Code vom Menü der Seite, die .oO(Tinkerfan)Oo. verlinkt hat...

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
<html>
<head>
<title>Cascade Menu</title>
<link type=text/css rel=stylesheet>
 <!--
  body { font: 12px verdana } 
 //-->
 </style>
<script language="JavaScript">
// www: http://www.javarea.de
// Copyright by javarea.de
function goToURL() { history.go(-1); }
 </script>
  <style>
  .menu
  {
   background-color:#AFDD8D;
   border:1px solid #5EB41E;
   width:100px;
   font-size:11px;
   font-family:verdana;
   position: absolute;
   color:#4D7335;
   cursor:hand;
  }
  .item_panel
  {
    width:45px;
    border-left:1px solid #488F13;
    border-right:1px solid #488F13;
    clip:rect(0,0,0,0);
    position:absolute;
  }
  .item_panel a
  {
   text-decoration:none;
   color:#4D7335;
   cursor:hand;
  }
  .item
  {
   background-color: #C9F7A7;
   width: 95px;
   font-size: 10px;
   font-family: verdana;
   
  }
  </style>
  
  <script language="JavaScript">  
// www: http://www.javarea.de
// Copyright by javarea.de

  var height = 20; // Hoehe der Menuekoepfe
  var iheight = 12; // Hoehe der Menueelemente 
  var bgc = "#C9F7A7" // background color of the item
  var tc = "4D7335" // text color of the item  
  var over_bgc = "#C9F7A7";
  var over_tc = "#4D7335";  
  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[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 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 = "#5EB41E";
     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[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 (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[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
 }
 }
}  
 </script>
</head>
<body>
<table width=50>
<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|Hauptfunktionen";
  Link[1] = "1|Main|Inhalt.html|haupt";
  Link[2] = "1|Gästebuch|http://www.12book.de/gaestebuch-3370.htm|haupt";
  Link[3] = "1|Forum|http://www.charnwood.de/wbblite|blank";
  Link[4] = "0|Anmeldung";
  Link[5] = "1|Erklärung|Erklaerung.html|haupt";
  Link[6] = "1|Regeln|Regeln.html|haupt";
  Link[7] = "1|Herdenregeln SB|HerdenregelnSB.html|haupt";
  Link[8] = "1|Herdenregeln CL|HerdenregelnCL.html|haupt";
  Link[9] = "1|Herdenregeln DP|HerdenregelnDP.html|haupt";
  Link[10] = "1|Aussehen|Auswahl.html|haupt";
  Link[11] = "1|Alte Chars|Altchars.html|haupt";
  Link[12] = "0|Intern";
  Link[13] = "1|Mitglieder|Pensioner.html|haupt";
  Link[14] = "1|Sombra Blancura|Herde.html|haupt";
  Link[15] = "1|Corazón Libre|Libre.html|haupt";
  Link[16] = "1|Destino Punitivo|Destino.html|haupt";
  Link[17] = "0|Rechtliches";
  Link[18] = "1|Copyright|Copyright.html|haupt";
  Link[19] = "1|Bildnachweis|Credits.html|haupt";
  Link[20] = "1|Impressum|Impressum.html|haupt";
  Link[21] = "0|Extern";
  Link[22] = "1|Awards|Awards.html|haupt";
  Link[23] = "1|Partnerherden|Partner.html|haupt";

  startup(6);
  </script>

  </td>
 </tr>
</table>
<body background="Spring2.jpg" bgproperties="fixed" scrolling="no">
</body>

</html>



Geschrieben von Jenny am 04.01.2008 um 13:41:

 

Ja, den Quelltext hab ich mir auch schon angeschaut, aber verstehen tu ich den ganzen Kram nicht wirklichgroßes Grinsen



Geschrieben von Julia712 am 04.01.2008 um 13:51:

 

Ich hab auch noch eins Freude

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
<style type="text/css" media="screen">
#menu li
{
	border: 0px solid #000;
	list-style-type: none;
	cursor: pointer;
	display: block;
}

#menu a
{
	text-decoration: none;
	font-weight: normal;
	display: block;
}
//-->
</style>

</HEAD>
<BODY onload="hideSub();">
<script type="text/javascript">
<!--
function hideSub()
{
	if (!document.getElementsByTagName)
		return;

	var mnu    = document.getElementById('menu');
	var toplis = mnu.getElementsByTagName('li');

	for (var it = 0; it < toplis.length; it++)
	{
		var sublis = toplis[it].getElementsByTagName('li');

		for (var is = 0; is < sublis.length; is++)
			if (sublis[is].style)
				sublis[is].style.display = (toplis[it].className == 'show') ? 'block' : 'none';
	}
}

function mShow(Me)
{
	if (!Me.getElementsByTagName)
		return;

	var mylis = Me.getElementsByTagName('li');

	if (!mylis)
		return;

	for (j = 0; j < mylis.length; j++)
		mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
}
//-->
</script>

<ul id="menu">
    <li onclick="mShow(this);"><img src="headline.jpg" border="1" width="200" height="15">
    <ul>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
    </ul>
  </li>

  <br>

    <li onclick="mShow(this);"><img src="headline.jpg" border="1" width="200" height="15">
    <ul>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
    </ul>
  </li>

  <br>

    <li onclick="mShow(this);"><img src="headline.jpg"border="1">
    <ul>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
    </ul>
  </li>

  <br>

    <li onclick="mShow(this);"><img src="headline.jpg"border="1">
    <ul>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
    </ul>
  </li>

  <br>

    <li onclick="mShow(this);"><img src="headline.jpg"border="1">
    <ul>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
    </ul>
  </li>

  <br>

    <li onclick="mShow(this);"><img src="headline.jpg"border="1">
    <ul>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
      <li><a href="Seite.html" target="main">Seite</a></li>
    </ul>
  </li>


</body>



Geschrieben von _negel am 04.01.2008 um 13:52:

 

N bisschen was kann ich dir auf Anhieb erklären, den Rest müsste ich mir genauer ansehen.
Das erste ist ja bloß der Stylecode, dann geht's weiter mit Höhe und Breite usw. Den nächsten Teil versteh ich auch nich xD

Und das hier kann ich dir erklären:

code:
1:
2:
3:
Link[12] = "0|Intern";
  Link[13] = "1|Mitglieder|Pensioner.html|haupt";


Link[12] = "0|Intern";

Das ist erstmal die Nummer des Links (12). Die 0 steht wohl dafür, dass es ganz oben steht, also nicht erst durch Draufklicken angezeigt wird.

Link[13] = "1|Mitglieder|Pensioner.html|haupt";

Die 13 ist wieder die Nummer. 1 ist die 'Ebene' - das wird also erst durch Klicken angezeigt.
Mitglieder ist dann der Text, der auf dem Menü angezeigt wird. Das dahinter (Pensioner.html) ist die Seite die sich öffnen soll, wenn man auf 'Mitglieder' klickt und das haupt steht dafür, dass sich das ganze im Frame öffnen soll, der den Namen haupt trägt, also wohl das Main.



Geschrieben von Jenny am 06.01.2008 um 13:26:

 

Zitat:
Original von Jeany <3'
N bisschen was kann ich dir auf Anhieb erklären, den Rest müsste ich mir genauer ansehen.
Das erste ist ja bloß der Stylecode, dann geht's weiter mit Höhe und Breite usw. Den nächsten Teil versteh ich auch nich xD

Und das hier kann ich dir erklären:

code:
1:
2:
3:
Link[12] = "0|Intern";
  Link[13] = "1|Mitglieder|Pensioner.html|haupt";


Link[12] = "0|Intern";

Das ist erstmal die Nummer des Links (12). Die 0 steht wohl dafür, dass es ganz oben steht, also nicht erst durch Draufklicken angezeigt wird.

Link[13] = "1|Mitglieder|Pensioner.html|haupt";

Die 13 ist wieder die Nummer. 1 ist die 'Ebene' - das wird also erst durch Klicken angezeigt.
Mitglieder ist dann der Text, der auf dem Menü angezeigt wird. Das dahinter (Pensioner.html) ist die Seite die sich öffnen soll, wenn man auf 'Mitglieder' klickt und das haupt steht dafür, dass sich das ganze im Frame öffnen soll, der den Namen haupt trägt, also wohl das Main.

Hui, dankeschön Jeany, ich glaub ich habs gepeiltgroßes Grinsen


Forensoftware: Burning Board, entwickelt von WoltLab GmbH