Anzeige

Einfaches Navi-Script in DIV+CSS-Layout

Einfaches Navi-Script in DIV+CSS-Layout | PSD-Tutorials.de

Erstellt von mihi, 27.02.2010.

  1. mihi

    mihi EDVler

    Dabei seit:
    15.11.2005
    Beiträge:
    102
    Geschlecht:
    männlich
    Einfaches Navi-Script in DIV+CSS-Layout
    Hallo Zusammen,

    bin gerade dabei eine neue, einfache Website zu erstellen. Das ganze mache ich mit HTML+CSS. Hier z.b. mein Aufbau der index.php

    <div id="container">
    <div id="banner"></div>
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="infobox"></div>
    </div>

    Bisher habe ich in den div "Navigation" per include(); die navigation.html eingebunden und dann mit diesem Script in der index.php realisiert, dass bei einem klick auf z.b. Kontakt die kontakt.php in den div content includiert wird.

    function content() {
    $menu = $_GET['menu'];
    if ($menu == 0) include ("startseite.html");
    if ($menu == 1) include ("kontakt.php");
    if ($menu == 2) include ("fotos.html");
    if ($menu == 3) include ("impressum.html");
    }

    Die Links in der navigation.html haben z.B. so ausgesehen.
    <ul>
    <li><a href="index.php?menu=0">Home</a></li>
    <li><a href="index.php?menu=1">Kontakt</a></li>
    <li><a href="index.php?menu=2">Fotos</a></li>
    <li><a href="index.php?menu=3">Impressum</a></li>
    </ul>

    Es funktioniert soweit alles super nur meine Frage ist ob das 1. so OK ist und 2. würde ich das kleine Script gerne erweitern um den aktiven Menüpunkt irgendwie per CSS formatieren zu können.

    Ich habe jetzt schon eine Weile im I-net geschaut, habe auch einige solcher Scripte gefunden nur laden die immer die komplette Seite neu und ich würde gern wirklich nur den Inhalt neu laden, wie bisher auch.

    Was ist richtig? So wie ich es mache oder die anderen Scripte?
    Ist mein Script schlecht? Oder kann ich es anpassen damit der aktive Menüpunkte irgendwie gekennzeichnet werden kann?

    Ich hoffe ihr versteht mein Anliegen?

    Vielen Dank im Voraus.

    Gruß
    Michi
     
    #1      
  2. timmeythe1st

    timmeythe1st nichtswissender

    Dabei seit:
    08.01.2009
    Beiträge:
    113
    Geschlecht:
    männlich
    Ort:
    bei Berlin
    Software:
    den kopf (manchmal)
    Kameratyp:
    Panasonic DMC-FZ38
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    man kann das durchaus so realisieren, das ist kein problem und deswegen ist der code auch nicht schlecht
    du könntest diese php-abfrage auch bei dem menü einbauen, sodass ein div um den aktivierten menüpunkt erstellt wird mit einer id, die dann per css angesprochen wird
    also z.b.
    <ul>

    if($menu==0) { echo "<div id=\"active\"><li>
    <a href=\"index.php?menu=0\">Home</a></li></div>";} else {
    echo "<li>
    <a href=\"index.php?menu=0\">Home</a></li>";
    }
    usw.
    ist jetzt vielleicht nicht perfekt, veranschaulicht aber, was ich meine
     
    #2      
  3. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    Hi,

    ich würde das etwas anderst lösen. Zumal bei deiner Version ein string oder script ausgeführt werden könnte. Sprich - du prüfst nicht auf strip_tag bzw. integer-Werte bei der Übergabe.

    Deshalb würde ich das so realisieren:
    PHP:
    1.  
    2. <?php
    3. /* einfachs Array um später sehr leicht die Navigation zu erweitern. */
    4. $menuArr = array(
    5.                     0 => 'startseite.html',
    6.                     1 => 'kontakt.php',
    7.                     2 => 'fotos.html',
    8.                     3 => 'impressum.html'
    9.                 );
    10.  
    11. /**
    12.  * funciton getParamNav($var)
    13.  * @param string $var
    14.  * @return string
    15.  */
    16. function getParamNav($var) {
    17.     if(isset($_GET[$var]) && int($_GET[$var]) && $_GET[$var] > 0) {
    18.         return $_GET[$var];
    19.     } else {
    20.         return 0;
    21.     }
    22. }
    23.  
    24. /* include per Array und Funktions-Rückggabewert */
    25. include($menuArr[getParamNav('menu')]);
    26. ?>
    27.  
     
    #3      
  4. timmeythe1st

    timmeythe1st nichtswissender

    Dabei seit:
    08.01.2009
    Beiträge:
    113
    Geschlecht:
    männlich
    Ort:
    bei Berlin
    Software:
    den kopf (manchmal)
    Kameratyp:
    Panasonic DMC-FZ38
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    das ist ja sehr schön und wesentlich eleganter als meine lösung
    aber es hilft nicht bei dem ursprünglichem problem
     
    #4      
  5. mihi

    mihi EDVler

    Dabei seit:
    15.11.2005
    Beiträge:
    102
    Geschlecht:
    männlich
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    Danke für eure Antworten. Ich werde es test und mich melden

    @saila: Du merkst ja, dass ich in PHP nicht wirklich Ahnung hab -siehe mein bisheriges Script.

    Dein Script check ich irgendwie nicht.

    Das hier ist klar, hier werden die Menüpunkte in einen Array gegeben.

    $menuArr = array(
    0 => 'startseite.html',
    1 => 'kontakt.php',
    2 => 'fotos.html',
    3 => 'impressum.html'
    );

    Hier wird geprüft welcher Menüpunkt im Link übergeben wird, oder?

    function getParamNav($var) {
    if(isset($_GET[$var]) && int($_GET[$var]) && $_GET[$var] > 0) {
    return $_GET[$var];
    } else {
    return 0;
    }
    }

    Wird hier der Content eingebunden?

    include($menuArr[getParamNav('menu')]);

    Wie müssen dann meine Links in der navigation.htm aussehen?
    Wie bisher?

    Ist bei deinem Code etwas eingebaut, um den aktiven Menüpunkt mit irgendeiner css-id formatieren zu können?

    Vielen Dank
    Gruß Michi
     
    #5      
  6. timmeythe1st

    timmeythe1st nichtswissender

    Dabei seit:
    08.01.2009
    Beiträge:
    113
    Geschlecht:
    männlich
    Ort:
    bei Berlin
    Software:
    den kopf (manchmal)
    Kameratyp:
    Panasonic DMC-FZ38
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    function getParamNav($var) {
    if(isset($_GET[$var]) && int($_GET[$var]) && $_GET[$var] > 0) {
    return $_GET[$var];
    } else {
    return 0;
    }
    }

    hier wird gefragt, ob ein wert übergeben wurde, also ob $_GET[$var] gesetzt wurde
    dann, ob der wert eine integer-zahl ist (int($_GET[$var]) und dann, ob sie größer als null ist
    wenn das alles zutrifft, wird der übergebene wert (1, 2, etc.) zurückgeliefert
    und include($menuArr[getParamNav('menu')]); ruft die gewünschte seite auf
    trifft das nicht zu, wird 0 zurückgeliefert und include($menuArr[getParamNav('menu')]); ruft die startseite auf
    deine links ändern sich nicht, du gibst weiterhin z.b. index.php?menu=0 an, da das prinzip dasselbe ist, wie das, das du verwendet hast
    einzig ist dort eine überprüfung zwischengeschaltet, die verhindern, dass werte wie z.b. index.php?menu=hallo falsch interpretiert werden und ggf. eine fehlermeldung ausgegeben wird

    bei dem code wird keine css-id hinzugefügt wie bein meinem code
    daher auch mein vorheriger post
     
    #6      
  7. mihi

    mihi EDVler

    Dabei seit:
    15.11.2005
    Beiträge:
    102
    Geschlecht:
    männlich
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    Vielen Dank für die Erklärung.
    Bei deinem Post hab ich wars. gerade meine geschrieben.

    Kann mir da noch jemand bei der Umsetzung helfen, um den aktiven Menüpunkt formatieren zu können.

    Jetzt noch eine Frage, was ist die bessere Methode:

    Alles neu laden oder wie ich nur den Inhalt? Gibt es Vor-und Nachteile?

    Danke
    Gruß Michi
     
    #7      
  8. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    Nö, aber der Lösungsansatz ist bereits enthalten. Man müsste nur etwas das Gehirn bemühen.

    Zur ersten Frage. Das kannst du gestalten wie du es möchtest.

    Zur zweiten Frage: nein, aber mit etwas Nachdenken kommt man z.B. auf folgenden Lösungsansatz:
    PHP:
    1.  
    2. function activeMenu($var, $menu = null) {
    3.     if(isset($var) && isset($menu)) {
    4.     // alternativ if(isset($var) && is_string($var) && isset($menu) && int($menu))
    5.         return 'active';
    6.     }
    7.     return;
    8. }
    9.  
    dadurch würde sich dein Menü wie folgt neu gestalten:
    Code (Text):
    1.  
    2. <!-- einbinden in die Menüleiste -->
    3. <ul>
    4.     <li<?php echoactiveMenu($var, null); ?>><a href="index.php?menu=0">Home</a></li>
    5.     <li<?php echoactiveMenu($var, 1); ?>><a href="index.php?menu=1">Kontakt</a></li>
    6.     <li<?php echoactiveMenu($var, 2); ?>><a href="index.php?menu=2">Fotos</a></li>
    7.     <li<?php echoactiveMenu($var, 3); ?>><a href="index.php?menu=3">Impressum</a></li>
    8. </ul>
    9.  
    Über diesen Weg kannst du somit auch noch andere Klassen für das jeweilige aktive Menü hinterlegen.

    Da ein Menü in der Regel früher oder später auch erweitert oder verändert wird, würde ich ein Menü immer dynamisch generieren. Somit würde auch das ganze hin und her mit aktive und nicht aktive, erweitern oder ändern usw. entfallen.


    ==================================
    So auf die Schnelle würde ich ein Menü auf diesem Weg realisieren:
    PHP:
    1.  
    2. <?php
    3. /**
    4.  * function getParam($var)
    5.  * @param: string $var
    6.  * @return: integer
    7.  */
    8. function getParam($var) {
    9.     if(isset($var)) {
    10.         return $menuId = isset($_GET[$var]) ? (int)$_GET[$var] : 0;    
    11.     }
    12.  
    13. }
    14.  
    15. /**
    16.  * menu anlegen
    17.  */
    18. $viewMenu = '';
    19.  
    20. /**
    21.  * Standard-KLasse
    22.  */
    23. $style = '';
    24.  
    25. foreach($menuArr as $k => $v) {
    26.    
    27.     if(getParam($var) === $k) {
    28.         $style = ' class="'. $menuArr['menu'][$k][2] .'"';
    29.     }
    30.    
    31.     $viewMenu .= '<li'. $style .'><a href="'. $menuArr['menu'][$k][1] .'">'. $menuArr['menu'][$k][0] .'</a></li>'."\n";
    32. }
    33. ?>
    34.  
    Dein Menüaufbau:
    Code (Text):
    1.  
    2. <ul>
    3.     <?php echo $viewMenu; ?>
    4. </ul>
    5.  
    Ist ungeprüft (sollte aber meiner Meinung nach komplett durchlaufen).
     
    Zuletzt bearbeitet: 27.02.2010
    #8      
  9. mihi

    mihi EDVler

    Dabei seit:
    15.11.2005
    Beiträge:
    102
    Geschlecht:
    männlich
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    Ähhh, ja dann versuch ich es mal. Bin eh schon dabei, bekomme nur immer den Fehler:

    Fatal error: Call to undefined function int() in D:\xampp\xampp\htdocs\friseur_mueller\index.php on line 11

    Das liegt wohl daran: int($_GET[$var])

    Wenn ich das jetzt richtig verstanden habe dann ist der letzte Code, den du gepostet hast der ersatz für meine navi.php???
     
    #9      
  10. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    Einfaches Navi-Script in DIV+CSS-Layout
    AW: Einfaches Navi-Script in DIV+CSS-Layout

    das muss (int)... lauten. Sry
     
    #10      
Seobility SEO Tool
x
×
×