Aufklappmenü - PHP und CSS - Verbesserungen

[einermeiner]

Ich habe auf meiner Webseite bereits ein Aufklappmenü mit CSS-Hover gehabt und wollte dann jeweil die aktuelle Seite hervorheben bzw. den aktuellen Unterpunkt "aufklappen".
Nun habe ich folgenden Code geschrieben, gibt es da Verbesserungen, weil ich noch totaler Anfänger bin, Sicherheitsprobleme sehe ich keine, aber das hat ja nichts zu heißen...

Beispiel Menüstruktur (aktulle Seite: "Startseite"), bei href="" ist jeweils noch die URL eingetragen

       <ul>
    <li id="akt_up">Startseite</li>

    <li><a target="_top" href=""></a></li>

    <li><a target="_top" href=""></a></li>

    <li class="off">Software

      <ul class="menueliste">
        <li><a target="_top" href="" >Unterpunkt 1</a></li>

        <li><a target="_top" href="">Unterpunkt 2</a></li>
      </ul>
    </li>
  </ul>

PHP Code für die Navigation:

//Auslesen der aktuellen Seite (alle Dateien sind im Hauptverzeichnis)
$aktuell = substr($_SERVER['SCRIPT_NAME'], 1 );

$seiten[] = array ( "name" => "Impressum", "url" => "impressum.php", "sonstiges" => 'accesskey="1"'); // Beispiel - Array 

$ausgabe = '';

foreach ( $seiten as $seite )
{
    if ( isset ($seite['sub']) )
    {
        $check = false;
        $ausgabe .= "\t\t" . '<li class="off" id="{[check]}">' . 
$seite['name'] . "\n" . "\t\t\t" . '<ul class="menueliste">' . "\n";
        foreach ( $seite['sub'] as $unterseite )
        {
            if ($unterseite['url'] == $aktuell)
            {
                $ausgabe.= "\t\t\t\t" . '<li id="akt_sub">' . 
$unterseite['name']. '</li>' . "\n";
                $check = true;
            }
            
            else
            {
                $ausgabe.= "\t\t\t\t" .'<li><a rel="nofollow" target="_top" 
href="example.com/?url=' . $unterseite['url'] . '">' . $unterseite['name']. 
'</a></li>' . "\n";
            }
        }
        if ( $check )
            $ausgabe = str_replace('id="{[check]}"', 'id="akt"', $ausgabe);
        else
            $ausgabe = str_replace('id="{[check]}"', '', $ausgabe);
        $ausgabe .= "\t\t\t</ul>\n\t\t</li>\n";
    }
    else
    {
        if ( $seite['url'] == $aktuell )
        {
            $ausgabe.= "\t\t" . '<li id="akt_up">' . $seite['name']. "</li>\n";
        }
        else
        {
            $ausgabe.= "\t\t" . '<li><a target="_top" href="http://example.com/?url=' . $seite['url'] . '" ' . 
$seite['sonstiges'] .
 '>' . $seite['name']. '</a></li>' . "\n";
        }
                
    
    }
}
    echo $ausgabe; 

[Kropff]

Bitte brich vorher deinen Code vernünftig um. Kein Mensch scrollt gerne horizontal.

Danke
Peter

[einermeiner]

So sollte es besser sein

[mermshaus]

Dein Beispiel ist auch nicht gerade günstig gewählt.

Klar könnte man sich als Leser selbst eine vollständigere Menüstruktur als Eingabe schreiben, nur erhöht das den Aufwand und damit die Chance auf viele Antworten.

Ich würde außerdem den Algorithmus zur Darstellung definitiv noch in einer Funktion verpacken.

[einermeiner]

Wie meinst du das mit dem Beispiel, habe nun noch eines, bei dem ein Unterpunkt die aktuelle Seite ist.
Welchen Vorteil hat es als Funktion, dass es übersichtlicher wird oder noch etwas?

<div class="steuerung">
      <ul>
    
          <li><a target="_top" href="http://example.com/?url=index.php" >Startseite</a></li>
        <li class="off" id="akt">Videos
            <ul class="menueliste">
                <li id="akt_sub">FritzFax</li>
                <li><a target="_top" href="http://example.com/?url=systemwiederherstellung.php">Systemwiederherstellung</a></li>

                <li><a target="_top" href="">Macrium Reflect</a></li>
            </ul>
        </li>
        <li class="off" >Betriebssystem
            <ul class="menueliste">
                <li><a target="_top" href="http://example.com/?url=gruppenrichtlinien.php">Gruppenrichtlinien XP</a></li>
                <li><a target="_top" href="http://example.com/?url=suchen_statt_oeffnen.php">Suchen statt &ouml;ffnen</a></li>
            </ul>

        </li>
        <li><a target="_top" href="http://example.com/?url=impressum.php" accesskey="1">Impressum</a></li>
    </ul>

  </div>

