Archivlink: javarea.de Forum > JavaScript > Foldoutmenue Vertikal anpassen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Foldoutmenue Vertikal anpassen

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von m!ster_hanky am 25.11.2007 - 14:35
Hallo,
ich benutze das oben genannte script für das menü auf meiner hp. leider ist das script so aufgebaut, dass alle menüpunkte beim laden der seite geschlossen werden, dass bedeutet, dass man, um alle unterpunkte eins menüpunktes durchzugucken, immer wieder den haupt menüpunkt öffnen muss...

kann mir jemand sagen, ob es möglich ist einen bestimmten menüpunkt beim laden der seite direkt öffnen zu lassen???


ich hoffe ich hab einigermaßen verständlich ausfdrücken können was ich will ^^

hier das script:

Scriptname: Foldoutmenue Vertikal
**********************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <title>Foldoutmenue Vertical</title>

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

#menu, #menu ul
{
padding: 0px;
margin: 0px;
}

#menu li
{
border: 1px solid #fff;
list-style-type: none;
font-weight: bold;
cursor: pointer;
display: block;
}

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

<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>

</head>
<body onload="hideSub();">

<ul id="menu">
<li class="show" onclick="mShow(this);">Options 1
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>
</li>

<li onclick="mShow(this);">Options 2
<ul>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>

<li onclick="mShow(this);">Options 3
<ul>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>

<li onclick="mShow(this);">Options 4
<ul>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
</ul>

</body>
</html>

*********************************************

geschrieben von Speedy19102000 am 27.11.2007 - 03:30
Moin!

Zitat
 Original geschrieben von m!ster_hanky am 25.11.2007 - 14:35

... kann mir jemand sagen, ob es möglich ist einen bestimmten menüpunkt beim laden der seite direkt öffnen zu lassen???


HTML-Quelltext
1: 

<li class="show" onclick="mShow(this);">


Mit class="show" in dieser Reihe öffnet das Untermenü, ohne dieses bleibt es geschlossen.

MfG Speedy

geschrieben von m!ster_hanky am 27.11.2007 - 14:55
danke

könnte ich an der stelle php nutzen um über den angeklickten link zu entscheiden welche menüpunkte göffnet werden?

geschrieben von Speedy19102000 am 27.11.2007 - 17:40
Tut mir leid, aber mit PHP kenne ich mich nicht aus!

MfG Speedy

geschrieben von m!ster_hanky am 27.11.2007 - 18:12
mhm, fällt dir sonst was ein wie ich beeinflussen kann welche der menüs bei einem seitenaufruf geöffnet werden und welche nicht???

geschrieben von Speedy19102000 am 27.11.2007 - 18:25
...
Arbeitest Du mit Frames, ich hoffe ja nicht, ansonsten kannst Du ja jede einzelne Seite mit

class="show"

individuell öffnen lassen.

Wenn ich Dich richtig verstanden habe.
...

geschrieben von m!ster_hanky am 27.11.2007 - 18:33
nein ich arbeite mit einem php include, dabei wird die index.php (in der sich auch das menü befindet) immer wieder neu geladen ... ich müsste in der datei dann aber das "show" jeweils an anderen stellen haben!?!?!?!

geschrieben von Speedy19102000 am 27.11.2007 - 18:39
...
Hast Du kompletten Quelltext, oder Deine Seite online?
...

geschrieben von m!ster_hanky am 27.11.2007 - 18:43
http://www.meersylt.de/neu/index.php

nich wundern, ich fummel da zur zeit ziemlich viel dran rum... funktioniert noch nich so ganz wie ich mir das vorstelle

geschrieben von m!ster_hanky am 27.11.2007 - 18:54
hier der aktuelle quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MeerSylt.de - Ihre Ferienwohnung mit Meerblick in List auf Sylt! MeerSylt Appartement - Familie Gössing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="http://www.goessing.net/meersylt/favicon.ico" type="image/x-icon">
<link href="meersylt.css" rel="stylesheet" type="text/css">



<style type="text/css" media="screen">
<!--
body
{
font-family: Berlin Sans FB;
font-size: 16px;
overflow: auto;
padding: 10px;
margin: 0px;
}

#menu, #menu ul
{
padding: 0px;
margin: 0px;
}

#menu li
{
border: 1px solid #fff;
list-style-type: none;
font-weight: normal;
cursor: pointer;
display: block;
}

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

<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>

