Dynamischer Menüaufbau, Probleme

OJMD

Hallo zusammen,

ich weiß nicht mehr weiter. Wo liegt mein Denkfehler.
Ich möchte eine Dynamisches Menü erstellen, habe eine Tabelle mit dem Inhalt:
id -> benötige ich für die Seiten zuweisung
menuname -> Menüname
typ -> 1 für Hauppunkt / 2 für Unterpunkt
menuid -> für die id dem zugeordneten Hauptpunkt
pos -> für die manuelle reihenfolge

Allso wenn ich die Seite aufrufe sollen nur die Hauppunkte zusehen sein.
Wenn ich nun ein Link aufrufe, soll geprüft werden ob Unterpunkte da sind und wenn ja sollen diese unter dem Haupt aufgelistet werden. Dann sollen die restlichen Punkte drunter wieder aufgebaut werden.

Nur es klapt nicht was für ein Denkfehler mache ich?

HTML

<?
  include("mysql.inc");
  include("#_functions.inc");
  $title = "Blog";


$menu = $_GET['menu'];
?>




<html>
<head>
<title><?=$title ?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<table border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">


<table border="0">
<tr>
<td>


<table border="0" width="800" height="600">
<tr><td colspan="3" align="center" height="20"><big><?=$title ?></big></td></tr>
<tr>
<td align="center" valign="top" width="190">
<?

	$query = "SELECT * FROM OJ_Brain_Menu WHERE Pos";
  	$sql = mysql_query($query);

        while ($ds = mysql_fetch_object($sql)){ 


	$id 		= $ds->id;
  	$menu_name 	= $ds->menuname;
	$menu_id	= $ds->menuid;
	$typ		= $ds->typ;
	$farbe   	= $ds->farbe;




if ($menu == $id) {


		echo "<table border=\"1\" width=\"100\">";
		echo "<tr><td align=\"center\" height=\"30\">$menu_name</td></tr>";
		echo "</table>";


		$query = "SELECT * FROM OJ_Brain_Menu WHERE menuid = id";
  		$sql = mysql_query($query);
  		while ($ds = mysql_fetch_object($sql)){ 


		$id 		= $ds->id;
 	 	$menu_name 	= $ds->menuname;
		$menu_id	= $ds->menuid;
		$typ		= $ds->typ;
		$farbe   	= $ds->farbe;

		if ($menu == $id) {


		echo "<table border=\"1\" width=\"100\">";
		echo "<tr><td align=\"center\" height=\"30\">$menu_name</td></tr>";
		echo "</table>";
		} else {
		echo "<table border=\"1\" width=\"100\">";
		echo "<tr><td bgcolor=\"blue\" align=\"center\" height=\"30\"><a href=\"menue.php?menu=$id\">$menu_name</a></td></tr>";
		echo "</table>";
		}}


 	} elseif($typ == 1) { 


		echo "<table border=\"1\" width=\"100\">";
		echo "<tr><td bgcolor=\"blue\" align=\"center\" height=\"30\"><a href=\"menue.php?menu=$id\">$menu_name</a></td></tr>";
		echo "</table>";
   	} else { }


}
mysql_close($dz);
    ?>


</td>
<td width="10">
</td>
<td valign="top" width="600">
<iframe src="./anzeige.php?id=<?=$menu ?>" width="100%" height="100%" name="Fenster">



Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
  aufrufen: [url='../../../index.htm']SELFHTML[/url]</p>




</iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

GreenRover

mache erstens das menu als list ul und li

dann mittels CSS ul ul { display: none; }
so das das untermenu weg ist..
dann aufs ul:

onMouseOver="this.style.display='inline';" onMouseOut="this.style.display='none';"

OJMD

Vielen Dank GreenRover,

hm, ..."mache erstens das menu als list ul und li "

kannst Du mir ein keines Beispiel geben?

Gruß Oli

GreenRover

am einfachsten so:

Code

<style type="text/css">
.menu, .menu ul 
{
	list-style: none;
	padding: 0px;
	margin: 0px;
}


.menu li 
{
	padding: 0px;
	margin: 0px;
	padding-left: 5px;
}
</style>
</head>