[mermshaus]

Ich meine, dass ich bei einer Eingabe wie…

//Auslesen der aktuellen Seite (alle Dateien sind im Hauptverzeichnis)
$aktuell = substr($_SERVER['SCRIPT_NAME'], 1 );

$seiten[] = array ( "name" => "Impressum", "url" => "impressum.php", "sonstiges" => 'accesskey="1"'); // Beispiel - Array 

…eine Ausgabe von genau einem Eintrag bekomme. Das ist nicht sonderlich spektakulär.

Was das Auslagern in eine Funktion angeht: Du hast definierte Eingaben und Ausgaben, blockierst keine Variablennamen, kannst den Code ohne Redundanz an mehreren Stellen einsetzen, hast die Funktionalität für eine etwaige Wiederverwendung schön zusammen, …

[einermeiner]

Hier noch ein Beispiel, das deckt dann ja alles ab, hoffe ich (einmal obere Ebene und einmal untere)

$seiten[] = array ( "name" => "Software", "sub" =>
                 array(
                     array( "name" => "Antivir Werbung", "url" => "antivir_werbung.php" ),
                    array("name" => "Fritzfax Anleitung", "url" => "fritzfax_anleitung.php")
                      )
                   ); 

[mermshaus]

Sorry, das wird so nichts. Wenn du Meinungen zu deinem Code hören möchtest, solltest du den Leuten wenigstens ein halbwegs brauchbares Testbeispiel liefern.

Ich habe gerade versucht, mir was zusammenzudoktorn (was deine Aufgabe wäre), aber ich hänge mittlerweile fest, weil ich keinerlei Anhaltspunkte habe, was wann korrekterweise passieren oder dargestellt werden sollte.

Du hast zum Beispiel CSS-IDs und -Klassen vergeben, lieferst aber kein Stylesheet mit. Bei deinem Menü geht es darum, dass der aktuell markierte Top-Level-Eintrag „ausgeklappt“ werden soll, aber du lieferst nur einen einzigen Top-Level-Eintrag als Testdaten mit. Außerdem zeigen deine Links aus irgendeinem Grund auf example.org (Pluspunkte für die Verwendung der Domain ), manche haben ein „nofollow“ gesetzt und insgesamt ist der Code ohne Kommentare nicht wirklich zu durchblicken.

Mir ist klar, dass es für Anfänger nicht ganz leicht ist, zu entscheiden, was relevant ist und was nicht, fass diesen Post also bitte nicht falsch auf, aber es ist, wie es ist: In der aktuellen Form ist damit nicht viel anzufangen.



Mein Versuch:

<?php

function getMenu($seiten)
{
    //Auslesen der aktuellen Seite (alle Dateien sind im Hauptverzeichnis)
    $aktuell = substr($_SERVER['SCRIPT_NAME'], 1 );

    $ausgabe = '';

    foreach ($seiten as $seite) {
        if (isset($seite['sub'])) {
            $check = false;
            $ausgabe .= "\t\t" . '<li class="off" id="{[check]}">' .
                    $seite['name'] . "\n" . "\t\t\t" . '<ul class="menueliste">' . "\n";

            foreach ($seite['sub'] as $unterseite) {
                if ($unterseite['url'] == $aktuell) {
                    $ausgabe.= "\t\t\t\t" . '<li id="akt_sub">' .
                            $unterseite['name'] . '</li>' . "\n";
                    $check = true;
                } else {
                    $ausgabe.= "\t\t\t\t" . '<li><a rel="nofollow" target="_top"
    href="example.com/?url=' . $unterseite['url'] . '">' . $unterseite['name'] .
                            '</a></li>' . "\n";
                }
            }

            if ($check) {
                $ausgabe = str_replace('id="{[check]}"', 'id="akt"', $ausgabe);
            } else {
                $ausgabe = str_replace('id="{[check]}"', '', $ausgabe);
            }

            $ausgabe .= "\t\t\t</ul>\n\t\t</li>\n";
        }
        else {
            if ($seite['url'] == $aktuell) {
                $ausgabe.= "\t\t" . '<li id="akt_up">' . $seite['name'] . "</li>\n";
            } else {
                $ausgabe.= "\t\t" . '<li><a target="_top" href="http://example.com/?url=' . $seite['url'] . '" ' .
                        $seite['sonstiges'] .
                        '>' . $seite['name'] . '</a></li>' . "\n";
            }
        }
    }

    return $ausgabe;
}