</head>
<body onload="hideSub();">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="left"><img src="Bilder/meersylt1.gif" width="477" height="150" alt=""></div></td>
<td><div align="right"><img src="Bilder/meersylt2.gif" width="423" height="150" alt=""></div></td>
</tr>
<tr>
<td colspan="2"><div align="left"><img src="Bilder/meersylt3.gif" alt="" width="900" height="61" border="0" usemap="#Map"></div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">&nbsp;</td>
<td rowspan="2" style="background-image: url(Bilder/licht.gif); background-position:top; background-repeat:no-repeat" align="center" valign="top">
<br><?php
// GET- Variable laden
$site=$_GET['site'];
// Gibt es die geforderte Datei , oder ist der Variableninhalt leer?
if(file_exists($site.".php") or $site==""){
// Ist der Inhalt der Variable leer oder lautet der Inhalt main?
if(empty($site) or $site=="main")
// dann wird "main.php" inlcudiert
include("main.php");
} else if ($site=="faehre") {include ("http://www.frs.info/syltfaehre/de/index.jsp");}
else if ($site=="album") {include ("http://www.meersylt.de/bildergalerie/index.html");}
else if ($site=="impressum") {include ("http://www.disclaimer.de/disclaimer.htm");}
// existiert die geforderte Datei, dann include diese
else { include($site);
};
?>
</td>
</tr>
<tr>
<td width="200" valign="top" class="menue">
<ul id="menu">
<li<?php
$menue=$_GET['menue'];
if ($menue=="1")
{echo " class=\"show \"";}
else
{echo "";};
?>onclick="mShow(this);"><a href="index.php">MeerSylt Appartement</a><br>
<img src="Bilder/g.gif" width="49" height="16">
<ul>
<li><a href="index.php?site=album">Bildergalerie</a></li>
<li><a href="#">Ausstattung</a></li>
<li><a href="index.php?site=adresse.php">Adresse</a></li>
</ul>
</li>
<br>
<li onclick="mShow(this);">Belegung & Preise<br>
<img src="Bilder/g.gif" width="49" height="16">
<ul>
<li><a href="index.php?site=belegung.php">Belegungsplan</a></li>
<li><a href="#">Preisliste</a></li>
<li><a href="index.php?site=kurtaxe.php">Kurtaxe</a></li>
<li><a href="#">Sonderangebote</a></li>
<li><a href="#">Last-Minute</a></li>
</ul>
</li>
<br>
<li onclick="mShow(this);">Die Insel SYLT<br>
<img src="Bilder/g.gif" width="49" height="16">
<ul>
<li><a href="index.php?site=events.php">Events</a></li>
<li><a href="index.php?site=links.php">Links</a></li>
</ul>
</li>
<br>
<li onclick="mShow(this);">Ihre Anreise<br>
<img src="Bilder/g.gif" width="49" height="16">
<ul>
<li><a href="index.php?site=route.php">Routenplanung</a></li>
<li><a href="http://partners.webmasterplan.com/click.asp?ref=398409&site=2894&type=text&tnb=1" target="_blank">Autozug</a></li>
<li><a href="http://www.frs.info/syltfaehre/de/index.jsp" target="_blank">Fähre</a></li>
<li><a href="#">Adresse</a></li>
</ul>
</li>
<br>
<li onclick="mShow(this);">Kontakt<br>
<img src="Bilder/g.gif" width="49" height="16">
<ul>
<li><a href="#">Autozug</a></li>
<li><a href="index.php?site=faehre">Fähre</a></li>
<li><a href="index.php?site=adresse.php">Adresse</a></li>
</ul>
</li>
</ul></td>
</tr>
</table>
<table width="100%" height="40" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100" style="background-image:url(Bilder/ul.gif); background-repeat:no-repeat; background-position:right"></td>
<td valign="bottom" style="background-image:url(Bilder/m.gif); background-repeat:repeat-x; background-position:bottom"><div align="right"><font face="Berlin Sans FB">
Startseite | Sitemap | History | Statistik | <a href="index.php?site=impressum">Impressum</a></font></div></td>
<td width="100" style="background-image:url(Bilder/ur.gif); background-repeat:no-repeat; background-position:left"></td>
</tr></table>
<map name="Map">
<area shape="rect" coords="329,21,587,48" href="index.php" target="_parent" alt="... zur Stratseite!">
</map>
</body>
</html>