<body>
<ul class="menu">
 [*]H meneu
 [*]H meneu
 <li onmouseover="this.getElementsByTagName('ul')[0].style.display='inline'" onmouseout="this.getElementsByTagName('ul')[0].style.display='none';">H meneu
 <ul style="display:none;">
  [*]U Meneu  
  [*]U Meneu  
  [*]U Meneu  
 [/list] 
 
 [*]H meneu
 [*]H meneu
[/list]
</body>

Alles anzeigen

OJMD

Das ist eine interessante Idee. HAb ein wenig rum probiert und das onmousover durch onklick ersetzt.

Eine Frage, wie sieht es aus wenn ich ein anderes Untermenü öffne und das andere wieder ausgeblendet wird. Es soll immer nur ein Untermenü eingeblendet sein.

Vielen Dank+Gruß Oli

GreenRover

das heist, das untermenu soll sollange offen bleiben, solange kei nanderes geöffnet wird..

naja da fangen wir langsam echt mal mit ner runde js an:

Code

<style type="text/css">
.menu, .menu ul
{
   list-style: none;
   padding: 0px;
   margin: 0px;
}


.menu li
{
   padding: 0px;
   margin: 0px;
   padding-left: 5px;
}
</style>
<script type="text/javascript" language="javascript">
function openMenu( obj )
{
 var ebene = obj.parentNode.childNodes;
 
 for (i=0 ; i<ebene.length ; i++)
 {
  try 
  {
   throw ebene[i].getElementsByTagName('ul')[0].style;
  } catch (e) { 
   e.display='none';
  } 
 }
 
 obj.getElementsByTagName('ul')[0].style.display='inline';
}
</script>
</head>


<body>
<ul class="menu">
 [*]H meneu
 <li onclick="openMenu(this);">H meneu
 <ul style="display:none;">
  [*]U Meneu 
  [*]U Meneu 
  [*]U Meneu 
 [/list]
 
 [*]H meneu
 <li onclick="openMenu(this);">H meneu
 <ul style="display:none;">
  [*]U Meneu 
  [*]U Meneu 
  [*]U Meneu 
 [/list]
 
 <li onclick="openMenu(this);">H meneu
 <ul style="display:none;">
  [*]U Meneu 
  [*]U Meneu 
  [*]U Meneu 
 [/list]
 
 [*]H meneu
[/list]
</body>

Alles anzeigen

ich hoffe mal du verstehst das spiel da überhaupt ?!

OJMD

Klasse GreenRover genau so meinte ich es, vielen Dank für deine Mühe.

So jetzt muss ich nur noch mich darum kümmern das ich beim auslesen meiner Datenbank deine code Struktur aufbaue.

Danke noch mal, Gruß+Dank Oli

PS:
Deinen Code verstehen ist leider nicht mein Problem im Gegenteil, selber darufkommen oder richtig anwenden schon eher.

GreenRover

So du verstehst das:

Code

function openMenu( obj )
{
 var ebene = obj.parentNode.childNodes; 
 // parentNode:  das nächst höhere Tag auswählen <ul class="menu">
 // childNodes:  alle Tags die sich in unter der aktuellen auswähl befinden <ul class="menu"> auswählen
 
 for (i=0 ; i<ebene.length ; i++)     // alle tags im <ul class="menu"> durchgeheb
 {
  try                                                    // versuche zu erstellen
  {
   throw ebene[i].getElementsByTagName('ul')[0].style;  // wenn das aktuelle [*] ein <ul> beihalt, wähle die CSS optionen aus
  } catch (e) {            // wenn erfolgreich
   e.display='none';       // setze es auf unsichtbar
  }                        //  effect, alle menues sind eingeklapt
 }
 
 obj.getElementsByTagName('ul')[0].style.display='inline';  // wähle nun das untergeordnette ul des überbenene [*] aus und setze den style auf inline (in reihe == sichtbar)
} 








openMenu(this); // übergabe des aktuellen Tags [*]

Alles anzeigen

Ein toller Code, das mit dem aufklappbarem Menü!
Suche schon seit langem nach so was für meine Seite!

Was muss ich denn ändern, wenn ich will, dass bereits angeklickte Untermenüs offen bleiben, wenn ich ein anderes Hauptmenü anklicke ?

Danke!

CM

Tags

Benutzer online in diesem Thema