✔ dynamisches Css Menü

[Starfox2007]

Hi zusammen,

Ich habe ein kleines Problem mit diesem dynamischen CSS Menü Code

der von hier ist: http://wizardinternetsolutions.com/web-database-design/single-query-dynamic-multi-level-menu/

Und zwar möchte ich das <ul> einmalig am Anfang mit <ul class='menue'> Anfängt und für alle anderen <ul> tags soll je tiefer die Ebene geht <ul class='submenue'> bzw <ul class='submenue2'> ... eingefügt werden.

Für die <li> Tags möchte ich das wenn Parent gleich 0 <li class='xyz'> eingetragen wird, bei den "Submenüs" kann es ganz einfach nur <li> sein.

sprich

<ul class='menue'>
<li class='Hauptmenue'></li>
<li class='Hauptmenue'></li>
<li class='Hauptmenue'></li>
<ul class='submenue'>
<li></li>
<ul class='submenue2'>
<li></li>
.
.
.

</ul></ul>


</ul>

<?php
// Select all entries from the menu table
$result=mysql_query("SELECT id, label, link, parent FROM menue ORDER BY parent, sort, label");
// Create a multidimensional array to conatin a list of items and parents
$menu = array(
    'items' => array(),
    'parents' => array()
);
// Builds the array lists with data from the menu table
while ($items = mysql_fetch_assoc($result))
{
    // Creates entry into items array with current menu item id ie. $menu['items'][1]
    $menu['items'][$items['id']] = $items;
    // Creates entry into parents array. Parents array contains a list of all items with children
    $menu['parents'][$items['parent']][] = $items['id'];
}



// Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu)
{
   $html = "";
   
   if (isset($menu['parents'][$parent]))
   {
      $html .= "<ul>\n";
       
	   foreach ($menu['parents'][$parent] as $itemId)
       {
          if(!isset($menu['parents'][$itemId]))
          {
             $html .= "<li>\n  <a href=?page=".$menu['items'][$itemId]['link'].">".$menu['items'][$itemId]['label']."</a>\n</li> \n";
          }
          if(isset($menu['parents'][$itemId]))
          {
             $html .= "
             <li>\n  <a href=?page=".$menu['items'][$itemId]['link'].">".$menu['items'][$itemId]['label']."</a> \n";
             $html .= buildMenu($itemId, $menu);
             $html .= "</li> \n";
          }
       }
       $html .= "</ul>\n";
   }
   return $html;
}

?>

Ich hoffe es kann mir einer weiterhelfen

 

[threadi]

Dein HTML-Code hier ist zunächst mal falsch:

<ul class='menue'>
<li class='Hauptmenue'></li>
<li class='Hauptmenue'></li>
<li class='Hauptmenue'></li>
       <ul class='submenue'>
               <li></li>
                  <ul class='submenue2'>
                                              <li></li>
                                                .
                                                .
                                                .
    </ul></ul>
</ul>

Direkt innerhalb von <ul> darf nur <li> vorkommen. Untermenüpunkte müssen dann innerhalb von <li> eingefügt werden. Also:

<ul class='menue'>
<li></li>
<li></li>
<li>
       <ul>
               <li>
                  <ul>
                                              <li></li>
                                                .
                                                .
                                                .
    </ul></li></ul></li>
</ul>

Dadurch löst sich dann aus meiner Sicht auch dein "Problem". Du wolltest mit diesen Klassen eine grafische Unterteilung per CSS erreichen, stimmts? Das brauchst Du nicht. Du musst das Menü wie oben gezeigt aufbauen, dann kannst Du es auch per CSS ohne Klassen stylen.

 

[Starfox2007]

Den HTML Code habe ich nur im Beitrage falsch da ich mich vertippt habe.

Ich habe inzwischen eine Lösung für mein Problem gefunden und in das obige Script Klassen eingefügt die ich dann genau im CSS ansprechen kann.

Nur eine Frage hätte ich noch, wenn ich das NUR das erste Listenelement mit Hover ansprechen will was muss ich dann verwenden ?

ul a:hover ...

spricht alle UL Tags an, ich möchte mit Hover aber NUR das im HTML jeweils erste UL Tag ansprechen.

 

[para_noid]

Sicher, dass du das erste ul ansprechen willst, nicht das erste li?

Ich weiß nicht wie dein jetziges Script aussieht, aber du könntest bei der Menügenerierung dem ersten ul eine id zuweisen und die dann im CSS ansprechen.

Unschöner, aber auch funktionierend, ist es, erst allen ul ein hover zuzuweisen und danach den Kinduls diese Formatierung wieder wegzunehmen, ungefähr so:

ul:hover{
  background-color: red;
}

ul ul:hover{
  background-color: transparent;
}

Mir würde auch noch die Pseudoklasse firstchild einfallen, aber die hab ich noch nie auf ul benutzt und weiß von daher nicht, ob das überhaupt hinhaut.

 

[Starfox2007]

Ich hab mir jetzt ein eigenes PHP Script für die Menügestaltung geschrieben wo ich meine CSS Klassen gleich drin habe.

echo "<ul class='menue'>\n";
  
// Datenbank auslesen
$result = $db->query("SELECT id, label, link, parent, class FROM tabelle ORDER BY sort");
while ($menuelist = $db->fetchassoc($result))
{
    
	// Hauptmenü schreiben
	if($menuelist["parent"] == "0") {
	

if(preg_match("/http/", $menuelist["link"])) {
	
       echo "<li class='menue-".$menuelist["class"]."'><a href='".$menuelist["link"]."'><span>".$menuelist["label"]."</span></a></li>\n";
 
   }else{	
   
        if($page == $menuelist["link"]) {
				
       echo "<li class='menue-".$menuelist["class"]."'><a class='menue-active' href='?page=".$menuelist["link"]."'><span>".$menuelist["label"]."</span></a></li>\n";

   }else{
			
        echo "<li class='menue-".$menuelist["class"]."'><a href='?page=".$menuelist["link"]."'><span>".$menuelist["label"]."</span></a></li>\n";
			
			
		}

          }
 
            }
	  
	  

        }

echo "</ul>\n";

Wenn mir jetzt noch einer sagen kann wie ich jetzt das Untermenü hier reinbekomme bin ich glücklich Hauptmenü ist mit Parent 0 gesetzt Untermenü ist an die ID des Hauptmenüs gebunden.

id | parent | label
----------------------------------------------------------
1 | 0 | home
2 | 0 | news
3 | 0 | impressum
4 | 0 |
5 | 0 |
6 | 0 |
7 | 2 |

 

[Starfox2007]

Habs inzwischen hinbekommen.

Vielen Dank nochmal an para_noid und threadi