geschrieben von Speedy19102000 am 27.11.2007 - 19:03
...
Wenn Du z.B. auf "Belegung & Preise" klickst und dann auf "Belegungsplan" klickst,
dann muss in der "belegung.php" dort class="show" in diesen Menüpunkt hinein.

Wenn das so nicht machbar ist, steh ich auch auf den Schlauch, was ich stark denke,
weil die seite(n) , Denke ich, mit PHP generiert werden.

Vielleicht kann Dir dann ein hoffendlich anderer in diesem Forum helfen!

MfG Speedy

geschrieben von m!ster_hanky am 27.11.2007 - 20:18
genau richtig, die seite wird mit php generiert ... danke trotzdem für dein tip, vielleicht fällt mir ja noch was ein!

geschrieben von Klaush am 28.11.2007 - 08:49
Wenn du die Seite per Variable $site übergibst, dann bietet es sich doch an, eine weitere variable für das Menü zu übergeben.

Bsp:
http://www.meersylt.de/neu/index.php?menue=1&site=album

Da PHP noch vor HTML und Js ausgeführt wird, könnte man die Abfrage dann wie oben und mittels eines switch() folgendes prüfen.
PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 

<?PHP
  $d = "show";
  switch($_GET['menue'])
    {
        case 1:     $menue1 = $d; break;
        case 2:     $menue2 = $d; break;
        case 3:     $menue3 = $d; break;
        case 4:     $menue4 = $d; break;
      default:     $menue1 = $d; break;
    }
?>



Das Menue ist dann ebenfalls abzuändern, auch die Links in den Menues müssen abgeändert werden, siehe rote Markierung.

Bsp:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 

<li onclick="mShow(this);" class="<?PHP echo $menue1; ?>"><a href="index.php">MeerSylt Appartement</a>

          <img src="Bilder/g.gif" width="49" height="16"> 
          <ul>
            <li><a href="index.php?menue=1&site=album">Bildergalerie</a></li>
            <li><a href="#">Ausstattung</a></li>
            <li><a href="index.php?menue=1&site=adresse.php">Adresse</a></li>
          </ul>
        </li>
        <br>

        <li onclick="mShow(this);" class="<?PHP echo $menue2; ?>">Belegung & Preise<br>
          <img src="Bilder/g.gif" width="49" height="16"> 
          <ul>
            <li><a href="index.php?menue=2&site=belegung.php">Belegungsplan</a></li>
            <li><a href="#">Preisliste</a></li>
            <li><a href="index.php?menue=2&site=kurtaxe.php">Kurtaxe</a></li>
            <li><a href="#">Sonderangebote</a></li>

            <li><a href="#">Last-Minute</a></li>
          </ul>
        </li>


Es soll nur als Ansatz dienen, probier etwas und wenn du nicht weiter kommst, dann melde dich noch einmal.

geschrieben von m!ster_hanky am 28.11.2007 - 21:29
hey, das hat im ersten schritt schon mal super geklappt ... vielen dank für die hilfe ...

entspricht zwar noch nicht 100%ig dem wie ich es mir vorgestellt hab aber ich teste mal ein bisschen....

geschrieben von m!ster_hanky am 30.11.2007 - 22:43
PHP-Quelltext
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: 

<style type="text/css" media="screen">
<!--
body
{
    font-family: Berlin Sans FB;
    font-size: 16px;
    overflow: auto;
    padding: 10px;
    margin: 0px;
}

#menu, #menu ul
{
    padding: 0px;
    margin: 0px;
}

#menu li
{
    border: 1px solid #fff;
    list-style-type: none;
    font-weight: normal;
    cursor: pointer;
    display: block;
}

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

<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>
<?php
$x = "show";
  switch($_GET['menue'])
    {
        case 1:     $menue1 = $x; break;
        case 2:     $menue2 = $x; break;
        case 3:     $menue3 = $x; break;
        case 4:     $menue4 = $x; break;
        case 5:     $menue5 = $x; break;
//      default:    $menue1 = $x; break;
    }
    
    
    $site = $_GET['site']; 
    if(file_exists($site.".php") or $site==""){  
              if(empty($site) or $site=="start"){
              $site = "start.php";
              } 
    } 
    else if ($site=="impressum") {$site=="http://www.disclaimer.de/disclaimer.htm";}           
    else {
    $site == $site.".php";
    };