$seiten[] = array ( "name" => "Software", "sub" =>
                 array(
                     array( "name" => "Antivir Werbung", "url" => "antivir_werbung.php" ),
                    array("name" => "Fritzfax Anleitung", "url" => "fritzfax_anleitung.php")
                      )
                   );

?><!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>New</title>
    <style type="text/css">

#menu #akt {
            background: red;
}

#menu #akt_sub {
    background: green;
}

#menu #akt_up {
    background: blue;
}

#menu .off {
    background: gray;
}

#menu .menueliste {
    background: turquoise;
}

    </style>
</head>

<body>
    <ul id="menu">
    
    <?php echo getMenu($seiten); ?>

    </ul>

</body>

</html>

[einermeiner]

Ich versuches es noch einmal und hoffe, dieses Mal alles dabei zu haben, die vorigen Beiträge erstmal vergessen (keine Ahnung wo nofollow herkam)
Man soll doch im Forum immer example nutzen oder?

function aufklappmenue( array $seiten, $aktuell)
{
    $ausgabe = '';
   
    foreach ( $seiten as $seite )
    {
        if ( isset ($seite['sub']) )  //Punkt mit Unterpunkten
        {
            $check = false;
//Toplevel Eintrag (ohne Verlinkung) mit CSS
            $ausgabe .= "\t\t" . '<li class="off" id="{[check]}">' . 
$seite['name'] . "\n" . "\t\t\t" . '<ul class="menueliste">' . "\n";
//Unterseiten werden gebildet
            foreach ( $seite['sub'] as $unterseite )
            {
                if ($unterseite['url'] == $aktuell)
                {
                    $ausgabe.= "\t\t\t\t" . '<li id="akt_sub">' . $unterseite['name']. '</li>' . "\n";
                    $check = true;
                }
               
                else
                {
                    $ausgabe.= "\t\t\t\t" .'<li><a target="_top" 
href="http://example.com/?url=' . $unterseite['url'] . '">' . 
$unterseite['name']. '</a></li>' . "\n";
                }
            }
//wenn einer der Unterpunkte die aktuelle Seite ist, dann soll der zum 
//Unterpunkt passende Top-Level-Eintrag mit einer ID versehen werden 
//(zur Hervorhebung), ansonsten wird der Platzhalter gelöscht
            if ( $check )
                $ausgabe = str_replace('id="{[check]}"', 'id="akt"', 
$ausgabe);
            else
                $ausgabe = str_replace('id="{[check]}"', '', $ausgabe);
            $ausgabe .= "\t\t\t</ul>\n\t\t</li>\n";
        }
        else
        {
            if ( $seite['url'] == $aktuell )
            {
                $ausgabe.= "\t\t" . '<li id="akt_up">' . $seite['name']. 
"</li>\n";
            }
            else
            {
                $ausgabe.= "\t\t" . '<li><a target="_top" 
href="http://example.com/?url=' . $seite['url'] . '" ' . $seite['sonstiges']
 . '>' . $seite['name']. '</a></li>' . "\n";
            }
                   
       
        }
    }
        return $ausgabe;
} 

Auf der Seite:

<?php $aktuell = basename($_SERVER['SCRIPT_NAME'] );
//mehrdimensionales Array mit allen Seiten und Unterseiten
$seiten[] = array ( "name" => "Startseite", "url" => "index.php" );
$seiten[] = array ( "name" => "HP ProBook 4720S", "url" => "hp_probook_4720s_wt237ea_test.php" );

$seiten[] = array ( "name" => "Software", "sub" =>
                 array(
                     array( "name" => "Antivir Werbung", "url" => "antivir_werbung.php" ),
                    array("name" => "Fritzfax Anleitung", "url" => "fritzfax_anleitung.php")
                      )
                   );
                   
$seiten[] = array ( "name" => "Videos", "sub" =>
                 array(
                     array( "name" => "FritzFax", "url" => "fritzfax_videoanleitung.php" ),
                    array("name" => "Systemwiederherstellung", "url" => "systemwiederherstellung.php"),
                    array("name" => "Macrium Reflect", "url" => "macrium_reflect.php")
                      )
                   );