?>
</head>
<body onload="hideSub();">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div align="left"><img src="Bilder/meersylt1.gif" width="477" height="150" alt=""></div></td>
    <td><div align="right"><img src="Bilder/meersylt2.gif" width="423" height="150" alt=""></div></td>
  </tr>
  <tr>
    <td colspan="2"><div align="left"><img src="Bilder/meersylt3.gif" alt="" width="900" height="61" border="0" usemap="#Map"></div></td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="200">&nbsp;</td>
    <td rowspan="2" style="background-image: url(Bilder/licht.gif); background-position:101pt 0pt; background-repeat:no-repeat" align="center" valign="top"> 
        <br>
<?php include ($site); ?>
  </td>
  </tr>
  <tr> 
    <td width="200" valign="top" class="menue"> 
      <ul id="menu">
        <li class="<?PHP echo $menue1; ?>" onclick="mShow(this);">MeerSylt Appartement<br>
          <img src="Bilder/g.gif" width="49" height="16"> 
          <ul>
            <li><a href="index.php?site=album&menue=1">Bildergalerie</a></li>
            <li><a href="index.php?site=ausstattung&menue=1">Ausstattung</a></li>
            <li><a href="index.php?site=adresse&menue=1">Adresse</a></li>
          </ul>
        </li>
        <br>
        <li class="<?PHP echo $menue2; ?>" onclick="mShow(this);">Belegung & Preise<br>
          <img src="Bilder/g.gif" width="49" height="16"> 
          <ul>
            <li><a href="index.php?site=belegung&menue=2">Belegungsplan</a></li>
            <li><a href="index.php?site=preise&menue=2">Preisliste</a></li>
            <li><a href="index.php?site=kurtaxe&menue=2">Kurtaxe</a></li>
            <li><a href="index.php?site=angebote&menue=2">Sonderangebote</a></li>
            <li><a href="index.php?site=lastminute&menue=2">Last-Minute</a></li>
          </ul>
        </li>
        <br>
        <li class="<?PHP echo $menue3; ?>" onclick="mShow(this);">Die Insel SYLT<br>
          <img src="Bilder/g.gif" width="49" height="16"> 
          <ul>
            <li><a href="index.php?site=events&menue=3">Events</a></li>
            <li><a href="index.php?site=links&menue=3">Links</a></li>
          </ul>
        </li>
        <br>
        <li class="<?PHP echo $menue4; ?>" onclick="mShow(this);">Ihre Anreise<br>
          <img src="Bilder/g.gif" width="49" height="16"> 
          <ul>
            <li><a href="index.php?site=route&menue=4">Routenplanung</a></li>
            <li><a href="index.php?site=autozug&menue=4">Autozug</a></li>
            <li><a href="index.php?site=faehre&menue=4">Fähre</a></li>
            <li><a href="index.php?site=adresse&menue=4">Adresse</a></li>
          </ul>
        </li>
        <br>
        <li class="<?PHP echo $menue5; ?>" onclick="mShow(this);">Kontakt<br>
          <img src="Bilder/g.gif" width="49" height="16">
          <ul>
            <li><a href="index.php?site=kontakt&menue=5">Kontaktformular</a></li>
            <li><a href="index.php?site=adresse.php&menue=5">Adresse</a></li>
          </ul>
        </li>
      </ul><br></td>
  </tr>
</table>
<table width="100%" height="40" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100" style="background-image:url(Bilder/ul.gif); background-repeat:no-repeat; background-position:right"></td>
    <td valign="bottom" style="background-image:url(Bilder/m.gif); background-repeat:repeat-x; background-position:bottom"><div align="right"><font face="Berlin Sans FB"> 
        <a href="index.php">Startseite</a> | Sitemap | History | Statistik | <a href="index.php?site=impressum">Impressum</a></font></div></td>
    <td width="100" style="background-image:url(Bilder/ur.gif); background-repeat:no-repeat; background-position:left"></td>
  </tr></table>
<map name="Map">
  <area shape="rect" coords="329,21,587,48" href="index.php" target="_parent" alt="... zur Stratseite!">
</map>
</body>
</html>


das is der aktuelle quelltext meiner index.php ...

als standard habe ich ja definiert dass $site==$site.".php" is ... das funktioniert auch wie man unter http://www.meersylt.de/neu/index.php sieht

leider funktioniert das system nicht mehr wenn ich etwas anderes als "site" übergebe ... beispiel "adressse", obwohl es adresse.php gibt kommt eine fehlermeldung die ich nicht verstehe....

kann mir jemand helfen???


DANKE


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.