$seiten[] = array ( "name" => "Downloads", "url" => "downloads.php" );
$seiten[] = array ( "name" => "Kontakt", "url" => "kontakt.php", "sonstiges" => 'accesskey="9"');
$seiten[] = array ( "name" => "Quellen", "url" => "quellen.php" );
$seiten[] = array ( "name" => "Datenschutzerkl&auml;rung", "url"  => 
"datenschutz.php", "sonstiges" => 'title="besondere Hinweise 
 bez&uuml;glich Google Analytics"'); ?>

<div class="steuerung">
<ul>
<?php echo aufklappmenue($seiten, $aktuell); ?>
</ul
</div>

CSS:

/* navigation */
.steuerung {
    float:left;
    margin:.4% 0 2% .5%;
    width:218px;
}
.steuerung a , .steuerung li {
    color:#00008b ;
    display:block;
}

.steuerung a:visited {
    color:#800080;
}
.steuerung li:hover a {
    font-weight:bolder;
}
li:hover.off a {
    font-weight:normal;
}
.steuerung li {
    background-image:url(bilder/navi_aqua.png);
    background-repeat:no-repeat;
    font-size:14px;
    background-position:0 center;
    list-style-type:none;
    padding:11px;
    position:relative;
}

.off:hover ul , .steuerung li.over ul
{
    display:block;
}
.off:before {
    content:" >> ";
    float:left;
}
.off:hover:before {
    content:" ↓ ";
}
.menueliste
{
    font-size:13px;
    list-style-type:none;
}
.off ul
{
    position:absolute ;
    top: 0;
    left: 198px;
    display:none;
}
.steuerung .off .menueliste li:hover {
    background-color:gray;
}
.steuerung .off .menueliste li:hover a {
    color:white;
}
.steuerung .off .menueliste li
{
    background-color:#add8e6 ; /*lightblue*/
    padding:8px 2px 4px 6px;
    background-image:none;
    margin:0 0 0 10px;
    border-bottom: 1px solid gray;
    white-space:nowrap;
}
.steuerung li.off:hover {
    background-position:0 0;
    color:white;
}
.steuerung ul li:hover {
    background-image:url(bilder/navi_aqua_hover.png);
}
.steuerung li:hover a {
    color:white;
}
.off:hover li a {
    color:#00008b;
    background-image:none;

}
/* Steuerung - Ausklappen der aktuellen Seite */
#akt ul
{
    display:block;
    position:relative;
    top:0;
    left:0;
    margin:13px 16px 0 0;

}
#akt .menueliste li
{
    margin:0;
    font-weight:normal;
    width:215px;
}

li#akt, #akt_up
{
    background-position:0 0;
    color:white;
    background-image:url(bilder/navi_aqua_hover.png);
    font-weight:bolder;
}

#akt:before
{
    content:" ↓ ";
}
#akt_up:before
{
    content:" → ";
}
    
.steuerung li#akt_sub
{
    color:red;
    font-weight:bolder;
}
#akt_sub:before
{
    content:" → ";
}

[AmicaNoctis]

Hallo,

so wie es aussieht, funktioniert das nur für eine feste Anzahl von Hierarchie-Ebenen. Wenn du die Funktion rekursiv umbaust, kannst du beliebig verschachtelte Menüs damit umsetzen. Kleine beispielhafte Starthilfe: Home page

Gruß,

Amica

[einermeiner]

Auch wenn ich es eigentlich gar nicht benötige, da ich nur 2 Ebenen habe, habe ich es mal mit der rekursiven versucht (scheint auch zu funktionieren, beim CSS müsste man vielleicht noch was anpassen, aber das habe ich nicht berücksichtigt):

<?php
function naviRecursive( array $seiten, $aktuell, $aktID='akt_up')
//$aktID für die ID Bestimmung der aktuellen Seite, je nachdem, ob es ein Ober- oder Unterpunkt ist
{
    foreach ( $seiten as $seite )
    {
        if ( isset ($seite['sub']) )
        {
            $ausgabe .= "\t\t" . '<li class="off" id="{[check]}">' . 
$seite['name'] . "\n" . "\t\t\t" . '<ul class="menueliste">' . "\n";
        
            $recursive = naviRecursive( $seite['sub'], $aktuell, "akt_sub");
            $ausgabe .= $recursive[0] . "\t\t\t</ul>\n\t\t</li>\n";
            $check = $recursive[1];
            if ( $check )
                $ausgabe = str_replace('id="{[check]}"', 'id="akt"', $ausgabe);
            else
                $ausgabe = str_replace('id="{[check]}"', '', $ausgabe);
        }
        else
        {
            if ( $seite['url'] == $aktuell )
            {
                $ausgabe.= "\t\t" . '<li id="' . $aktID . '">' . $seite['name']. "</li>\n";
                $check = true;
            }
            else
            {
                $ausgabe.= "\t\t" . '<li><a target="_top" 
href="http://example.com/?url=' . $seite['url'] . '" ' . $seite['sonstiges'] 
. '>' . $seite['name']. '</a></li>' . "\n";
            }                
        
        }
    }
        return array ( $ausgabe, $check);
}


?>